Web front-end development specification Css specification

The article Xiang Xiao shared with you today is about css specification of Web front-end development specification. As an indispensable part of the development team, the Web front-end needs to be written reasonably according to relevant regulations (some bad habits may bring unnecessary trouble to yourself and others). Different companies and different teams have different specifications and documents. The following is a comprehensive and detailed arrangement result according to the requirements of different enterprises and teams. Let's take a look at the principle of css specification with Bian Xiao!

Css specification

1, and the encoding specification is utf-8.

2. Collaborative development and division of labor: I will write a * * framework file in advance according to the similarity scheme of each module and page and distribute it to the front-end personnel to realize the internal structure &; Performance &; Behavior. * * * CSS file base.css was written by me, and every page should be imported during collaborative development. This file contains the reset and the styles at the bottom of the header. This document cannot be modified at will.

3. Use of class and id: id is unique and parent, and class is repeatable and child, so id is only used in large modules, and class can be used in high reuse rate and children. In principle, the id is named when I distribute the framework file, except for the hook reserved for JS.

4. Name the hook reserved for JS, please start with js_, for example: js_hide, js_show.

5. Class and id naming: big frame names such as header/footer/wrapper/left/right are uniformly named by I in 2. Other style names are in lowercase English &; Numbers &; To combine names, such as i_comment, fontred, width200. Avoid using hanyu pinyin and try to use simple word combinations. In short, naming should be semantic and concise.

6. avoid naming the class and id (this is very important, please communicate with me in time if you don't understand): a) avoid it through subordinate writing, see d for examples. B) Take the parent element id/ class naming part for naming. See D for an example. C) For names with high reuse rate, please start with your own code and underline it, such as i_clear. D)a and B are applicable to framed pages in 2. For example, if you want to add a new div element to the frame page code in 2, you should follow the naming rules: ..., style writing: # # #mainnav.firstnav{.......} and follow the naming rules of B: ..., style writing: ... main _ firstnav { .........

7. The writing order of 7.css attributes is suggested to follow: layout positioning attributes->; Self-attribute->; Text attribute->; Other attributes. This article can be written according to your own habits, but try to ensure that the attributes are similar to each other. Attribute enumeration: Layout positioning attributes mainly include: display &; List & amp position (corresponding to up, right, down and left)&; Floating & clearing & visibility and. Overflow;

Its own attributes mainly include: width &; Height and weight. Profit and profit. Fill the& boundary and. Background.

Text attributes mainly include: color &; Fonts and fonts. Text-decoration and advertisement. Text alignment. Vertical alignment. Blank &

Other and content.

8. Before writing code, improve the reuse rate of styles.

That's what Bian Xiao shared with you today about the css specification of Web front-end development specification. I hope this article can be helpful to friends who are engaged in Web front-end work. If you want to know more about the Web front-end, remember to pay attention to the training of Jade Bird Web in official website and Peking University. Finally, I wish my friends success in their work and become an excellent Web front-end engineer.