If Sass (.scss) is used correctly, I find it to be a great way to theme the CSS through variables and calculations. Also, it's smart, on huge projects, to create partials and selectively import them into different parent files so you're only serving what's needed between features, public and private pages of a site.

Then, you can write a conditional - used with the same library you create - that will output SEO-friendly "above the fold" CSS that you can add inline (so it's not pulling another file, thus lowering your score.) I've also made mixins that handle cross-browser issues with vendor prefixes, etc.

It's nice to have a dynamic way of writing CSS, in a nesting fashion. Just like anything else, it can be misused or overused, but for those of us that don't do either, it certainly speeds up my process since I don't have to continually type parent elements over and over again to keep a certain class exclusively within its scope. I feel it also helps me organize everything more effectively.

The two things I recommend avoiding would be; 1) Bootstrap, 2) Any "Key to the City" Framework. They are a complete waste of time to learn, imo. Write it yourself, so there's a deeper understanding of why you would use Sass as opposed to using something that would automate a process, while bloating it for no reason. Also, avoid using@extend.

"CSS Processor" -- "simplify" -- RIGHT.

Just.. don't. If you bother learning to use HTML and CSS correctly, you shouldn't have enough CSS to warrant the use of a pre-processor, and you'll end up writing as much, if not MORE CSS than you would probably be using without it.

They are universally a LIE -- just like frameworks. I've never seen ANYTHING done with them that couldn't have been simpler, smaller, or more useful without it, unless the design itself was "not viable for web deployment" due to being a giant middle-finger to accessibility, usability, and ux!

Admittedly, I say the same about the mind-numbing asshattery that is react... at least if you are building websites. Full stack crapplets? Different story.

But since you said a forums, don't piss on accessibility from orbit by using any of that garbage... well unless your intent is to scam the feeble minded with 'ooh, shiny'.

How about none of them?... :) try to use Css in JS

Check this link.. objectpartners.com/2017/11/03/css-in-js-benefits-…

If you need to support IE11 I recommend SCSS, using node-sass to avoid adding Ruby to an otherwise nodejs stack.

If you don't need to support IE11, consider just using native CSS; making use of custom props (variables) and calc. Those two features give you what I feel are the most valuable aspects of a preprocessor anyway. Preprocessor nesting tends to encourage unnecessarily long selectors.

Either way, use a post-processor (eg. postcss) to add in property prefixes; don't use mixins. It keeps your original code cleaner and you don't have to keep track of which props still need prefixes - ie. you have to know when you add them because you have to know if your site works, but with a post-processor you don't have to keep track of when to _remove _them.

Does Ant Design come with its own stylesheets? If they're using any preprocessor it might be good to stick with what your tools are already using.

I definitely see a lot more use of preprocessors than I do benefit from them, but since you are using React I'd say - if you want to experiment with a 'new way' of styling things, and you already are using React -> look into Styled Components and Glamorous for a 'CSS-in-JS' workflow that you can really only do on websites where you have a JS framework like React putting together your HTML.

At the end of the day, most projects can still get by just fine with a CSS stylesheet written as CSS, so make sure whatever abstraction you pick for writing your CSS doesn't make it more difficult than that (it's not as hard as the makers of some of these tools would have you believe!)