CSS code naming conventions

Discard the ID selector using the class selector

The uniqueness of the ID in one page results in the inability to reuse the CSS if it is written with the ID selector.

NEC Special characters: "-" hyphen

"-" does not imply the meaning of hyphens in this specification.

She only represents two meanings: Classification prefix delimiter, extended delimiter, see the following specific rules.

Naming methods for classification: prefix with a single letter + "-"

Layout (grid) (. g); module (. m), Component (unit) (. u); function (. f); Skin (. s); State (. z).

Note: Selectors in your style always start with the preceding five categories, and then use the descendant selector inside.

If these five classes do not meet your needs, you can define another one or more large classes, but must conform to the single letter + "-" as the prefix of the naming convention, that is, the. x format.

Special:. J will be dedicated to JS to get the node, do not use the. J definition style.

Descendant selector naming

A class selector that is not prefixed with a single letter + "-" and has a length greater than or equal to 2 is a descendant selector, such as:. Item for each item in the M-list module,. Text is the textual part of the M-list module:. m-list. item{}.m-list. text{}.

A semantic tag can also be a descendant selector, for example:. M-list li{}.

Class selectors that do not allow a single letter appear, as described in the following "extension classes for the descendant selectors of modules and components".

Using the descendant selector method, you do not need to consider whether his name has been used, because he only in the current module or component in effect, the same style name can be reused in different modules or components, do not interfere with each other, in multi-person collaboration or sub-module collaboration when the effect is particularly obvious!

Descendant selectors do not require a full representation of the tree hierarchy, as short or as short as possible.

Note: Descendant selectors should not be used in the layout of the page because of the greater likelihood of contamination;

/* here. ITM and. Cnt are valid only in. m-list */.m-list{margin:0;padding:0;}. M-list. itm{margin:1px;padding:1px;}. M-list. cnt{margin-left:100px;} /* here. CNT and. Num are valid only in. m-page */.m-page{height:20px;}. M-page. Cnt{text-align:center;}. M-page. num{border:1px solid #ddd;}

naming should be simple without losing semantics

/* Objection: the expressive or non-semantic naming */.m-abc. green2{}.g-left2{}/* Recommendation: Use a short, semantically named */.m-list. wrap2{}.g-side2{}

naming different classes of the same semantics

Method: Directly add numbers or letters to distinguish (such as:. M-list,. M-list2,. M-list3, etc., are list modules, but are completely different modules).

Other examples:. f-fw0,. F-FW1,. s-fc0,. S-fc1,. M-logo2,. M-logo3, U-btn, U-BTN2, and so on.

Naming methods for extension classes of modules and components

When a, B, C 、... They are of the same type and not very similar in shape, so they are the most likely to be made of the base class, the other to make the extension of the base class.

Method: + "-" + numbers or letters (such as:. m-list extension classes are. m-list-1,. M-list-2, etc.).

Supplement: The base class itself can be used independently (for example: class= "M-list"), and the extension class must be used based on the base class (e.g. class= "M-list m-list-2").

If your extension class represents a different state, then you can name it like this: U-btn-dis,u-btn-hov,m-box-sel,m-box-hov, and so on, then use: class= "U-btn U-btn-dis".

If your site can be incompatible with browsers such as IE6, then the way you identify the state can also take an independent state classification (. Z) method:. U-btn.z-dis,.m-box.z-sel, and then use: class= "U-btn Z-dis".

Extension classes for descendant selectors for modules and components

Sometimes there are similar things in the module, and if you don't make them into components and extensions, you can also use descendant selectors and extensions.

Descendant selector:. M-login. btn{}.

Descendant selector extension:. m-login. Btn-1{},.m-login. btn-dis{}.

You can also take the standalone state classification (. Z) method:. M-login. btn.z-dis{}, and then use: class= "btn Z-dis" like this.

Note: This method is used for class selectors, and it is not necessary to use the label directly as a selector.

Note: To prevent conflicts between extended classes and large class naming conventions for descendant selectors, the descendant selector does not allow the use of a single letter.

For example:. M-list. a{} is not allowed, because when this. A needs to be expanded, it becomes. A-BB, which conflicts with the naming conventions of large classes.

Group selectors can sometimes replace extension methods

Sometimes although two modules of the same type are similar, but you want them to not have dependencies, that is, you do not want to use the extension method, then you can combine selectors to set the common style.

The premise of using this method is: the same type, function and appearance are similar, written in the same piece of code area for easy maintenance.

  /* Two elements Common style */.u-tip1,.u-tip2{}.u-tip1. itm,.u-tip2. itm{}/* in each of the two components are the respective styles *//* tip1 */.u-tip1{}.u-tip1. itm{}/* TIP2 * * . u-tip2{}.u-tip2. itm{}

prevent contamination and contamination

When the modules or components are nested with each other and the same tag selector or other descendant selectors are used, the selectors inside are affected by the same selectors outside.

Therefore, if your module or component may be nested or nested in other modules or components, then use the tag selector with caution, use the class selector if necessary, and pay attention to the naming method, which can be used. M-layer. layerxxx,. M-list2. List2xxx form to reduce the contamination of descendant selectors.

