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
mail@stevekwan.com
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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!