Efficient CSS writing and CSS writing

Efficient CSS writing and CSS writing

I. High Efficiency is CSS.

①: Use the external style to replace the line style or embedded style.

Inline style is not recommended: <style> </style>

Embedded styles are not recommended: <p> </style>

We recommend that you use external style sheets: <link rel = "stylesheet" href = "style.css" type = "text/css"/>

③ Use inheritance: Assign the style used by the child element to the parent element.

④ Use multiple selector: Write the style used by elements together. For example, the same parts of h1, h2, h3, and h4 are written together. Do not write them into four independent parts.

⑤: Use multiple declarations. Do not write them together like the following.

P {margin: 0 0 1em ;}
P {background: # ddd ;}
P {color: #666 ;}

6: Use the note attribute. Margin: 10px 10px;

7. Avoid using it! Important, which can be used to increase the weight level in specific situations.

Ii. Maintenance

①: Add a comment block at the beginning of the style sheet to describe the creation date, creator, tag, and other remarks of the style sheet.

②: Including common color labels

/*
---------------------------------
COLORS
Body background: # def455
Container background: # fff
Main Text: #333.
Links: # 00600f
Visited links: #098761
Hover links: # aaf433
H1, H2, H3: #960
H4, H5, H6: #000
---------------------------------
*/

③: Give meaningful names to IDS and classes.

④: Integrate associated style rules

# Header {...}
# Header h1 {...}
# Header h1 img {...}
# Header form {...}
# Header a # skip {...}
# Navigation {...}
# Navigation ul {...}
# Navigation ul li {...}
# Navigation ul li {...}
# Navigation ul li a: hover {...}
# Content {...}
# Content h2 {...}
# Content p {...}
# Content ul {...}
# Content ul li {...}
⑤: Add clear comments to the style
3. Managing CSS files on the entire site

①: Componentized CSS

②: Use Condition annotations in specific situations

<! --[If IE]>
<! -- [If IE 5]>
<! --[If IE 6]>
<! --[If lt IE 6]>
<! --[If lte IE 6]>
<! --[If gt IE 6]>
<! --[If gte IE 6]>