About naming rules for CSS style sheets

Recently worked with programmers on projects. My headers are all big ~ Complaining that my CSS name cannot be understood ~ You have to follow him. As a result, I opened his page and looked at it. The first one from the beginning was contentCommon, and the following were all content ****. I explained my reasons. After half a meeting, I seemed to accept it, but suddenly said, "Don't use the H tag! Also, do not use UL to define navigation and so on. Most of the programmers who have cooperated with each other are like this, and most naming rules are self-contained. Turning a blind eye to production standards. Shouting with the attitude of taking care of IE's normal browsing, "let FIREFOX and SAFARI go to hell !"
The names are all lowercase letters. If multiple words are required, the words are separated by "-", such as content-title.
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.