The prefix naming 1.css ---: ad-time box-hb-- such relatively high degree of recognition extended
2. Hanging plurality class-- new class or multi-purpose compositions , less inheritance
3. If the module vertical uncertainty margin is particularly stable, it is best not to write in the class module, but the use of a combination of class, a separate class for the atoms linked to the upper and lower margins margin.
Module is best not to mix margin-top and margin-bottom, consistent use of margin-top or margin-bottom
4.css style is set when stacked --- provided conflicting style different selectors, will use high weight selector setting style. (Html tag heavy weight is 1, class a weight of 10, id a weight of 100)
If css selectors weight the same, then the style will follow the principle of proximity, which selectors last definition, which uses the style selector.
In order to ensure easy pattern is covered, improve maintainability, css selectors Xu weights as low as possible to ensure
5.css -----sprite
Highlight achieve with two maps - not to load a picture will be sent a request
Merging a large map, using the background of FIG achieve highlighting movement - -background-position : 0 -31px;
Cons: positioned by background-position - accurate measurement of coordinates, is not conducive to the maintenance
6. The recommended line style css coding style
7. the above mentioned id and class
- the same page , the same id can only occur once, it can not be repeated, and the class can appear any number of times;
--id weight of css selector 100, weight selector class and a weight of 10;
- Native js provide the getElementById () method supports the id corresponding to the associated HTMLLIElement, but does not support class;
8. CSS-hack (address compatibility issues)
IE conditional comments made - <-! [If IE]> <linck type = "..." /> <[endif] -!> IE only apply
<-! [If gt IE 6]> above effect only in IE6 <[endid]!>
Also in - parcel label style, script tags. .
Method selector prefix hack
Style attribute prefix hack law
9 .-- solve the problem after a hyperlink to access hover style does not appear
hover the mouse pointer selector for selecting float above.
Tip :: hover selector can be used for all elements, not just links.
Tip: : Link selectors to style the link to the page is not accessible, : visited selectors have been used to link the set point to visit the page, : the Active selector for active links.
Note: CSS definition,: hover must be located: link and: after visited (if any), so the style to take effect.