Front end developer specialising in JavaScript and React. Experienced in all aspects of modern front end development. Passionate about making accessible, secure and performant software.
SCSS seems to be the most popular option. I highly recommend it. For all I know, other tools may be better, but I've never used them or noticed a job that required them instead of SCSS.
I also use PostCSS but only for one-time setup things like automatic addition of fallback properties and some other stuff. After that, PostCSS isn't something I actively work with. It just does stuff at compile time, not while I work. It complements SCSS in my opinion.
Nesting
The selector in the example feels a bit unintuitive to me as well. It can be re-written like this, which is perhaps a bit more intuitive:
a{b{color:red;}}
Personally, I prefer nesting a lot compared to standard CSS. It feels a lot cleaner to not repeat the first selector every time. It also works for BEM.
Other features
Other good features are:
variables (not as necessary now that CSS has custom properties)
logic things like loops and conditionals
partials
mixins and extends (basically the reverse of Tailwind's apply directive)
None of the features are necessary, but they can be very helpful. I use nesting 100% of the time. I use things like loops and mixins rarely, but I'm glad they're there when I need them.
So, if you like the features, use it, but you definitely don't have to.
SCSS seems to be the most popular option. I highly recommend it. For all I know, other tools may be better, but I've never used them or noticed a job that required them instead of SCSS.
I also use PostCSS but only for one-time setup things like automatic addition of fallback properties and some other stuff. After that, PostCSS isn't something I actively work with. It just does stuff at compile time, not while I work. It complements SCSS in my opinion.
Nesting
The selector in the example feels a bit unintuitive to me as well. It can be re-written like this, which is perhaps a bit more intuitive:
Personally, I prefer nesting a lot compared to standard CSS. It feels a lot cleaner to not repeat the first selector every time. It also works for BEM.
Other features
Other good features are:
None of the features are necessary, but they can be very helpful. I use nesting 100% of the time. I use things like loops and mixins rarely, but I'm glad they're there when I need them.
So, if you like the features, use it, but you definitely don't have to.
Thank you, It's really helpfull