You should pay attention to some standardized names when using CSS to create classes and IDs.

Web developers can identify divs and other format page elements by creating CSS classes and id names. For developers, when naming and redefining CSS selectors for XHTML tags (tags), they must ensure that they exactly match the predefined tags, but in terms of the class and id selector names, then the benevolent sees benevolence, and the wise sees wisdom. However, naming these classes and IDs as you like is not a good habit.
 
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 how to name classes and ids in my Web site design process.
Intuitive naming
When designing a Web page and identifying a div, the most natural idea is to use words that can describe the location of an element's page to name it. In this way, the class and id names are shown below:
Top-panel
Horizontal-nav
Left-side
Center-column
Right-col
These are the effective naming methods for CSS, XHTML classes, and IDs. These words are simple and can be used as the name suggests. Therefore, they meet the needs of marking page elements and corresponding CSS styles.
However, the problem is that such names are associated with the specific expressions of the page content. These naming rules refer to the location of page elements in a specific page layout. Therefore, it may be inappropriate or even confusing to use them outside of such a layout. At the same time, these names do not involve the structure of the document content. Therefore, the following provides a better method for naming CSS classes and IDs.
Structured naming
Structured markup means that the expression/location information is completely separated from the content-including the class and id names that appear in the markup.
The labeled information is used to describe the structure of the document rather than the appearance. This feature allows us to simply change CSS to reuse content and markup in different formats. When you understand this method, it is easy to find that the method of naming classes and IDs by page location is very inappropriate for processing appearance formats such as audio. Therefore, classes and IDs should be structured based on the purpose of use in the document rather than the location where they appear.
You can name the class and id in a structured manner as follows:
Branding
Main-nav
Subnav
Main-content
Sidebar
These names are as easy to understand as the intuitive naming method, but they describe the role of the page element rather than the location. This makes the code more consistent with the original intention of using structural markup, that is, developers can process the display formats in various media without changing the markup.
Even if you are not planning to modify the format of Web pages on other media, using the structured naming method can also help you easily upgrade or redesign your website in the future. For example, structured naming avoids confusion when a div moves to the left of the page with the same id right-column. This naming method is more appropriate for div sidebar, because no matter which side of the page it appears, this name is still intuitive to developers.