Css specifications and css naming rules

Css specifications and css naming rules

1. File
[Recommended] CSS files are encoded using a UTF-8 without BOM.
Explanation:
UTF-8 coding has wider adaptability. BOM (byte order mark) may cause unnecessary interference when processing files using programs or tools.
Extension:
Http://www.zhihu.com/question/20167122

 

2. indent
[Force] four spaces are used as an indent level. Two spaces or tab characters are not allowed.
Example:

.selector {    margin: 0;    padding: 0;}

 

3. Space
[Mandatory] the selector and {must contain spaces.
Example:

.selector {}

[Mandatory] spaces cannot be contained between attribute names and attributes: and must be spaces between attribute names and attributes.
Example:

margin: 0;

When a list attribute value is written in a single row, it must be followed by a space.
Example:

font-family: Arial, sans-serif;　

 

4. Line Length
[Mandatory] each line must not exceed 120 characters, unless a single line is inseparable.
Explanation:
A common case is that the URL is too long.

[Suggestion] for ultra-long Styles, it is recommended to group them by logic when there is a space in the style value or when a line breaks.
Example:

/* Different attribute values are grouped by logic */background: transparent url (aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0;/* attributes that can be repeated multiple times, each repeat a row */background-image: url (aVeryVeryVeryLongUrlIsPlacedHere) url (anotherveryverylongurlisplacedhere);/* function-like attribute values can be indented based on function calls */background-image:-webkit-gradient (linear, left bottom, left top, color-stop (0.04, rgb (124, 0.52), color-stop (115,123,162, rgb )));

 

5. Selector
[Mandatory] when a rule contains multiple selectors, each selector declaration must have an exclusive row.
Example:

/* good */.post,.page,.comment {    line-height: 1.5;}/* bad */.post, .page, .comment {    line-height: 1.5;}

[Mandatory]>, + ,~ Each side of the selector contains a space.
Example:

/* good */main > nav {    padding: 10px;}label + input {    margin-left: 5px;}input:checked ~ button {    background-color: #69C;}/* bad */main>nav {    padding: 10px;}label+input {    margin-left: 5px;}input:checked~button {    background-color: #69C;}

[Mandatory] values in the attribute selector must be enclosed by double quotation marks.
Explanation:
Single quotes and quotation marks are not allowed.
Example:

/* good */article[character="juliet"] {    voice-family: "Vivien Leigh", victoria, female}/* bad */article[character='juliet'] {    voice-family: "Vivien Leigh", victoria, female}

 

6. Attributes
[Mandatory] the attribute definition must start with another line.
Example:

/* good */.selector {    margin: 0;    padding: 0;}/* bad */.selector { margin: 0; padding: 0; }

[Mandatory] attributes must end with a semicolon.
Example:

/* good */.selector {    margin: 0;}/* bad */.selector {    margin: 0}

 

7. Selector
[Mandatory] do not add a type selector for the id or class selector if necessary.
Explanation:
Both Performance and maintainability have certain impacts.
Example:

/* good */#error,.danger-message {    font-color: #c00;}/* bad */dialog#error,p.danger-message {    font-color: #c00;}

[Suggestion] the nesting level of the selector should be no greater than 3, and the restriction conditions behind the position should be as accurate as possible.
Example:

/* good */#username input {}.comment .avatar {}/* bad */.page .header .login #username input {}.comment div * {}

 

8. Abbreviations
[Suggestion] If you can use the abbreviation, try to use the abbreviation.
Example:

/* good */.post {    font: 12px/1.5 arial, sans-serif;}/* bad */.post {    font-family: arial, sans-serif;    font-size: 12px;    line-height: 1.5;}

[Suggestion] when using abbreviations such as border, margin, and padding, pay attention to the influence of the implicit value on the actual value and use the abbreviation only when setting values in multiple directions.
Explanation:
Abbreviations such as border, margin, and padding set the values of multiple attributes at the same time to easily overwrite those that do not need to be overwritten. If you need to inherit other declared values in some directions, you should set them separately.
Example:

/* centering <article class="page"> horizontally and highlight featured ones */article {    margin: 5px;    border: 1px solid #999;}/* good */.page {    margin-right: auto;    margin-left: auto;}.featured {    border-color: #69c;}/* bad */.page {    margin: 5px auto; /* introducing redundancy */}.featured {    border: 1px solid #69c; /* introducing redundancy */}　

 

9. Attribute writing Sequence
[Suggestion] attributes under the same rule set should be grouped by function when writing, and formatted Model (layout mode and position)> Box Model (size)> typographic (text-related)> Visual (Visual effect) sequential writing to improve code readability.
Explanation:
Formatting Model attributes include position/top/right/bottom/left/float/display/overflow.
Box Model attributes include border, margin, padding, width, and height.
Typographic attributes include: font/line-height/text-align/word-wrap.
Visual attributes include: background/color/transition/list-style.
In addition, if the content attribute is included, it should be placed at the beginning.
Example:

.sidebar {/* formatting model: positioning schemes / offsets / z-indexes / display / ... */    position: absolute;    top: 50px;    left: 0;    overflow-x: hidden;/* box model: sizes / margins / paddings / borders / ... */    width: 200px;    padding: 5px;    border: 1px solid #ddd;/* typographic: font / aligns / text styles / ... */    font-size: 14px;    line-height: 20px;/* visual: colors / shadows / gradients / ... */    background: #f5f5f5;    color: #333;    -webkit-transition: color 1s;       -moz-transition: color 1s;            transition: color 1s;}                　

 

10. Clear floating
[Suggestion] When an element needs to hold up its height to include an internal floating element, clearfix is implemented by setting clear for the pseudo class or triggering BFC. Try not to add null labels.
Explanation:
There are many methods to trigger BFC. Common methods include:
Float non-none
Position is not static
Overflow non-visible
If you want to clear the Floating Method with less side effects, refer to A new micro clearfix hack.
Note that clearfix is not required for elements that have triggered BFC.

 

11 .! Important
[Recommended] Try not to use it! Important Declaration.

[Suggestion] When You Need To forcibly specify a style and do not allow any scenario to overwrite it, use tag inner join! Important defines the style.
Explanation:
It must be noted that inline is used only when the design does not allow any other scenario to overwrite the style! Important style.

 

12. z-index
[Suggestion] layer the z-index to manage the visual hierarchical relationships of absolute positioning elements outside the document flow.
Explanation:
Multiple Elements of the same layer, such as multiple Dialog triggered by user input, use the same z-index or incrementing z-index at this level.
We recommend that each layer contain 100 z-indexes to accommodate enough elements. If there are many elements in each layer, You can adjust this value.

[Suggestion] In a controllable environment, it is recommended that the z-index be set to 999999 for the element to be displayed on the top.
Explanation:
Two controllable environments are available: one is the product line environment; the other is that the environment may be referenced by other product lines, but not by external third-party products.
It is not recommended that the value be 2147483647. In this way, when your product line is referenced by other product lines, when there is a hierarchical coverage conflict, you can leave room for upward adjustments.

[Suggestion] in a third-party environment, elements that are expected to be displayed on the top are joined and added through tags! Important: set z-index to 2147483647.

/* Z-index attribute, used to define the position: relative; or position: absolute ;". position: the maximum value of the Z-index is 2147483647, except that the maximum value of the Z-index in Safari 3 is 16777271. */

Explanation:
Third-party environments are totally uncontrollable for developers. In a third-party environment, this method is required to ensure that elements are not covered by other style definitions on the page.

 

13. Text
[Mandatory] text content must be enclosed by double quotation marks.
Explanation:
The content of the text type may be in the selector, attribute value, and other content.
Example:

/* good */html[lang|="zh"] q:before {    font-family: "Microsoft YaHei", sans-serif;    content: "“";}html[lang|="zh"] q:after {    font-family: "Microsoft YaHei", sans-serif;    content: "”";}/* bad */html[lang|=zh] q:before {    font-family: 'Microsoft YaHei', sans-serif;    content: '“';}html[lang|=zh] q:after {    font-family: "Microsoft YaHei", sans-serif;    content: "”";}　

 

14. Numeric Value
[Mandatory] When the value is a decimal point between 0 and 1, the value 0 of the integer part is omitted.
Example:

/* good */panel {    opacity: .8}/* bad */panel {    opacity: 0.8}

 

15. url ()
The path in the [force] url () function is not enclosed by quotation marks.
Example:

body {    background: url(bg.png);}　

[Suggestion] the absolute path in the url () function can save the protocol name.
Example:

body {    background: url(//baidu.com/img/bg.png) no-repeat 0 0;}

 

16. Length
The Unit must be omitted if the [mandatory] length is 0. (Only the unit of length can be saved)
Example:

/* good */body {    padding: 0 5px;}/* bad */body {    padding: 0px 5px;}

 

17. Color
[Mandatory] the RGB color value must be in hexadecimal notation # rrggbb. Rgb () is not allowed ().
Explanation:
Rgba () can be used for color information with alpha (). When rgba () is used, each comma must be followed by a space.
Example:

/* good */.success {    box-shadow: 0 0 2px rgba(0, 128, 0, .3);    border-color: #008000;}/* bad */.success {    box-shadow: 0 0 2px rgba(0,128,0,.3);    border-color: rgb(0, 128, 0);}

[Mandatory] When a color value can be abbreviated, it must be abbreviated.
Example:

/* good */.success {    background-color: #aca;}/* bad */.success {    background-color: #aaccaa;}

[Force] The color value cannot use the named color value.
Example:

/* good */.success {    color: #90ee90;}/* bad */.success {    color: lightgreen;}

[Suggestion] English characters in the color value must be in lower case. Make sure that the same project is case-insensitive.
Example:

/* good */.success {    background-color: #aca;    color: #90ee90;}/* good */.success {    background-color: #ACA;    color: #90EE90;}/* bad */.success {    background-color: #ACA;    color: #90ee90;}

 

18.2D location
[Mandatory] positions in both the horizontal and vertical directions must be given.
Explanation:
The initial value of the 2D position is 0%, but when there is only one direction value, the value in the other direction will be resolved to the center. To avoid understanding problems, we should give two values at the same time.
Example:

/* good */body {    background-position: center top; /* 50% 0% */}/* bad */body {    background-position: top; /* 50% 0% */}

 

19. Font
[Mandatory] The font family Name in the font-Family attribute should use the English family Name of the font. If there is a space, it must be placed in quotation marks.
Explanation:
The so-called English Family Name is a metadata of the font file. The common names are as follows:

Font OS Family Name (Windows) Windows SimSun () windows SimHei Windows Microsoft YaHei Windows Microsoft JhengHei 文 Mac/iOS STHeiti Mac/iOS Hiragino Sans GB 文 Linux WenQuanYi Zen Hei 文quanyi micron black Linux WenQuanYi Micro hei

Example:

h1 {    font-family: "Microsoft YaHei";}

[Mandatory] For font-family, press "front and back of Chinese fonts in Spanish" and "Excellent Effect" (high quality/better suited to requirements) the general font family (serif/sans-serif) must be specified ).
Explanation:
For more information, see http://www.zhihu.com/question/19911793/answer/13329819.
Example:

/* Display according to platform */.article {    font-family: Arial, sans-serif;}/* Specific for most platforms */h1 {    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;}

[Mandatory] font-family is case-insensitive, but in the same project, the same Family Name must be case-insensitive.
Example:

/* good */body {    font-family: Arial, sans-serif;}h1 {    font-family: Arial, "Microsoft YaHei", sans-serif;}/* bad */body {    font-family: arial, sans-serif;}h1 {    font-family: Arial, "Microsoft YaHei", sans-serif;}

 

20. font size
[Mandatory] The Chinese content to be displayed on the Windows platform. The font size should be no less than 12px.
Explanation:
Because of the font rendering mechanism of Windows, text smaller than 12 PX has very poor display effect and is hard to recognize.

 

21. Font Style
[Suggestion] Do not use font-style other than normal if you want to display Chinese content on Windows. Other platforms should also be used with caution.
Explanation:
Because the Chinese font is not implemented in italic style, all browsers will implement fallback to obilique (automatically fit into italic style ), A small font size (especially when a dot matrix font is used in a small font size in Windows) has poor display effect, making reading difficult.

 

22. Word weight
[Mandatory] The font-weight attribute must be described in numerical mode.
Explanation:
CSS has nine characters ranging from 100 to 900. However, due to the font quality and browser restrictions, CSS supports both 400 and 700 files, which are equivalent to the keywords normal and bold.
The browser uses a series of heuristic rules for matching. When <700, the font Regular character weight is generally matched, and> = 700, the Bold character weight is matched.
But there are already browsers starting to support = 600 match Semibold word weight (see the http://justineo.github.io/slideshows/font/#/3/15), so the use of Numerical Description increased flexibility, but also shorter.
Example:

/* good */h1 {    font-weight: 700;}/* bad */h1 {    font-weight: bold;}

 

23. Row Height
[Suggestion] line-height should use numeric values when defining text paragraphs.
Explanation:
When line-height is set to a value, the browser recalculates the value based on the font-size set for the current element. In text section combinations with different font sizes, you can achieve a more comfortable inter-line interval effect, avoiding the need to set line-height for each font-size setting.
When line-height is used to control the vertical residence, it should be set to the same height as the container.
Example:

.container {    line-height: 1.5;}

 

24. Transform and animation
[Force] when using transition, specify transition-property.
Example:

/* good */.box {    transition: color 1s, border-color 1s;}/* bad */.box {    transition: all 1s;}

[Suggestion] add transition and animation on the attributes that can be efficiently implemented by the browser as much as possible.
Explanation:
For details, see region:
Transform: translate (npx, npx );
Transform: scale (n );
Transform: rotate (ndeg );
Opacity: 0 .. 1;
Typically, you can use translate to replace left as an animation attribute.
Example:

/* good */.box {    transition: transform 1s;}.box:hover {    transform: translate(20px); /* move right for 20px */}/* bad */.box {    left: 0;    transition: left 1s;}.box:hover {    left: 20px; /* move right for 20px */}

 

25. Responsive
[Mandatory] Media Query cannot be separately organized and must be defined with relevant rules.
Example:

/* Good *//* header styles */@media (...) {/* header styles */}/* main styles */@media (...) {/* main styles */}/* footer styles */@media (...) {/* footer styles */}/* Bad *//* header styles *//* main styles *//* footer styles */@media (...) {/* header styles *//* main styles *//* footer styles */}

[Mandatory] If Media Query has multiple conditions separated by commas, each condition should be placed in a separate row.
Example:

@media(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */(min-resolution: 2dppx), /* The standard way */(min-resolution: 192dpi) { /* dppx fallback *//* Retina-specific stuff here */}

[Recommended] Try to provide a better style for high-resolution devices (Retina.

 

26. Attribute prefix
[Force] attributes with a private prefix are arranged from long to short and aligned by the colon.
Explanation:
Standard attributes are placed at the end, aligned by colon for easy reading, and multi-row editing in the editor.
Example:

.box {    -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;            box-sizing: border-box;}　

 

27. Hack
[Suggestion] If you need to add hack, consider whether other methods can be used.
Explanation:
If you can use a reasonable HTML structure or other CSS definitions to achieve the desired style, you should not use hack to solve the problem. Generally, hack will increase the maintenance cost.

[Recommended] use the selector hack instead of the attribute hack to handle compatibility.
Explanation:
Use selector hack that complies with the CSS syntax as much as possible to avoid the issue that some third-party libraries cannot identify the hack syntax.
Example:

/* IE 7 */*:first-child + html #header {    margin-top: 3px;    padding: 5px;}/* IE 6 */* html #header {    margin-top: 5px;    padding: 4px;}

[Suggestion] Try to use the simple attribute hack.
Example:

.box {_display: inline; /* fix double margin */    float: left;    margin-left: 20px;}.container {    overflow: hidden;    *zoom: 1; /* triggering hasLayout */}

　　

28. Expression
[Force] 'expression' is not allowed.