Principles we use to write CSS for modern browsers

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 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

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

which plugin do you prefer for css variables?

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

@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.

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

@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 :)

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. :)

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

@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.

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

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

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