Skip to content

Instantly share code, notes, and snippets.

@joemocha

joemocha/index.md

Forked from alekseykulikov/index.md
Created September 22, 2016 13:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joemocha/c3a44b4f00beb8a97ebd01d4edfb666f to your computer and use it in GitHub Desktop.
Save joemocha/c3a44b4f00beb8a97ebd01d4edfb666f to your computer and use it in GitHub Desktop.
Download ZIP
SUIT CSS naming convention for React.js application
Raw
index.md

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 6561 lines of CSS (and just 5 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

  • SUIT CSS naming conventions + SUIT CSS design principles;
  • PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
  • Flexbox is awesome. No need for grid framework;
  • No DRY. It does not scale with CSS, just focus on better components;
  • Normalize.css, base styles and variables are solid foundation for all components;

Please ⭐ this gist if you'd like to support me and hear this ⚡ talk on Reactiveconf 2016 in Bratislava.

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