Skip to content

Files

Latest commit

 

History

History
55 lines (54 loc) · 2.44 KB

BESTPRACTICES.md

File metadata and controls

55 lines (54 loc) · 2.44 KB

SASS/CSS Coding Best Practices

  • 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
  • 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
    • Use @include or @mixin instead of @extend
      • @extend has unintended consequences and usually best to avoid
  • 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
    • 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
      1. variables
      2. @extend directives
      3. @include directives
      4. declaration list (property: name;)
      5. media queries
      6. pseudo-states (:checked, :target, etc.) and pseudo-elements (::after, ::selection, etc.)
      7. nested elements
      8. nested classes Can deviate from example below but try to be consistent throughout for readability
  • 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'