Working on hobby or shorter lived projects makes all your points agreeable. My work is generally on enterprise SaaS software with vast lifecycle and my thinking is
separate css files
module.css with imported classes: my go to outside of tailwind
These are the same thing, unless it’s not configured correctly.
inline styles
Only makes sense for something computed. Like a color computed based on a user selection. Otherwise it should be a class
scss
On a well-maintained project SCSS should be second nature. Something like a Vue single-file component project with scss will certainly not add to the bloat. You’d just have extra lines of vanilla css to scope classes and children selection/scoping that scss does with better syntax, in addition to scss functions and the like. Note that CSS is improving to do the work that SCSS has previously done, just as JS is improving to do the work natively that frameworks, libraries, and toolkits have previously done.
bootstrap
Yeah bootstrap, like jQuery, had it’s time. It’s largely been replaced by native tooling that shouldn’t require external libraries. There’s plenty of CSS libraries that are purely for theming, which is mostly what people used bootstrap for. (Smart defaults, basic component and typography themes, etc).
To me tailwind makes sense for setting up projects quickly, but gets out of hand when it comes to customization on a larger scale. You eventually end up with overrides to tailwind’s default styles that become hard to manage, outside of the scope of their theming implementation, and then ironically you’re usually just using CSS variables which is back to the core toolkit.
Working on hobby or shorter lived projects makes all your points agreeable. My work is generally on enterprise SaaS software with vast lifecycle and my thinking is
These are the same thing, unless it’s not configured correctly.
Only makes sense for something computed. Like a color computed based on a user selection. Otherwise it should be a class
On a well-maintained project SCSS should be second nature. Something like a Vue single-file component project with scss will certainly not add to the bloat. You’d just have extra lines of vanilla css to scope classes and children selection/scoping that scss does with better syntax, in addition to scss functions and the like. Note that CSS is improving to do the work that SCSS has previously done, just as JS is improving to do the work natively that frameworks, libraries, and toolkits have previously done.
Yeah bootstrap, like jQuery, had it’s time. It’s largely been replaced by native tooling that shouldn’t require external libraries. There’s plenty of CSS libraries that are purely for theming, which is mostly what people used bootstrap for. (Smart defaults, basic component and typography themes, etc).
To me tailwind makes sense for setting up projects quickly, but gets out of hand when it comes to customization on a larger scale. You eventually end up with overrides to tailwind’s default styles that become hard to manage, outside of the scope of their theming implementation, and then ironically you’re usually just using CSS variables which is back to the core toolkit.