Canonical naming of class and ID for CSS

Source: Internet
Author: User
Tags format expression header naming convention
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? ^_^

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.