Skip to content

Instantly share code, notes, and snippets.

@kaseybon
Created March 30, 2016 19:33
Show Gist options
  • Save kaseybon/491ac5719399e9c16c46f11e531236bb to your computer and use it in GitHub Desktop.
Save kaseybon/491ac5719399e9c16c46f11e531236bb to your computer and use it in GitHub Desktop.

Refactoring Stylesheets

To make the stylesheets easier to maintain we will transition away from the current media query breakpoint organization and content based class names. This will be done gradually as we create/modify a feature.

  • When working on an existing feature, refactor the CSS by pulling all current styles from mq breakpoint partials and creating new feature partials.
    • If needed, create "sub-partials"
      • _table.scss
      • _table-striped.scss
  • When creating/renaming classes:
    • Don't delete old class names until it is safe to do so. Leave them in place and include new class names.
    • Avoid content based class names, use functional class names instead.
    • BEM naming methodology:
      • Block component .table { }
      • Modifier .table--striped { }
      • Child element .table__cell { }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment