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 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 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.
Edit in GitHub
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.