Getting Started - Standardization Named of CSS Class and ID

xiaoxiao2021-03-06  27

Author: Builder.com 2005-01-12 09:59 AM

Web developers can identify Divs and other format page elements by creating CSS classes and ID names and using these names. For developers, when naming the CSS Selectors of the XHTML tag (Tags), it must ensure that it is accurately matched to a predefined tag, but the class and the ID selector name are, the benevolent sees the benevolence, the wise man witnessed. However, it is not a good habit of these classes and ID naming as you want.

After reading a series of articles about the CSS class and the ID naming specification by Andy Clarke (of Stuff And Nonsense and All That MalarKey) and Eric Meyer, I start thinking about the class and IDS in my own Web site design. naming method.

Intuitive naming When designing the web page and when you need to identify a DIV, the most natural idea is to use the vocabulary that can describe the location of the element. This method makes the name and the name of the ID below:

Top-Panel

Horizontal-NAV

Left-side

Center-color

Right-col

These are CSS and XHTML classes and id effective naming methods. These vocabulaions are simple and can make people's ascended, so they meet the needs of the logo page elements and the corresponding CSS style.

However, the problem is to be associated with a particular expression of the same page. These namings refer to a page element location in a particular page layout, so it is not suitable for use in such layouts and even causing confusion. At the same time, these names do not involve the structure of the documentation. Therefore, the method for named the CSS class and ID naming is given below.

Structured Named Structured Mark means that the expression / location information is completely separated from the content - including the classes and ID names in the markup (Markup).

The relevant information with marks is used to describe the structure of the document rather than the appearance. Such features allow we can reuse the contents of different appearance formats by simply changing CSS. When you understand this approach, it is easy to find that the page location is used as the class and ID naming. It is very unsuitable in processing such as audio (AUDIO). Therefore, it should be structured based on the location of the use of the purpose in the document and non-appearance.

You can name the class and ID name in the structured manner as shown below:

BRANDING

Main-nav

Subnav

Main-content

Sidebar

These names are very easy to understand as intuitive naming methods, but they describe the role of page elements and not position. This makes the code more in line with the original intention of the pure structured markup, that is, the developer can process the display format under various media without changing the mark.

Even if you don't intend to format the web page on other media, you can use structured naming methods to help you easily in future site upgrades or redesign. For example, a structured naming avoids chaos that a DIV is moving to the left side of the page to the left. This name method for the use of Div Sidebar is more appropriate, because no matter which side appears on the page, this name is still intuitive to developers.

Formula Andy Clarke analyzes the source code of the Web site designed by developers who admire the standardized Web design concept. Although classes and ID names are very unfamiliar, some common names that frequently appear. Here is a list of examples of the most common type / ID name:

HEADER

Content

NAV

Sidebar

Footer

If you want to view a full list, you can check the most common name formula form.

转载请注明原文地址:https://www.9cbs.com/read-65381.html

New Post(0)