Tutorials to .com

Tutorials to .com » Website » Css » CSS class and id on the standardization of naming

CSS class and id on the standardization of naming

Print View , by: iSee ,Total views: 11 ,Word Count: 1283 ,Date: Wed, 26 Aug 2009 Time: 4:00 PM

Web developers can create a css class and id names and use these names to the format of the divs and other page elements are identified. For developers, in the name redefine XHTML markup (tags) to CSS selectors, we must ensure that their mark with predefined exact match, but in class and id selectors name of the case, then the eyes of the beholder, the wise views about that. However, for these classes, as well as arbitrary id name is not a good habit.

Read by Andy Clarke (of Stuff and Nonsense and All That Malarkey) and written by Eric Meyer on CSS class and id naming a series of articles, I began to think on their own Web site, the design process of the class as well as the ids of the named.

Intuitive naming

When designing Web pages and the need for a div to identify when the most natural idea is to use the page where you can describe the elements of the location of vocabulary to name it. This approach makes the class and id names as shown below:






These are the CSS and XHTML valid class and id naming. They're simple and are able to make the name implies, has met the identification page elements and the corresponding CSS style needs.

But the problem is that the name of the page content with a specific way of expression is associated. These names made reference to a specific page layout of the page elements in place, and therefore beyond the use of such a layout would seem inappropriate and confusing. At the same time, these names did not address the contents of the document structure. Therefore, the following presents a CSS class and ID naming a better way.

Structured Name

Structured markup means of expression / location information with complete separation of content - this includes in markup (markup) in the class and id names.

Marked relevant information is used to describe the document's structure rather than appearance. This feature allows us to change the CSS through a simple way to format the appearance of different content (content) and markup (markup) for reuse. When you understand this approach, it is easy to use page location can be found for the class and id naming approach in dealing with such as audio (audio) formats such as the appearance it is very inappropriate. Therefore, it should be based on the use of the purpose of the document but not a location of the structured class and id names.

Can follow a structured as follows way of the class and id name to:






These names are named after the same manner as with the visual is very easy to understand, but they described the role rather than the location of page elements. This makes the code more consistent with the use of a purely structural markup (structural markup) in mind, that developers can not change the tag under the circumstances of the various media, the display format for processing.

Even if you do not intend to in other media formats on the Web pages change, using a structured method of naming can also help you in future upgrades or re-design of the site easier. For example, structured naming to avoid that when a div with the id right-column to move to the left of the page after the chaos brought about. Div sidebar on the adoption of such a naming becomes more appropriate, because no matter which side of the page it appears that this name is still on the developers to understand intuitively.


Andy Clarke analysis of 40 standardized Web design by respected developers who designed Web site source code. Although the class and id name of the very unified, but still found some common names that appear frequently. Here are the most commonly used class / id name of the sample list:






If you want to see a complete list, take a look at the most common naming convention table

The common name of the class and id marked the birth of a standard or generally accepted practices into being? Although this is what I wanted, but I do not think so. I do hope to see a set for us every day to see the naming standards for common page elements. At the same time, use of standardized naming can make to find page elements, as well as the convenience of Web site upgrades, especially when required by different developers at different times and developed the site in exchange for the time to work.


Great layout div appearance can be named (eg, header, footer), the other I think it should start by describing the content of the standards contained in naming (eg, menu, news)

The layout will not appear on the left, right and other relevant location of the words as well ... ... to support Shark, named according to their content is the most scientific.

At first I felt the last part is inappropriate, I think the tag should be completely separate, and content and display in turn, think about, sharkui if there is a certain reason such as a list of the same structure (respectively in different pages)
<li> today, do you eat </ li>
<li> today, do you eat </ li>
<li> today, do you eat </ li>
<li> today, do you eat </ li>
<li> today, do you eat </ li>
</ ul>
One is the news news, one is the technical documentation tech
How do we do to this list of names?
Respectively for the id = "news" and id = "tech"
Or a class = "articleList" do?

If the former, if the two lists is completely the same, I would like to define two kinds of exactly the same CSS is not a waste? Two kinds Fortunately, there are many such, if a list of it?
If the latter, then these two styles can only be defined as the same, and if I need some difference between the two, such as color, then I re-write a CSS layout and modify the code

The solution is simple ah, id and class using the term:
<ul id="news" class="articleList"> </ ul>
<ul id="tech" class="articleList"> </ ul>
CSS are very similar to the concept of oop in, class here can be understood as "inheritance", id can be understood as "overloaded." CSS not that mean that the c Mody? ^ _ ^

CSS Tutorial Articles

Can't Find What You're Looking For?

Rating: Not yet rated


No comments posted.