TL;DR
- SASS/SCSS is the dominant framework.
- CSS Modules are probably worth looking into as well.
CSS
Filter:
Show:
- Never heard of it
- Heard of it, not interested
- Heard of it, would like to learn
- Used it before, would not use again
- Used it before, would use again
Although CSS is hardly related to JavaScript, it's becoming more tightly coupled to it thanks to the popularity of client-side JavaScript frameworks.
And just like JavaScript, CSS is a mess. There are many variants of CSS frameworks or preprocessors which extend capabilities of standard CSS (or Plain CSS). SASS, LESS, and CSS Modules are just a few examples of such tools.
Looking at the result of the survey, it seems both SASS and Plain CSS are used by developers at the same level. But looking at the satisfaction rate, it turns out that developers who use SASS and CSS Modules are more satisfied with them compared to the other options.
How likely is a CSS technology user to also use other technologies?
| Plain JavaScript | ES6 | CoffeeScript | TypeScript | Elm | ClojureScript | No Framework | React | Angular | Angular 2 | Ember | Vue | Backbone | Redux | MobX | Relay | REST API | Firebase | GraphQL | Apollo | Falcor | Horizon | Meteor | FeathersJS | DoneJS | MERN | MEAN | Mocha | Jasmine | Enzyme | Jest | Cucumber | Ava | Plain CSS | SASS/SCSS | LESS | CSS Modules | Aphrodite | Webpack | Grunt | Gulp | Browserify | Bower | Native Apps | React Native | Cordova | PhoneGap | NativeScript | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Plain CSS | 21 | -3 | -3 | -3 | -2 | -2 | 18 | -3 | 2 | 0 | 1 | -1 | 4 | -3 | 0 | -3 | 5 | 4 | -3 | -2 | -1 | 1 | -1 | 1 | 1 | 0 | 4 | -1 | 0 | 0 | -2 | -1 | -1 | 100 | -3 | 4 | 0 | -1 | -5 | 6 | 0 | 2 | 5 | 5 | -1 | 3 | 4 | 2 |
| SASS/SCSS | 5 | 13 | 6 | 3 | 1 | 1 | 2 | 10 | 9 | 7 | 9 | 6 | 5 | 9 | 0 | 0 | 10 | 11 | 1 | 0 | 2 | 0 | 3 | 0 | 0 | 5 | 9 | 11 | 15 | 3 | 2 | 8 | -1 | -3 | 100 | 15 | 9 | -2 | 12 | 9 | 24 | 11 | 12 | 2 | 5 | 6 | 6 | 0 |
| LESS | 4 | 3 | 6 | 5 | 0 | 1 | -1 | 1 | 12 | 7 | 3 | 1 | 8 | 0 | 1 | 0 | 6 | 3 | 0 | 2 | 1 | 0 | 4 | 0 | 2 | 2 | 10 | 8 | 14 | -1 | 1 | 5 | -2 | 4 | 15 | 100 | 5 | -1 | 2 | 15 | 7 | 6 | 9 | 4 | 2 | 9 | 11 | 3 |
| CSS Modules | -3 | 11 | 1 | -1 | 5 | 3 | -2 | 19 | -4 | 2 | 4 | 2 | 1 | 20 | 9 | 10 | 1 | 8 | 12 | 6 | 5 | 4 | 1 | 3 | 4 | 8 | 1 | 12 | 5 | 21 | 10 | 2 | 10 | 0 | 9 | 5 | 100 | 11 | 20 | 2 | 3 | 6 | -1 | 5 | 14 | 0 | 1 | 4 |
| Aphrodite | -1 | 5 | 1 | -1 | 6 | 4 | -2 | 9 | -2 | 1 | 2 | 2 | -1 | 10 | 16 | 10 | 0 | 4 | 12 | 9 | 7 | 5 | 2 | 11 | 11 | 6 | 0 | 4 | -1 | 13 | 13 | 1 | 16 | -1 | -2 | -1 | 11 | 100 | 9 | -4 | -4 | 0 | -5 | 2 | 11 | 0 | -1 | 4 |
Note: “user” defined as people who picked “I've used it before, and would use it again”. Phi coefficient values go from -100 to +100, darker red indicates stronger positive correlation, darker blue indicates stronger negative correlation.
Although it might seem like Plain CSS comes out on top, we find something interesting when we look at the correlation values of the heatmap.
According to the chart, there's a strong correlation between using plain CSS and not using a JavaScript framework for your client-side code; and conversely, using SASS means you're more likely to also use a front-end frameworks.
CSS in React
React stands out from its competition as it offers the most options when it comes to writing CSS. Apart from CSS Modules, there's also newcomer Aphrodite, a clean way to write CSS in JavaScript and embed styles in individual UI components. This method was popularized by React Native and early frameworks like Radium.
Of course, React developers always have the choice of falling back on more standard frameworks like SASS. But things get complicated for developers who build tools and libraries for React.
For example, we sometimes have a hard time with CSS when building React Storybook, an open-source UI component dev environment for React.
Storybook allow developers to choose their own CSS framework by simply adding a new webpack loader. But for Storybook itself, it can't rely on a CSS framework since it doesn't know which framework the user is going to use. So the CSS used to style the app is based on "CSS in JS", since that works everywhere.
In short: if you want to build portable React components that can be used in any React app, CSS in JavaScript is your best bet.
Recommended Resources
Presented by
Egghead.io
Flexbox Fundamentals
Garth Braithwaite
Flexbox is a wonderful tool that doesn't require any special framework or library. It makes arranging elements on a page almost fun!
Styling React Components With Aphrodite
Jamison Dance
Learn how to use Aphrodite to style reusable React components.
Thanks to our partners for supporting this project. Check them out for more awesome programming courses!
Other CSS Tools
On a scale of 1 to 5, how happy are you with your current CSS solution?
Show:
Overall, CSS is in a pretty good place with a 3.75 average happiness score.
There a lot of options for CSS and developers use many of them, but the data shows that if you're looking for a framework, you can't go wrong with SASS.
If on the other hand you want to write encapsulated, portable code, and especially if you already use React, you'll should check out either CSS Modules or a “CSS in JS” framework like Aphrodite.
About the Author
