css| Specification | A normalized web developer can identify the div and other formatting page elements by creating the class and ID names of the CSS and using those names. For developers, when naming CSS selectors for redefining XHTML tags (tags), you must ensure that they match exactly the predefined tags, but in terms of class and ID selector names, it's a good thing. However, it is not a good habit to name these classes and IDs as you like.
After reading a series of articles on CSS class and ID naming conventions written by Andy Clarke (the Stuff and nonsense and all of the Malarkey) and Eric Meyer, I started thinking about how classes and IDs are named in the design process of my web site.
Visual naming
When designing a Web page and identifying a div, the most natural idea is to name it using words that describe the location of the page where the element resides. This method makes the name of the class and ID as follows:
Top-panel
Horizontal-nav
Left-side
Center-column
Right-col
These are valid naming methods for CSS and XHTML classes and IDs. These words are simple and can make people name as they are, thus satisfying the need to identify page elements and corresponding CSS styles.
The problem is that the name is associated with the specific expression of the page content. These names refer to the position of the page element in a particular page layout, so using it outside of such a layout would be inappropriate and even confusing to understand. At the same time, these names do not involve the structure of the document content. Therefore, a better way to name CSS classes and IDs is given below.
structured naming
Structured markup means a complete separation of the expression/location information from the content-including the class and ID names that appear in the tag (markup).
Tagged related information is used to describe the structure of a document rather than its appearance. This feature allows us to reuse the content and tags (markup) in different look formats by simply changing the CSS. When you understand this, it's easy to see that the way you use the page position to name the class and ID is very inappropriate in terms of processing such as audio (audio) appearance formats. For this reason, classes and IDs should be structured according to their purpose in the document rather than where they appear.
You can name the class and the ID name in a structured manner as shown below:
Branding
Main-nav
Subnav
Main-content
Sidebar
These names are as easy to understand as visual naming, but they describe the role of the page element rather than the location. This makes the code more consistent with the use of pure structured markup (structural markup), where developers can handle the display format of various media without changing the markup.
Even if you don't plan to format Web pages on other media, using structured naming can also help you make it easier to upgrade or redesign your site in the future. For example, structured naming avoids the confusion that occurs when a div and ID right-column move to the left of the page. The naming of Div sidebar is more appropriate, because no matter which side it appears on the page, the name is still intuitive to the developer.
Practice
Andy Clarke analyzes the source code for 40 Web sites designed by developers who promote standardized web design concepts. Although the class and ID names are not uniform, some common names that appear frequently are found. Here is a list of examples of the most common class/id names:
Header
Content
Nav
Sidebar
Footer
If you want to see the full list, look at the most common naming convention tables
Do these common classes and ID names mark the birth of a standard or the general acceptance of convention formation? Although this is what I want, but I do not think so. I do want to see a set of naming standards for common page elements that we can see every day. At the same time, using a standardized naming approach can make it easier to find page elements and upgrades to Web sites, especially when you need to switch to work in a site that is developed by different developers at different times.
Review
Large layout div can be named in appearance (e.g. Header,footer), others I think should be named by the criteria for describing the content (e.g. Menu,news)
Do not appear on the layout of left, right and other relevant positions of words for good ... Support for shark, according to its content to name is the most scientific.
At first I thought the second half was inappropriate, and I think the mark should be completely separate from the content and the display.
Look back and think, Sharkui words also have some reason
For example, a list of the same structure (on separate pages)
<ul>
<li> did you eat it today </li>
<li> did you eat it today </li>
<li> did you eat it today </li>
<li> did you eat it today </li>
<li> did you eat it today </li>
</ul>
One is news, one is technical documentation tech
How do we name this list?
Is the id= "news" and id= "tech", respectively.
Or is class= "Articlelist"?
If the former, if the two lists are exactly the same, I would like to define two exactly the same CSS is not very wasteful? Two kinds of good, if there are many such a list?
If this is the latter, then the two styles can only be defined as the same, if I need to make a difference, such as color, then I rewrite a CSS and modify the layout of the code
The solution is simple, ID and class are all used:
<ul id= "News" class= "Articlelist" ></ul>
<ul id= "Tech" class= "Articlelist" ></ul>
CSS has many similar concepts in Oop, class is understood here as "inheritance", and IDs can be interpreted as "overloads." Is that what the C of CSS means? ^_^
