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

What is the CSS class and how to name id in the DIV page layout specification? in order to solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a simpler and easier way.

Are you familiar with CSS class and id naming in DIV page layout specification? here, Web developers can identify div and other page elements and tags by creating CSS classes and id names and using these names.

CSS Class and id naming in DIV Page layout Specification

Web developers (that is, you) can identify div and other page elements and tags 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.

After reading a series of articles on CSS classes and id naming conventions written by AndyClarke (ofStuffandNonsenseandAllThatMalarkey) and EricMeyer, I began to think about how I named classes and ids in the design process of my Web site.

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.

Some naming conventions

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

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 answer to the question about CSS class and id naming in DIV page layout specification is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.