High-quality CSS
Multi-Purpose Combination when mounting class, less inheritance
If you want to implement the modules shown in, how should we compile CSS?
At first glance, we may write CSS like this:
. Numberl1 { Border : 1px solid # ccc ; Padding : 10px ; Width :200px ;} . Numberl1 Li { Height : 20px ; Line-height : 20px ; Font-size : 12px } . Numberl2 { Border : 1px solid # ccc ; Padding : 10px ;Width : 200px ;} . Numberl2 Li { Height : 20px ; Line-height : 20px ; Font-size : 16px } . Numberl3 { Border : 1px solid # ccc ; Padding :10px ; Width : 200px ;} . Numberl3 Li { Height : 20px ; Line-height : 20px ; Font-size : 12px ; Color : Red }
But it seems redundant, with many duplicates in it.CodeNow programming focuses on object-oriented and code reuse. The author recommends an idea to extract more classes with smaller granularities, and spit out a combination of classes to achieve the above effect. Of course, this will also facilitate future maintainability, on the other hand, it makes the class more single and more elastic, increases the reusability of the class, and improves the development efficiency.
. F12 { Font-size : 12px } . F16 { Font-size : 16px } . Red { Color : Red } . Numberlist { Border :1px solid # ccc ; Padding : 10px ; Width : 200px } . Numberlist Li { Height : 20px ; Line-height : 20px }<Ul class = "numberlist F12"> <li> 11111111111111 </LI> <li> 22222222222222 </LI> </ul> <ul class = "numberlist F16"> <li> 33333333333333 </LI> <li> 44444444444444 </LI> </ul> <ul class = "numberlist F12 red"> <li> 55555555555555 </LI> <li> 66666666666666 </LI> </ul>
Low weight principle to avoid abuse of sub-selectors
The CSS selector has a weight. When the style settings of different selector have a conflict, the style will be set with a higher weight. The weight rules are as follows:
- The HTML Tag weight is 1, for example, Div, P weight is 1, and Div P weight is 2
- The weight of the class is 10. For example, the weight of "Div. footer" is 11.
- The weight of the ID is 100. For example, the weight of "# selecter. Red" is 110.
However, if the weights are the same, how can this problem be solved, as shown in the following figure:
<Style type = "text/CSS"> Span{Font-size:40px}. Test{Color:Red}. Test2{Color:Green}</Style> <SPAN class = "test Test2"> 1234567 </span>
In this case, the style follows the proximity principle. The last selection character is defined and the style of the selected character is used.
In this case, the green font is displayed. It should be emphasized that the "proximity principle" does not refer to the sequence of hanging class names, such as class = "C1 C2" and class = "C2 C1.
CSS Sprite
CSS Sprite is mainly used to merge some background images of a website into a large image, reducing the number of HTTP requests, thus reducing the pressure on the server, and then locating through background-position, for CSS SpriteArticleThere are already many examples in the garden. I won't talk too much here, but I should pay attention to it. It doesn't mean that CSS sprite applies to any website, and CSS sprite has its disadvantages, it will lead to "lower development efficiency" and "more difficult maintenance". For websites with low traffic, there is no need to apply CSS sprite technology!
The above are the notes for this issue. Please wait for the next timeStudy Notes of Web Front-end development practices-CSS-"confluence into river"