CSS Development Specification

Summary:

Reprint: http://www.cnblogs.com/xiyangbaixue/p/3962038.html

No matter how many people develop a project, the specification is the most initial and basic, and a good specification will not only make the code look perfect but also resolve the conflict. Here is the CSS specification I used in development

Basic specification:

1. All names lowercase, conform to the specifications
2. Class name and ID, connecting multiple variables with an underscore
3. All variables can only use nouns
4. Definition of variables to be semantically consistent

Basic principles:

1. With the name of the project or a global name, for example, if your project is called demo, the namespace is demo, so that when multiple people are working together, they are highly unified.
2. Focus on separation, decoupling HTML, CSS, modular coding.

Modular Writing Practice:

2. The Semantic module name
   
   Module name should be able to see at a glance what the module is doing. General module name represents the function of this module, such as see Shopping know this module is shopping
   
   
4. The class name inside the module inherits from the parent
   
   Such as:

   1 <div class= "demo-shopping" >2    
   In the above code, the module is named shopping, and the module is  {命名空间}-{模块名} named Class in the outermost way. The module sub-elements are named on this basis. If you do not inherit the class name of the parent, it is easy to create a naming conflict. 

6. Fully consider the semantics of the structure
   
   Although the separation of concerns has been achieved in class naming, writing styles no longer relies on specific element names, but should still be considered semantically, using elements based on the purpose of element design. It is a paragraph, you use it, it is the title, it is used, it <p> is quoted, it is used <blockquote> , not a simple brute <div> <span> . The purpose of semantics, on the one hand, is to draw the CSS, the page is a well-structured, readable page, on the other hand, this is the most basic SEO requirements.
8. Avoid unnecessary nesting of CSS selectors
   
           class has been modular named, from the class name can clearly distinguish the elements of the subordinate, generally do not cause the class name conflict, there is no need to do the selector nesting, Keep the CSS structure clear and improve rendering efficiency. Special cases can be nested (such as increasing weights, separating code between topics), but avoid excessive levels.
   

    1/* recommended notation */2. demo-shopping {3 4}5. demo-shopping-body {6 7}8/* Not recommended */9. demo-shopping. Demo-shopping-body {} 

   
   
10. When interacting with JS, add state to the outer layer of the module's HTML structure, rather than adding elements individually to each child element of the module
    
    After adding the state class to the outermost layer, the entire module can be controlled, reduced in operation, and improved performance, for example, we can write:
    

    1 <div class= "demo-shopping demo-shopping-active" >2    
    But don't write like this (less efficient):
    1 <div class= "Demo-box" >2    
    
    
    

Naming considerations:

2. Semantic, hope text See righteousness
   such as demo-tab , demo -nav , do not use red , left such as the appearance of the word name.
4. Module Status:{命名空间}-{模块名}-{状态描述}
   Common statuses are: hover, current, selected, disabled, focus, blur, checked, success, error, etc.
6. Sub-module:{命名空间}-{模块名}-{子模块名}
   Common module names are: BD (body), CNT (content), HD (header), text (TXT), IMG (images/pic), Title,item,cell, etc., meaning the function of the expression component to be implemented.
8. Module nesting:
   

   1 <ul class= "Demo-nav" >2     <li class= "Demo-nav-item" >3         <a href= "#" >nav</a>4         < UL class= "Demo-subnav" >5             <li class= "Demo-subnav-item" >6 <a                 href= "#" >subnav</a>7                     <ul class= "Demo-list" >

10. Unified naming Style (uses the same noun to name the child elements of different components):
    such as Demo-tab-head, Demo-modal-head, easy to understand.

CSS Development Specification