CSS Specification
Indent inUse tab indent (equivalent to four spaces)A space must be included between the selector and {, parameter 1 property name and after: not allowed to include spaces,: A space must be included with the attribute value. Example a list property value must be followed by a space when it is in a single line. Example: For extra-long styles, it is recommended to logically group the styles where they are worth space or after wrapping. Cases:
Selector SelectorWhen a collection is selected and there are more than one selector, it is recommended that the declaration be written separately on one line (for maintenance) example >, +,-selector each side of a space example the value in the property selector must be enclosed in double quotation marks to define the same class of write on the same line (parameter-1) example
The property definition must be terminated with a semicolon (especially the last one) if it is not necessary to qualify for the ID, class selector to add a type selector. Description: In performance and maintenance, have a certain impact example 1. Use classes instead of common element tags to optimize rendering performance. (line No. 891 and 895) 2. It is recommended that the nesting level of the selector should be no greater than 3 levels and that the position should be as accurate as possible. (reference 1) 3. Avoid using some property selectors in frequently occurring components (for example, [class^= ...]). Browser performance is affected by these conditions. 4. Using the descendant selector only if necessary The example attribute shorthand for the above 1 and 2 is abbreviated in cases where abbreviations are possible. If you need to override attributes, avoid unnecessary attribute abbreviations as much as possible. Examples should avoid the following: Margin:3px 5px; margin-left:8px; attribute writing order (parameter 1, parameter 2ctrl+f: declaration order)
- Formatting Model related properties include: Position/top/right/bottom/left/float/display/overflow, etc.
- Box Model related properties include: Border/margin/padding/width/height, etc.
- Typographic related properties include: Font/line-height/text-align/word-wrap, etc.
- Visual related properties include: Background/color/transition/list-style, etc.
Clear Floating!important try not to use!important in a third-party environment (such as defining a module, using an online text editor in the module, you can try to use the modified attribute definition) Z-index is not used for the time being too complex, when the attribute is used to annotate
Values and units
value (reference 1)when a decimal between 0 and 1 is omitted, does the integer part of the 0 omit? Example: opacity:. 8; But there is no reason to omit the first 0 of the decimal point, so this is a temporary or 0.
URL ()The path in the URL () is not quoted as an example: Background:url (bg.png); Examples of protocols that can be omitted without absolute paths: Background:url (//baidu.com/img/bg.png); The meaning is HTTP//protocol, some data said in IE will request two times
lengthOmitting the zero unit padding:0 8px;
ColorRGB color values
must beUse the 16 binary marker symbol #rrggbb. The color information value with alpha (transparent) uses RGBA (). You can use abbreviations when using abbreviations to not allow color names, RGB () to ensure that the 16-binary notation is uniform in capitalization. (Recommended capitalization)
2D Position (background-position)You must give the value of the background-position in two directions. Because the default is 0% 0%, but gives only one direction value, the other side defaults to the Center property value.
textThe font-family attribute should use the English example: font-family: "Microfoft Yahei"; Font-size attribute must not be less than 12px reason: The Windows text display effect is poor, difficult to recognize the Font-weight attribute value is represented by the number. (100~900) actually only 400 and 7,002 files are equal to normal and bold respectively. There are already browsers that support 600 property values. (Reference 1: Font ramble) Line-height should use relative values because they are calculated based on the font-size value.
other
Property PrefixesThe compatibility notation property consists of a long to short colon to it. Example
Front End Specification 2-CSS specification
