CSS optimization methods to improve the performance of what?

• Avoid over-constrained
• Avoid descendant selectors
• Avoid chain selectors
• Use compact syntax
• Avoid unnecessary namespace
• Avoid unnecessary duplication
• The best use of semantic representation of names. A good class name should be descriptive rather than what he is like what
• avoid! important, you can choose other selectors
• As much as possible to streamline the rules, you can combine different class of duplicate rules
• Repair parse error
• Avoid multiple class selectors
• Remove empty css rules

• Proper use of display attributes: due to display of certain styles will be invalid combinations, inviting style also affects the volume of analytical performance.

  display: width should not be used after inline, height, margin, padding and float.

  display: should no longer use the float after inline-block.

  display: should no longer use vertical-align the block.

  display: table- should not be used after the margin or float *.

• Do not abuse float: Floating although inevitable, but it is undeniable that many css bug is caused due to the float.

• Do not abuse web fonts

  For Chinese web sites, Web Fonts might seem strange, very popular abroad. web fonts are usually bulky, and some browsers when downloading web fonts will block the page rendering performance injuries.

• Do not declare too many font-size: This is a design-level issue, a well-designed page will not have too many font-size declaration.
• Operator identifier ID used, taking into account the coupling main pattern and a reuse the page is not selected.
• Do not give too much h1 ~ h6 elements define the style
• Full stop uniform definition again heading to the elements, For additional custom styles, use the other selectors instead.
• Unique elements defined h1 ~ h6
• The unit does not require any value 0
• Standardization of various browser prefixes: prefix is ​​usually placed in front of the browser, the standard style property placed at the end, like this:

  .foo{
      -moz-border-radius: 5px;
      border-radius: 5px; 
  }

• Use advanced features such as CSS gradients, specify all the browser prefixes
• Avoid selectors look like regular expressions
• CSS3 adds some similar ~ = other complex attributes, not all browsers support, use it with caution.
• Box model to comply with the rules (Beware of broken box models)

Learn from Denver Coderfei