Canonical naming of CSS classes and IDs in Web development

css|web| Specification | standardization

Web developers can identify divs and other formatting page elements by creating CSS classes and ID names and using these 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 classes and ID-naming conventions written by Andy Clarke (of Stuff and nonsense and all) 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.