Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about the standardized naming of class and id in CSS, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Intuitive naming

When designing a Web page and when it is necessary to develop a logo for an div, the most natural idea is to name an element using words that describe the location of the page. This door path makes the class and the name of id as shown in the following faces:

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 literal, so they satisfy the importance of identifying page elements and corresponding CSS styles.

But the title problem is that it is commonly known to be related to the specific text mode of the page mode. These names refer to the location of page elements in a particular page organization, so the use of them outside of the structure will seem inappropriate and even cause body odor. At the same time, these names do not touch the structure of the document schema. Therefore, a better way to name the CSS class and ID is given above.

Structured naming

The structured logo symbolizes the complete convergence of the annotation mode / status information with the content-the class and id title in the markup.

Marked related movements are used to describe the structure of the document rather than the surface. What kind of nature enables us to reuse content (content) and tags (markup) under different appearance patterns by easily changing the CSS. When you understand this approach, it is easy to find that using page locations to name classes and id is particularly inappropriate for dealing with outlines such as audio (audio). Therefore, the class and id evolution should be structurally named based on the index of usage in the document rather than the location of the presentation.

Classes and id titles can be named in a structured manner as shown below:

Branding

Main-nav

Subnav

Main-content

Sidebar

These names are as easy to understand as intuitive naming, but they depict the sense of the page elements rather than the seats. This makes the code doubly suitable for the initial goal of using thoroughly structured identification tags (structural markup), that is, to inspire employees to deal with the development of styles in a variety of media without tampering with the tags.

Even if you don't plan to color Web pages on other media, using structured naming can help you make it easier to upgrade or redesign your site from here. For example, structured naming prevents confusion when a div and id right-column move to the left of the page. The more appropriate the naming of div sidebar is, because no matter which side of the page it appears, the name is still intuitive and easy for developers to understand.

Set a precedent

Andy Clarke elucidates the source code of 40 Web sites designed by pioneers who re-scale Web design concepts. It is true that the category and id claim that it is very unmatched, but it still creates some common titles that spring up frequently. Here is an example list of the most frequently used class / id titles:

Header

Content

Nav

Sidebar

Footer

These are all the contents of this article entitled "what are the standardized names of class and id in CSS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.