Efficient CSS writing

Last weekend, I translated molliza and Google's efficient CSS statement.ArticleAnd I think they have something in common, that is, the CSS parsing engine is parsed from right to left. What we need to do is to reduce CSS.

Engine parsing time, so avoiding inefficient CSS selectors to match a large number of elements can reduce the page loading time. Based on my own CSS coding experience, I will summarize the following:

1) The level selector of CSS should not exceed 3, and be kept within 3

Bad case:. class1 ul Li {}

Good case. Class {}

2) Use as few tag selectors as possible, but they can also be used. For example, when writing a list (UL Li syntax), if you give each Li class, the opposite is not onlyCodeThe Code is also undoubtedly added.

Complexity is difficult to maintain. In short, it is up to you to weigh this point.

3) use some representative words. For example, during modular development, I usually use mod-xxx. In this module, the css I wrote is included in it, it is very helpful for maintenance, and the code is also very beautiful,

Contains no more than three layers. You don't have to worry too much about the same name.

4) do not add any delimiters before the ID, including class tags or other delimiters.

Bad case:. class # ID {} Div # ID {} are not recommended.

Good case: # ID {} recommended

5) do not use the label qualifier before the class. Unless you want to define multiple classes for different labels, this is the only option.

Bad case: div. Class {}

Good case:. Class {}

In addition: div. Class {} span. Class ..

6) use class to replace hierarchical relationships. If you find that you need to write many hierarchical relationships to express the meaning, give up. Simply write a class to replace this solution. For example

Bad case: # ID. class1 ul Li {}

Good case. class2 {}

Add the class2 directly to the tag.

Thank you. Thank you.