Instantly share code, notes, and snippets.

Embed
What would you like to do?

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