- No inline-styling in the HTML
- Readability
- Having a style in SCSS sheet with keep with single responsibility
- High level of specificity
- can unintentionally overwrite other styles
- Easier to work with in console
- Aren't reusable
- Use a BEM class with a modifier instead
- Readability
- Airbnb https://github.com/airbnb/css
- Comments
- Code that isn't self-documenting:
- _Uses of z-_index
- Compatibility or browser-specific hacks
- Write on their own line
- Code that isn't self-documenting:
- Use @include or @mixin instead of @extend
- @extend has unintended consequences and usually best to avoid
- Comments
- 18F https://engineering.18f.gov/css/
- Avoid using IDs for styling
- This prevents target confusion and allows CSS devs and JS devs to co-exist in the same code in peace.
- Easier to work with in console
- IDs aren't reusable
- Unnecessarily high level of specificity
- Avoid nesting more than 3 levels
- Overly dependent on HTML structure
- Not reusable
- High level of specificity
- Use !important very sparingly and never to fix problems
- Naming
- Use BEM (also see CSS Tricks)
- No camelCasing
- Name for function not appearance
- Units
- em : use for positioning
- percentages: layouts so components stay relational
- rem: for font sizes with px fall back
- File formatting
- Can deviate from example below but try to be consistent throughout for readability
- variables
- @extend directives
- @include directives
- declaration list (property: name;)
- media queries
- pseudo-states (:checked, :target, etc.) and pseudo-elements (::after, ::selection, etc.)
- nested elements
- nested classes Can deviate from example below but try to be consistent throughout for readability
- Avoid using IDs for styling
- Grid Systems
- Do not nest containers
- Containers are meant to be parent of grid system so should only be added to the body once. Everything else should be done with rows and columns (grid-row, grid-col)
- Rows should be direct parent elements of columns
- Put grid rows and columns before child components in templates
- Won't interrupt grid row/column relationship with child component
- Easier to reuse components since they won'
- Put grid rows and columns before child components in templates
- Do not nest containers