css - performance

Rules for a performant CSS code

CSS is interpreted from right to left.
Performance degrades from ID to Class to Universal selectors.

To achieve better performance, I compiled following key points from various sources(links are available in reference section)

Rule 1. Remove universal selectors

  * { /**style instructions here*/ } /**bad*/
  .style-instruction{ /**style instructions here*/ }/**good*/

  * [lang^=en]{color:green;} /**bad*/
  .lang-en{ color:green; }/**good/better*/

  * .warning {color:red;}/**bad*/
  .warning {color:red;}/**good*/

  * #maincontent {border: 1px solid blue;}/**bad*/
  #maincontent {border: 1px solid blue;}/**best*/

Rule 2. Remove ancestors (descendant selectors)

Evil when "selector" is in the tag/universal category

  html body div tr td{ };/**bad*/
  td{ };/**good replacement**/

  html body ul li a {  }; /**bad*/
  a { };/**good replacement*/

  #ul-li > li{ }; /**lazy but*/ 
  #ul-li /**isn't lazy*/

Rule 3. "Don't tag, qualify"

Remove un-necessarly tag identifiers

    ul#navigation, ul.main{};/**not good */ 
    #navigation,.main{}/**good */

    ul#some-id{ }/**not good*/
    #some-id{ } /**good - ID is unique on a page*/

Rule 4. Reduce or remove unqualified selectors

    [class^='some-class-']{ };

Rule 5. Reduce or remove CSS class chaining

    .small.private.icon{ }; 
    .small-private-icon{ };/**replaced the previous*/

Rule 6. Remove or Reduce un-necessary/un-used html tags
- reduce the number of DIVs ( remove all clear-fix divs)

Rule 7. Order of importance while chaining ( webkit bug ??? )

  .foo.bar{ } /**indexed in m_classRules, under the key .foo*/
  .bar.foo{ } /**indexed in m_classRules, under .bar*/

  input[type=text].error{ } /**indexed in m_tagRules*/
  input.error[type=text]{ } /**indexed in m_classRules*/

  .bar#foo{ } /**indexed in m_classRules*/
  #bar.foo{ } /**index in m_idRules*/

Rule 8. Write less, get more (use csslint.net or equivalent )

  • group "redundant properties" into mixin/extend
  • remove or group repeated "many/same" font and font-sizes
  • by extension background properties, borders, size, etc

Rule 9. Tighten code

  • "mixin" repeatable modular styles
  • OR "extend" repeatable modular styles

Rule 10. Keep code consistent

Choose one strategy, and stick to it, but have one

  • BEM : Block Element Modifier
  • OOCSS: Object Oriented CSS
  • SMACSS: Scalable and Modular Architecture for CSS

Rule 11. Save on HTTP/Request

  • minify: to save on "size of file"
  • gzip: to save on "size of file"
  • inline the result: to save on "http request number"

Reference

  1. Github's CSS performance
  2. Efficiently rendering CSS
  3. CSS audits taking stock of your code
  4. CSS dig or CSS Dig: It’s Time to Refactor
  5. StyleStats
    An evaluating tool for writing better CSS
  6. To improve the code, read -applicability-
  7. Maintainable CSS with BEM
  8. Grep is a beautiful tool
  9. Flexbox Centering
Show Comments