Styles - acolorbright/handbook GitHub Wiki

See the css repository for more detailed information on our styling guidelines, and linting rules for SCSS.

History

We have used SCSS structured according to the ITCSS methodology but are exploring various forms of CSS-in-JS as well.

SCSS / ITCSS

...

CSS-in-JS

We have tried a few CSS-in-JS solutions, with the following results.

Styletron

• pros:
  • dead css elimination
• cons:
  • having to use context and injectStyle() everywhere is slightly annoying and clutters the code
  • harder to debug, because class names are not human-readable
  • hot-reloading fucks up all styles, so that a hard page reload is necessary most of the time
  • harder to write media queries: queries must not overlap!
  • only supports simple selectors
    • which is good I guess, because it keeps things simple (but sometimes more complex selectors are just handy to have)