About 4 years ago I was trying to figure out whether to use LESS or Sass. I could use Codekit or even switch to Espresso to get automatic compilation and updates!
We ended up using LESS, but for the life of me I couldn't tell you why. A bit later Grunt and Gulp came out to make things even easier. Somehow during this time I switched to Scss, and didn't really look back.
This represented a huge step forward in dealing with CSS. We could nest selectors, split them into smaller files, use variables, use mixins! It was amazing and made life a ton easier.
Since then I've used Scss almost exclusively, moving multiple applications and companies onto it, mastering the use of node-sass and religiously following the guidelines laid down by Harry Roberts.
And then Webpack and React hit the scene...
The Webpack/React ecosystem completely blew the lid off CSS. Nothing we knew mattered anymore because we could include our styles within our React components, and completely avoid global scope.
All of a sudden cascade, BEM, order-of-loading, and the lack of globbing were inconsequential. To make things more interesting, PostCSS burst onto the scene allowing CSS transpilation through JS and flexbox was supported in modern browsers.
Suddenly, pre-processed CSS and style tags didn't mean a whole lot when you could just add 2 lines to your Webpack config:
test : /\.css$/,
loader: "style-loader!css-loader!postcss-loader"and one line to your React components:
import styles from './component.css';This seems like the right way of dealing with CSS (language and syntax notwithstanding) is finally here. My CSS is so much smaller now, Flexbox lets me avoid clearfix hacks, and my components are almost entirely encapsulated.
For a moment I was worried about grids, but then Lost came out and was an easy drop-in. We can now use pure React components as containers to nest more complicated pieces, and things fit together well. Mix this with viewport-dependent component mounting and we can basically cut out media queries in CSS as well.
I can't find a reason to use Scss anymore, or LESS, or be bothered to learn Stylus. Plus, rolling my own CSS framework seems so much easier than dealing with Bootstrap's bloat, and thanks to Autoprefixer I don't see much need for Scss frameworks like Bourbon.
It feels like CSS finally makes sense.