[CSS] class and id naming rules-Yuexi

[CSS] class and id naming rules-Description of Yue Qingxi. This article is a summary of the high-traffic website CSS development technology. The text is from a book.

Good Book, recommended reading and learning

You can also refer to the blog on the Internet

Original: Bingo
Link: http://blog.bingo929.com/css-coding-semantic-naming.html

Class and id are used to establish the link between CSS and HTML files.

Note that browser compatibility issues should be considered for some selector writing methods, such as nth-child selector and multi-class selector. classA. classB (IE6 and earlier versions cannot be understood)

There are several things to consider when naming element classes and IDs:

• Semantics
• Acceptable characters
• Convention
• Consistency

1. First, let's talk about semantics.

The so-called semantics means that the name should describe the content rather than the description. The example is as follows:

♦Phenotype (not recommended)

PurpleBold (purple bold)

BigHeading (large title)

Top-left-box (upper left box)

Underlined-and-green (underline green)

BoxLeft (Left box)

Red)

The red mark involves the representation of elements, which is not allowed in the name, because the representation is changed. When a change occurs, not only must the class and id names of CSS be modified, it is quite troublesome to modify the class and id names of corresponding html elements. When you edit a large website, it is very time-consuming and troublesome to make multiple such changes. Therefore, we should try to adopt a name that adapts to changes, that is, the name is closely related to the content.

♦Semantic (advocacy)

Sidebar (sidebar)

Warning (warning)

Of course, sometimes it is more flexible to use performance for naming. For example, you can add the same style to multiple websites using the bordered (with border) Performance name.

Remember, the best solution is not the cleaner or the most beautiful one. Instead of sticking to the law, let go of your ideas.

2. Acceptable characters

Best Practice: Always use letters, numbers, or hyphens, and always start with a letter

Remember, the class and id names are case sensitive.

Do not use underscores. Do not start with numbers or hyphens. Do not accept "*", "/", or "\". Although the new browser supports more features for the uncommon character set, not all browsers do. To ensure compatibility, follow the best rules.

3. Convention

Using Convention names can improve code predictability, make yourself and others easy to understand, help screen readers and analyzer work, and improve SEO (Search Engine Optimization)

Reference to Web Front-end development specifications

4. Case sensitivity

Camper (each letter of the abbreviation uses the same case: pdfLink linkPDF)

Hyphen

5. namespace

Prefix, for example, wp-users. The namespace must have namespace conventions within the team.

This is one of the techniques used by defensive CSS. Code is isolated through namespaces to avoid conflicts, so that they do not affect the original and future code.

Follow-up learning:

Microformat (Microformat) http://microformats.org/"href =" http://www.cnblogs.com/%20http:/microformats.org/ "target =" _ blank "> http://microformats.org/