Skip to content

Instantly share code, notes, and snippets.

Last active April 14, 2024 00:32
Show Gist options
  • Save alekseykulikov/68a5d6ddae569f6d0456b0e9d603e892 to your computer and use it in GitHub Desktop.
Save alekseykulikov/68a5d6ddae569f6d0456b0e9d603e892 to your computer and use it in GitHub Desktop.
Principles we use to write CSS for modern browsers

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

Copy link

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?

Copy link

which plugin do you prefer for css variables?

Copy link

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

Copy link

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.

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

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.

Copy link

IgorGee commented Sep 23, 2016

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

Copy link

lavezzi1 commented Oct 3, 2016

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

Copy link

@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