CSS and Sass Best Practices

Learn the best practices for CSS and Sass.

A. CSS Best Practices

We cover a wide range of practices in our Code Style repository, including one section that is devoted specifically for CSS Best Practices.

Best Practice: CSS Keep your selector specificity as low as possible. If you do not know how, learn to measure specificity.

Best Practice: CSS Write self-documenting selectors.

Best Practice: CSS Choose a class name convention for your classes and keep your code consistent with it. Here are some class name convention guides:

CSM Name Convention Mobify has a name convention approach called CSM.

CSS Methodologies Watch these useful presentations that summarize modern CSS methodologies. These new methodologies solve some old problems that still occur:

B. Sass Best Practices

Some Sass best practices focus on how to author your code responsibly. Because it is so easy to write CSS with Sass, it is also dangerously easy to go too far and to author code that elongates your stylesheet files!

Best Practice: Sass Nest only when necessary, never more than 4 levels deep.

Best Practice: Sass Beware of nested comma separated selectors in multiple layers.

Best Practice: Sass Generally, avoid using the @extend extension. If you cannot avoid@extend`, only extend placeholder classes.

Best Practice: Sass Have a variable name convention.

C. Adaptive.js Sass Best Practices

When you build an Adaptive.js project, there are many CSS and Sass methods that Mobify recommends as good practices.

Mobify's Code Style The practices and methodologies that are particular to an Adaptive.js project are explained in complete detail in Mobify’s Code Style repository.

Edit in GitHub