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

This article will explain in detail what is the CSS class and id naming method in the DIV layout specification. The content of the article is of high quality. Therefore, Xiaobian shares it with you as a reference. I hope that after reading this article, you will have a certain understanding of relevant knowledge.

CSS class and id naming in DIV web page layout specification

Web developers (that is, you) can create CSS classes and id names and use those names to identify divs and other page elements and tags. For developers, naming CSS selectors that redefine XHTML tags must match predefined tags exactly, but class and id selector names are a matter of opinion. However, naming these classes and ids arbitrarily is not a good habit.

After reading a series of articles by Andy Clarke (of Stuff and Nonsense and All That Malarkey) and Eric Meyer on CSS classes and id naming conventions, I started thinking about the way classes and ids are named in my Web site design process.

intuitive naming

When designing Web pages and identifying a div, the natural idea is to name it with words that describe where the element is located on the page. This method makes the class and id names look like this:

top-panel

horizontal-nav

left-side

center-column

right-col

These are valid naming methods for CSS and XHTML classes and ids. These terms are simple and give people their names, thus satisfying the need to identify page elements and corresponding CSS styles.

But the problem is that such names are associated with specific expressions of page content. These names refer to the location of page elements in a particular page layout, so their use outside of such layouts can be inappropriate or confusing. At the same time, these names do not relate to the structure of the document content. Therefore, the following is a better way to name CSS classes and IDs.

structured naming

Structured markup implies complete separation of presentation/location information from content--this includes class and id names that appear in markup.

Tagged information describes the structure of the document rather than its appearance. This feature allows us to reuse content and markup in different appearance formats by simply changing CSS. When you understand this approach, it's easy to see that naming classes and ids using page locations is inappropriate for handling appearance formats such as audio. Therefore, classes and ids should be named structurally according to their purpose in the document, not where they appear.

Class and id names can be named 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 page elements rather than their location. This makes the code more consistent with the original intent of using purely structural markup, which allows developers to manipulate display formats across a wide variety of media without changing markup.

Even if you don't plan to format your Web pages in other media, using structured naming can help you make it easier to upgrade or redesign your site in the future. Structured naming, for example, avoids the confusion caused when a div with the idright-column moves to the left of the page. This naming of divsidebar is even more appropriate, because regardless of which side of the page it appears on, the name is still intuitive to developers.

Some naming conventions

Andy Clarke analyzed the source code of 40 Web sites designed by developers advocating standardized Web design concepts. Although class and id names vary widely, some common names are found that occur frequently. Here is an example list of the most common class/id names:

header

content

nav

sidebar

footer

Do these common class and id names mark the birth of a standard or the formation of a generally accepted convention? Although that is what I wish, I do not think so. I would really like to see a set of naming standards for common page elements that we see every day. At the same time, using standardized naming makes it easier to find page elements and upgrade Web sites, especially if you need to switch jobs between sites developed by different developers at different times.

About the DIV layout specification CSS class and id naming method is what to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see 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.