best-practices.md

CSS Coding Standards and Best Practices

Introduction:

This is a coding standards and best practices guide for CSS, and to a lesser extent, LESS.

This document focuses on pragmatism, not perfection. It does not focus on writing perfect code, but rather, code that will strike the best balance of value for your time.

In particular, we are focused on writing CSS that:

• does what it's supposed to do
• is easily understood
• is easily maintained.

Anything above and beyond this is considered a nice-to-have, and is not the focus of this document.

This attitude may not be appropriate for open-source projects, but it is definitely appropriate for projects where cost and schedule are key factors.

This is a community-driven document, so please feel free to contribute!

Author:
Steve Kwan
[email protected]
http://www.stevekwan.com/

Originally from my GitHub:
https://github.com/stevekwan/best-practices/

Best Practices We Follow:

This section is a work in progress. I'll eventually add details, explanations and examples to each of the best practices.

Prefer ems to pixels.

Use a CSS preprocessor, preferably LESS.

Apply your stylesheets in "layers," so you can peel them back as needed.

Keep your CSS selectors short.

Your CSS classes should describe the content, not the look.

Decouple your styles from the code behind.

Select using id vs class where appropriate.

Optimize your CSS for fast progressive rendering.

Bad Practices We Avoid:

This section is a work in progress. I'll eventually add details, explanations and examples to each of the best practices.

Selectors that are dependent on the DOM's structure.

Adding tons of classes to your markup for "reuse."

Unscoped styles at the global level.

Monolithic CSS files.

Browser-specific hacks.

Crazy percentage chaining.

@import (unless with a preprocessor that fixes this under the hood)

!important