Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the naming convention of class and id in CSS", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the naming conventions of class and id in CSS".

Standardized nomenclature of CSS class class and id

Web developers can identify divs and other formatted page elements by creating CSS classes and id names and using these names. For developers, when naming a CSSselectors that redefines XHTML tags (tags), you must ensure that it accurately matches the predefined tags, but as far as class and id selector names are concerned, different people have different opinions. However, it is not a good habit to name these classes and id at will.

Intuitive naming

When designing a Web page and needing to identify a div, the most natural idea is to name an element using words that describe the location of the page. This method causes the name of the class and id to look like this:

Top-panel

Horizontal-nav

Left-side

Center-column

Right-col

These are effective naming methods for CSS as well as XHTML classes and id. These words are simple and can make people as the name implies, so they meet the need to identify page elements and the corresponding CSS style.

The problem, however, is that such a name is associated with a specific expression of the page's content. These names refer to the location of page elements in a particular page layout, so it can be inappropriate and even confusing to use outside such a layout. At the same time, these names do not involve the structure of the content of the document. Therefore, here are better ways to name the CSS class and ID.

Structured naming

A structured tag means that the expression / location information is completely separated from the content-- this includes the class and id names that appear in the markup.

Tagged information is used to describe the structure of the document rather than the appearance. This feature allows us to reuse content (content) and tags (markup) in different appearance formats by simply changing the CSS. When you understand this approach, it is easy to find that the use of page locations to name classes and id is very inappropriate for handling appearance formats such as audio (audio). Therefore, classes and id should be structurally named based on the purpose of use in the document rather than where it appears.

You can name the class and the id name in a structured manner as follows:

Branding

Main-nav

Subnav

Main-content

Sidebar

These names are as easy to understand as intuitive naming, but they describe the role of the page elements rather than the location. This makes the code more in line with the original intention of using pure structured markup (structuralmarkup), that is, developers can handle display formats in a variety of media without changing the markup.

Even if you don't plan to format Web pages on other media, using structured naming can also make it easier for you to upgrade or redesign your site in the future. For example, structured naming avoids the confusion caused by a div and idright-column moving to the left of the page. This naming of divsidebar is more appropriate, because no matter which side of the page it appears, the name is still intuitive and easy for developers to understand.

Convention

AndyClarke analyzed the source code of 40 Web sites designed by developers who advocate standardized Web design concepts. Although the class and id names are very inconsistent, some common names that occur frequently are found. Here is an example list of the most commonly used class / id names:

Header

Content

Nav

Sidebar

Footer

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

Do these common classes and id names mark the birth of a standard or the formation of a generally accepted convention? Although this is what I want, I don't think so. I do want to see a whole set of naming standards for common page elements that we see every day. At the same time, using standardized naming methods can make it easy to find page elements and upgrade Web sites, especially when you need to switch jobs between sites developed by different developers at different times.

The above is the content of this article on "what are the naming conventions of class and id in CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.