Ranking of the most css experience friendly preprocessors and other css helpers
Going from vanilla css, how you rank each css preprocessor based on what level of css experience you have? Examples are Tailwind(compiled css), sass, plus helpful libraries like bootstrap, chakra, material, etc
30 Replies
First those things are not preprocessors, other than sass. Others would be Less, Stylus, PostCSS
Ah
How would rank the ones you mentioned plus others I did that are different
Tailwind is a "utility class framework" then you get into things ontop that make it a UI framework.
Bootstrap uses sass and is a UI framework/design system
MUI, chakra, fall into the UI Framework too like Kendu
Would you say after vanilla css, moving into sass is next step?
sure
Like actual preprocessors then ui frameworks
or just learn more css
Sass is good if you want to build your own design system. You could also use CSS custom properties too. Sass would just give you more power over how its done.
Really that is a you call imo. I enjoy sass but I still never use the power of it past media query vars and nesting LOL (that might change after I take Kevins course...)
Ui frameworks are kinda nice so far since im learning more because making a dark theme with vanilla is much harder than using chakra
Learning UI frameworks? xD more like just copy/pasta
jpjp... but yea I wouldn't learn CSS via a framework. Use them when you need to get stuff done.
It's ok for now 🙂
Been seeing tailwind as a job option
if you know CSS you know tailwind its just inline css >.>;; Not the otherway around though.
Learning tailwind without knowing CSS is a poor move and will just cause pain
These ui systems break down into vanilla css? So I could see how these things are made right? 🙂
or you could just learn CSS
why the avoidance? 😄
I am just be nice to see how some of the things in my project are converted into css
Like my nav bar and dark theme
Adding this to what b1 says.
A UI + Design library is fast to apply, but limited and hard to customize, even at the least.
Tailwind is a utility class framework, which's handy for lazy peeps, who just want a custom-ish system with the minimal effort. Usually people use it with DaisyUI.
S[ac]ss, PostCss, less and stylus are just ways to write css, but "neater" [quotes], as they are a preprocessor. Usually really nice for complicated css, in case you use mixins, nested stuff, etc.
Now, learn? Sass, for an easier css-writing time, css is just adding on to it. Tailwind? Handy. It just works for most systems, but its definitely not bleeding or neat looking. It just LACKS proper principles. Do you want to make more things with css? learn postcss, postcss plugins are wild in terms of how much things can do.
Really good breakdown 🙂
I'd get behind that PostCSS is amazing, I use its plugins still with sass. Its got nesting and stuff too if you wanna write with it.
more of my viewpoint tbh 😅
Yeah im just thinking about next steps after css
want a rougher one? TW+Daisy if you just dont care.
In case jobs happen and I hit a wall on skills
But scss modules/tokenCSS for a serious project
yes tokenCSS :)
I keep seeing all these fancy things made on free front end site and it's crazy how great you can be at css
Nates rad (the creator) I still have not dove into tokenCSS yet but looks like a nice solution for the React folks
I am using react
I found it a bit buggy to set up initially, but it was real nice. Astro supports sass outta the box though, so /shrug
Astro is my next project for a blog
I'm just looking at my study path to where to go from here after I get a decent amount of css down
Another thing to look at are stuff like RadixUI
Unstyled, accessible, simple blocks of UI components.
roadmap.sh
Frontend Developer Roadmap: Learn to become a modern frontend devel...
Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.
Mostly been following that and backend map
Radixui ill need to look that one up