Best Practices to optimize CSS – an academic exercise

Premature optimization is NOT the root of all evil – Lack of proper planning is the root of all evil

Many of the tips in this article are tiny micro-optimizations, one thing to keep in mind when going overboard with optimizing. You should never sacrifice maintainability or extensibility for optimization experiments. Consider this article more like an academic exercise rather than real-life optimization tips.

It should also be noted that if you need to speed up your web site, don’t bother with CSS optimization. There are much better places to focus your attention to. The point of this and all optimization articles is to consider an optimization in context, not in isolation.

Planning

• Understand inheritance, don’t overspecify CSS, you should let it flow down the document tree.
• Learn to exploit the cascading nature of CSS.
• Understand specificity. It’s important to understand the different levels of importance the specificity rules provide. Writing the same level of css rules will lead to style conflicts and code redundancy.
• Only load browser hacks if needed.
• Separate styles for different media types, use inheritance to your advance with @media all { ... }.
• 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 types.
• Prefer custom code above existing frameworks which almost always bring overhead you don’t really need.
• Never use inline styles, ever.

Syntax

• Use shorthand properties and hex color definitions (font, background, list-style, margin, padding, border).
• Use value replication on the border, padding, and margin properties.
• Avoid redeclaring already inherited values.
• You don’t need a semicolon after the last property.
• If you declare a unit of 0 px/em/%/… you can ommit the unit.
• Convert text weights to numbers, use ‘700′ instead of ‘bold’ and ‘400′ instead of ‘normal’.
• Keep containers, properties, selectors and CSS hacks to a minimum.
• Prefer descendant, child and attribute selectors to match elements based on the presence or value of attributes, ie Use descendant selectors to get specific without class or id selectors.
• Use CSS image sprites, smaller fragments of images grouped into one image.
• Use classes in parent elements like ul instead of all li list-items.
• Try to avoid using the universal selector.
• Use CSS3 multi-columns instead of existing grid frameworks.
• The right most part of the selector expression should be as specific as possible.

Debugging

• Validate your styles and analyze the warnings.
• Remove all unused style definitions.
• Combine identical rules/selectors/properties.
• Remove useless values from margin and padding.
• Consolidate wherever possible by grouping selectors with the same declarations and declarations with the same selectors.
• Merge similar classes.
• Avoid unnecessary complex CSS selectors – descendant selectors in particular – which require more CPU power to do selector matching.
• Don’t repeat yourself, try to keep your CSS styles DRY.

Deployment

• Remove everything that’s not needed (just for the production version on the live site, keep maintainable, fully documented un-merged version for development).
• Compress/minify everything.
• Minimize HTTP requests by merging all CSS files into one single file.
• Use PHP or a server-side module included in Apache: mod_gzip to gzip and optimize CSS Files. Gzip compression works by finding similar strings within a text file, and replacing those strings temporarily to make the overall file size smaller.
• Include external CSS files before external JavaScript files.

Tags: best practices, css, experiment