Write a better CSS

Source: Internet
Author: User

Well-written CSS code can improve the rendering speed of the page. Essentially, a rule does not have the fastest resolution of the engine. The MDN splits the CSS selector into four main categories, as shown below, and the performance is reduced in turn.

    • ID rule

    • Class rules

    • Label rules

    • General rules


Avoid over-restraint
As a general rule, no unnecessary constraints are added.

    1. Bad Ul#someid {..}. menu#otherid{..} Good #someid {...} #otherid {..}


The descendant selector sucks.
Not only is the performance low and the code very fragile, the HTML code and CSS code are badly coupled, the HTML code structure changes, the CSS has to be modified, which is how bad, especially in large companies, writing HTML and CSS is often not the same person.

    1. It sucks. html DIV tr td {...}


Avoid chaining (intersection) selectors
This is similar to overly restrictive situations, and it is wiser to simply create a new CSS class selector.

    1. Oops. Menu.left.icon {..} Okay, Menu-left-icon. {..}


Stick to the KISS principle
Imagine that we have the following DOM:

    1. <ul id= "Navigator" > <li><a href= "#" class= "Twitter" >Twitter</a></li> <li><a H ref= "#" class= "Facebook" >Facebook</a></li> <li><a href= "#" class= "Dribble" >Dribbble< /a></li></ul>

    1. Bad #navigator li a {...} Good #navigator {...} [b] Use compound syntax [/b] to use compound syntax whenever possible.
    2. [code]//bad. SomeClass {padding-top:20px;    padding-bottom:20px;    padding-left:10px;    padding-right:10px;    Background: #000; Background-image:url (..    /imgs/carrot.png);    Background-position:bottom; Background-repeat:repeat-x;}    Okay, SomeClass. {padding:20px 10px 20px 10px; Background: #000 URL (... /imgs/carrot.png) Repeat-x Bottom;}


Avoid unnecessary namespaces

    1. Oops. SomeClass table Tr.otherclass Td.somerule {..} Okay. SomeClass. otherclass td.somerule {..}


avoid unnecessary duplication
Try to combine duplicate rules as much as possible.

Bad. SomeClass {color:red;    Background:blue; font-size:15px;}.    Otherclass {color:red;    Background:blue; font-size:15px;}    Ok. SomeClass,. otherclass {color:red;    Background:blue; font-size:15px;}



streamline rules as much as possible

 

    avoid ambiguous naming conventions
    It is best to use a name that represents semantics. A good CSS class name should describe what it is and not what it looks like.

    Avoid!importants
    in fact, you should also be able to use other high-quality selectors.


    Follow a standard declaration order
    While there are some common ways of arranging CSS property order , here's a popular way I follow.

      1. . SomeClass {/* positioning *//* Display & Box Model *//* Background and typography styles *//* transitions *//* Other */}


    well organized code format
    code readability and ease of maintenance are proportional. Here are the formatting methods I followed.

      1. Oops. Someclass-a,. Someclass-b,. Someclass-c,. someclass-d {...} Ok. Someclass-a,. Someclass-b,. Someclass-c,. someclass-d {...}    Good practice. SomeClass {background-image:linear-gradient (#000, #ccc), Linear-gradient (#ccc, #ddd); box-shadow:2px 2px 2px #000, 1px 4px 1px 1px #ddd inset;}


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.