CSS Optimization Tips

CSS optimization is the process of minimizing your markup and CSS files for maximum speed.

To optimize your CSS group external files to minimize HTTP requests, remove whitespace, and use shorthand properties. Group common declarations, selectors, and CSS code in multiple classes to save space. Use the simplest selectors you can, high in the document tree and let them cascade. Be as vague and as abstract as possible in your CSS selectors.

  • Embed or SSI abbreviated styles for maximum speed.
  • Minimize HTTP requests by grouping external CSS files.
  • Link to external style sheets site-wide to cache in.
  • Layer style sheets for speed. Use cascading to combine linked, alternate, and imported style sheets to layer your presentation for older browsers and alternate media (print), and to save bandwidth.
  • Group selectors with the same declarations and declarations with the same selectors.
  • Use simple selectors high in the document tree to set global and element-wide styles (that is, type styles like body, h1, p, and dt).
  • Use descendant selectors to get specific without class or id selectors.
  • Take advantage of your inheritance – don’t overspecify CSS; let it flow down the document tree.
  • Use multiple classes to group common style declarations to save space.
  • Use value replication on the border, padding, and margin properties.
  • Use shorthand hex colors (such as #00f).
  • Use shorthand properties to optimize your CSS (including font, background, margin, and border).
  • Use short class and id names.
  • Use shorthand hexadecimal colors or names, whichever is shorter.
  • Use relative lengths for maximum flexibility.
  • Remove whitespace.
  • Cut the comments.

You may also like...