The path to Web Front-end development and cultivation-a study note on CSS"

Source: Internet
Author: User
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:

    1. The HTML Tag weight is 1, for example, Div, P weight is 1, and Div P weight is 2
    2. The weight of the class is 10. For example, the weight of "Div. footer" is 11.
    3. 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"

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.