Instantly share code, notes, and snippets.

Embed
What would you like to do?
SUIT CSS naming convention for React.js application

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 7668 lines of CSS (and just 2 !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;
  • Normalize.css, base styles and variables are solid foundation for all components;
  • No DRY. It does not scale with CSS, just focus on better components;

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

Update: video from ReactiveConf 2016

@Pomax

This comment has been minimized.

Pomax commented Sep 22, 2016

Can you explain what you mean with "no DRY"? Does extending a class from another class count fall under that? What else?

@morenoh149

This comment has been minimized.

morenoh149 commented Sep 22, 2016

which plugin do you prefer for css variables?

@jerzygangi

This comment has been minimized.

jerzygangi commented Sep 22, 2016

Shoutout for SMACSS, which is used by PureCSS and many other libraries. @alekseykulikov have you read about it?

@alekseykulikov

This comment has been minimized.

Owner

alekseykulikov commented Sep 22, 2016

@Pomax thanks for your question. According to HN discussion, it seems like a most controversial principle.

In general I like DRY, but when design requirements constantly evolve, early abstractions can fail. For example:

padding: 1rem 2rem;
background: var(--grey);
border-radius: 0.3rem;

may occur many times in different parts of the app. It could be a .container, but usually this 3 lines are fine, especially when they are a part of component, like everything in React. Also SUIT CSS forces to use only one class like MyComponent not grey container MyComponent.

“no DRY” doesn't mean copy/paste hundreds lines of CSS, just don't be obsessive with repeating yourself with CSS, when class names don't leak to other components.

@alekseykulikov

This comment has been minimized.

Owner

alekseykulikov commented Sep 22, 2016

@morenoh149 cssnext, it contains a bunch of useful plugins. One of them is postcss-custom-properties, which is responsible for var() syntax.

@alekseykulikov

This comment has been minimized.

Owner

alekseykulikov commented Sep 22, 2016

@jerzygangi yes, I read SMACSS book, but I prefer BEM, because it is:

  • restrictive (important for css)
  • component oriented (fits React.js)
  • easy to get started (just read BEM 101 and you get main principles)

SUIT CSS is just a flavor of BEM.
For example Google's Material Design Components use BEM :)

@snookca

This comment has been minimized.

snookca commented Sep 22, 2016

SMACSS is actually nearly identical to BEM. (Not intentionally, mind you. I didn't become aware of BEM until after I had written the book.)

SMACSS is restrictive and component oriented. As for easy to get started, well, clearly I have some work to do. :)

@wub

This comment has been minimized.

wub commented Sep 22, 2016

Are we at the point where we can realistically use flexbox? (With polyfills for IE etc. - what's a good one?)

@aeharding

This comment has been minimized.

aeharding commented Sep 23, 2016

@wub For many applications, yes. Just use autoprefixer and use the modern flexbox syntax for automatic support back to ie10.

JS polyfills for <=ie9 support are not worth it, IMO.

The power flexbox gives you (making certain things possible in CSS that were impossible before) should be a large counter argument in your decision to support < ie10.

@IgorGee

This comment has been minimized.

IgorGee commented Sep 23, 2016

Thank you for writing this. It helps lessen the insanity that CSS beginners go through.

@lavezzi1

This comment has been minimized.

lavezzi1 commented Oct 3, 2016

@alekseykulikov do you use global variables or only for each component in components file?

@alekseykulikov

This comment has been minimized.

Owner

alekseykulikov commented Oct 27, 2016

@lavezzi1 I use global variables to define colors and media queries, and local for component specific logic, like sizes and so on.

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