Web developers (that is, you) can create CSS classes and id names and use these names to identify Divs and other page elements and tags. For developers, when naming css selectors that redefine XHTML tags (tags), they must ensure that they accurately match the predefined tags, but as for class and id selector names, it is a matter of opinion. However, it is not a good habit to name these classes and IDs as you wish.
After reading a series of articles about CSS classes and id naming conventions written by Andy Clarke (of Stuff and Nonsense and All That Malarkey) and Eric Meyer, I began to think about the use of classes and ids in my own Web site design process. Naming method.
Intuitive naming
When designing a web page and needing to identify a Div, the most natural idea is to name the element using words that describe its location on the page. This approach makes the class and id names look like this:
top-panel
horizontal-nav
left-side
center-column
right-col
These are valid ways of naming CSS and XHTML classes and ids. These terms are simple and descriptive, thus meeting the need to identify page elements and their corresponding CSS styles.
The problem is that such a name is associated with a specific expression of the page's content. These names refer to the position of page elements within a specific page layout, so their use outside of such a layout would be inappropriate or even confusing. At the same time, these names do not involve the structure of the document content. Therefore, here is a better way to name CSS classes and IDs.
Structured naming
Structured markup means complete separation of expression/location information from content - this includes class and id names appearing in markup.
Tagged related information is used to describe the structure of the document rather than its appearance. This feature allows us to reuse content and markup in different appearance formats by simply changing CSS. When you understand this method, it is easy to find that using page position to name classes and ids is very inappropriate when dealing with appearance formats such as audio. Therefore, classes and ids should be structured and named based on their purpose in the document rather than where they appear.
Classes and id names can be named in a structured way as shown below:
branding
main-nav
subnav
main-content
sidebar
These names are as easy to understand as the intuitive naming conventions, but they describe the role of the page element rather than its location. This makes the code more consistent with the original intention of using pure structural markup, that is, developers can handle display formats in various media without changing the markup.
Even if you don't plan to format your Web pages in other media, using structured naming can help you make future site upgrades or redesigns easier. For example, structured naming avoids confusion when a div with the same id right-column is moved to the left side of the page. Naming the div sidebar this way is more appropriate because no matter which side of the page it appears on, the name is still intuitive and easy to understand for developers.
some naming conventions
Andy Clarke analyzed the source code of 40 Web sites designed by developers who advocated standardized Web design concepts. Although the class and id names are very inconsistent, some common names that appear frequently are still found. An example list of the most commonly used class/id names is given here:
header
content
nav
sidebar
footer
Do these common class and ID names mark the birth of a standard or the formation of a generally accepted convention? Although this is what I hope for, I don't think so. I would really like to see a set of naming standards for common page elements that we see every day. At the same time, using a standardized naming method can make it easier to find page elements and upgrade the Web site, especially when you need to switch work between sites developed by different developers at different times.