CSS Naming conventions collation

Based on NetEase NEC modified, collation of the naming specification

One-line completion of a selector definition

Easy to find and read the selector, but also easy to insert new selectors and editing, easy to identify the module. Remove extra spaces to make the code compact and reduce line breaks.

If you have nested definitions, you can take the form of an internal single line.

naming methods for classification: Using a single letter +"-" as a prefix

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

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).

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").

Selector level

1 tons = inline style styles.

100 catty = ID selector.

1 Catty = class, pseudo class , and attribute selector.

1 g = Type selector and pseudo element selector .

Unified semantic understanding and naming

Semantic naming
Document Doc
Heads head
Body Body
Tail footer
Main column Main
Main column sub-container main-in
Side bar aside
Side bar sub-container aside-in
Box Container Wrap/box

Layout (. g)
Semantic	Named
Document	Doc
Head	Head
Subject	Body
Tail	Footer
Main bar	Main
Main column sub-container	Main-in
Side bar	Aside
Side bar Sub-container	Aside-in
Box container	Wrap/box

Module (. m), component (. u)
Semantic	Named
Navigation	Nav
Sub-navigation	Subnav
Bread crumbs	Crumb
Menu	Menu
Options tab	tab
Title Area	Head/title
Content Area	Body/content
List	List
Form	Table
Form	Form
Hot	Hot
Ranking	Top
Login	Login
Sign	Logo
Advertising	Advertise
Search	Search
Slide	Slide
Tips	Tips
Help	Help
News	News
Download	Download
Registered	Regist
Vote	Vote
Copyright	Copyright
Results	Result
Title	Title
Button	button
Input	Input

CSS Naming conventions collation