- Use alphabetical order for declarations.
- Place Place
@includesat at the top of your declaration list.
- Place media queries directly after the declaration list.
- Place concatenated selectors second.
- Place pseudo-states and pseudo-elements third.
- Place nested selectors last.elements fourth
- Place nested classes fifth
- Don't use ID's for style
- Avoid over-qualified selectors:
div > .page-title
- Use meaningful names:
- Be consistent about naming conventions for classes
- Use ID and class names that are as short as possible but as long as necessary.
- Avoid using the direct descendant selector
>.Avoid nesting more than 4 3 selectors deep.
- Don't nest more than 6 selectors deep.
- Use HTML tags on vague classes that need a qualifier like
- Avoid using the HTML tag in the class name:
- Avoid using HTML tags on classes for generic markup
- Avoid using comma delimited selectors
- Avoid nesting within a media query
- Avoid over-qualifying selectors with HTML elements:
- Avoid using HTML tags on classes with specific class names like
- Avoid using comma delimited selectors.
- Avoid nesting within a media query.
- Prefer compound property statements (e.g.
- Don't concatenate selectors using Sass's parent selector (
- Use Normalize for browser rendering consistency, rather than a bespoke reset
- Use HTML structure for ordering of selectors. Don't just put styles at the bottom of the Sass file
- Avoid having files longer than 100 lines
- Based on Thoughtbot's style guide (version on 16 April 2014Version on 26 May 2017).