Nec's better css solution-PHP development

I have been familiar with nec's better css solution for a long time, but I only look at the solution of its functional modules. However, I turned a blind eye to its essence-css naming rules, it is simply a dramatic shopping spree. I have been familiar with the "nec better css solution" for a long time, but I only look at the solution of its functional modules. However, I turned a blind eye to its essence-css naming rules, it is simply a dramatic shopping spree.

What problems can nec's css naming rules solve?

The website is ready, but this is only the beginning of website maintenance. Next, you need to optimize the website's front-end to make it more reasonable, more humane, and keep pace with the times, therefore, you need to carefully deploy its modules and start to remember which tag corresponds to which module. After a long time, you may have to spend a lot of time searching for the correspondence between the module and the tag.

Do you have such troubles that names of css styles often conflict with each other, or sometimes you may wonder how to name a css Tag?

In addition, sometimes I am complacent about my well-designed website template. No matter how good it is, it is just enough. Because when I go to my next website, I will deploy it from the beginning again, I have never thought of lending a signature or inheriting the essence of the previous step...

Of course, I can only enumerate these common problems here. In fact, nec's css naming rules can solve no more than this problem. It can make the css layout clear and make css modular, css design efficiency can be improved.

If you already know the nec CSS specification, stop it to avoid wasting your time.

Nec CSS specifications

Use the class selector to discard the ID selector.

The uniqueness of the ID in a page leads to the failure to reuse the ID as the selector to write CSS.

Special NEC characters: "-" hyphens

"-" This specification does not indicate the meaning of a hyphen.

She only represents two meanings: Category prefix separator and extended separator. For details, see the following rules.

Classification naming method: Use a single letter + "-" as the prefix

Layout (grid )(. g-); module (module )(. m-); component (unit )(. u-); function (function )(. f-); skin (skin )(. s-); Status (. z -).

For more information about the preceding explanations, see "CSS internal classification and sequence" in the classification method ".

Note: The selector in your style always starts with the preceding five classes and then uses the descendant selector.

If these five categories cannot meet your needs, you can define one or more categories, but they must comply with the naming rules prefixed with a single letter + "-", that is. x-format.

Special:. j-will be used for JS node acquisition. Do not use. j-to define the style.

Descendant selector name

Conventions do not use a single letter + "-" as the prefix and a class selector with a length greater than or equal to 2 as the descendant selector, for example :. item is every item in the m-list module ,. text in the m-list module :. m-list. item {}. m-list. text {}.

A semantic tag can also be a descendant selector, such as. m-list li {}.

The class selector of a single letter is not allowed. For the reason, see "extended class of the descendant selector of modules and components" below ".

By using the descendant selector, you do not need to consider whether the name has been used, because it only takes effect in the current module or component,The same style name can be reused in different modules or components., Do not interfere with each other; especially when there are multiple people or sub-module collaboration!

The descendant selector does not need to represent the full structure tree hierarchy. It can be as short as possible.

Note: descendant SelectorDo not useBecause of the high possibility of pollution;

/* Here. itm and. cnt only. valid 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 is only in. valid 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: manifested or non-semantic naming */. m-abc. green2 {}. g-left2 {}/* recommended: Use a short name with semantics */. m-list. wrap2 {}. g-side2 {}

Different classes with the same Semantics

Method: directly add numbers or letters to distinguish (such as:. m-list,. m-list2,. m-list3, etc., are list module, but is completely different from the module ).

Other examples:. f-fw0,. f-fw1,. s-fc0,. s-fc1,. m-logo2,. m-logo3, u-btn, u-btn2 and so on.

Naming of extended classes of modules and components

When A, B, C,... are of the same type and the shape is similar, the base class is created with the highest occurrence rate, and the others are extended as the base class.

Method: + "-" + number or letter (for example, the extension class of. m-list is. m-list-1,. m-list-2, etc ).

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

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

If your website is not compatible with browsers such as Internet Explorer 6, you can use an independent status classification method (. z-) method :. u-btn.z-dis ,. m-box.z-sel, then use: class = "u-btn z-dis" like this ".

Extended class of the descendant selector of modules and components

Sometimes there will be something similar in the module. If you haven't made them into components and extensions, you can also use descendant selectors and extensions.

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

Extension of the descendant selector:. m-login. btn-1 {},. m-login. btn-dis {}.

You can also use an independent status 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. If you directly use tags as selectors, you do not need to use this method.

Note: To prevent the extension class and the class naming rule conflict of the descendant selector, the descendant selector cannot use a single letter.

For example :. m-list. a {} is not allowed, because when this. a will change. a-bb, which is in conflict with naming rules of major categories.

The Group selector can sometimes replace the extension method.

Sometimes, although two modules of the same type are very similar, you want them to have no dependency between them. That is to say, you do not want to use the extension method. Then you can set the common style by merging the selector.

The premise of using this method is: the same type, function and appearance are similar, and it is easy to maintain in the same code area.

/* Common styles of the two components */. u-tip1 ,. u-tip2 {}. u-tip1. itm ,. u-tip2. itm {}/* is the style of the two components respectively * // * tip1 */. u-tip1 {}. u-tip1. itm {}/* tip2 */. u-tip2 {}. u-tip2. itm {}

Prevention of pollution and pollution

When the module or component is nested with each other and the same tag selector or other descendant selector is used, the selector inside will be affected by the same selector outside.

Therefore, if your module or component may be nested or nested in other modules or components, use the label selector with caution. If necessary, use the class selector and pay attention to the naming method. m-layer. layerxxx ,. m-list2. list2xxx to reduce the contamination of the Child selector.