refactoring_documentation.md

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 { }