Skip to content

Instantly share code, notes, and snippets.

@oliverturner

oliverturner/css-with-react-checklist.md

Forked from DavidWells/css-with-react-checklist.md
Last active April 17, 2017 10:47
Show Gist options
  • Save oliverturner/e8261fa7b6a6073c44b2c7760b96161b to your computer and use it in GitHub Desktop.
Save oliverturner/e8261fa7b6a6073c44b2c7760b96161b to your computer and use it in GitHub Desktop.
Download ZIP
Lots of talk about different CSS solutions for React. This gist attempts to shed light on pros/cons of approaches.
Raw
css-with-react-checklist.md

Here is a checklist of all the things I need my CSS solution to handle.

I can explain any of the points. Leave a comment on the gist or tweet @DavidWells

Challenge: Take your favorite CSS solution and see how the checklist holds up.

  • Has ability Localize classes
  • Has ability to use global classes
  • Has ability to write raw CSS
  • Syntax highlighting and auto completion (beyond a specific editor)
  • can use css4 spec
  • Can use pseudo selectors
  • Can use media queries
  • Can use all:initial
  • Can use CSS vars
  • Can compose and share styles
  • Can use styles across multiple components
  • Can use less/sass/stylus
  • Can nest selectors
  • Can be written by devs and designers (easily)
  • Is not locked into implementation and can be reused
  • Does not use !important tags to achieve styles
  • Can minify CSS
  • Bonus: Can use outside of React

What SC doesn't have but would get from being able to output a separate CSS file

  • Can use postcss plugins
  • Is lock step up to date with latest browser implementation*
  • Can lint CSS
  • Can report on CSS usage and specificity
  • Can programmatically parse for a11y compliance
  • Can programmatically parse to match brand guidelines
  • Can polyfill Flexbox back to ie8

*not without ongoing dev effort: better to defer to Autoprefixer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment