"You thought CSS was going to be easy!"
It only took one attempt at pure vanilla CSS to see where things go awry. Deciding on a structure before you begin is complicated, and CSS is already hard! I am now sold on the argument that no one should be writing pure CSS.
Where to begin then?
My understanding of CSS frameworks and libraries—and the landscape of the two—is a bit shaky to begin with. I am having a hard time even weeding through potential directions to start looking. Some qualities I'm looking for:
It doesn't have to be:
To give a little context here was my impression of a few frameworks:
Can anyone recommend a CSS framework or library for young devs like me?
Top comments (15)
TailwindCSS. It provides a wide set of utility classes for you to use out of the box, and for most layouts you can probably stick to those. It's easy to create your own utility classes. I know you said that's not what you want, but I'd definitely recommend a closer look at this one. This framework isn't in the "idiot proof" genre, you still do all the heavy lifting, but you spend your time on design, not CSS gotchas. My $0.02, at least. I generally dislike CSS, and am hoping I get to use Tailwind for a long time to come.
Also, if size is an issue (the default tailwind bundle is some 700kb!) you can use purgecss to remove any unused styles (as explained in the tailwind docs). Using purgecss will usually bring down the bundle size to a fraction.
Definitely - I use cssnano as well as purgeCSS, both via PostCSS. My production bundles with Tailwind are not remotely problematic size-wise.
Thanks for the recommendation. I think I can live with this. I was already writing custom utility classes and the stylesheet to go with it. If I rewrite my classes for TWCSS it should translate easily. The CSS gotchas and handwritten stylesheet were holding me back a lot.
I originally went this route because I saw potential in utility CSS: it pairs well with components, scales well virtually and IRL, reduces working docs, all without bloat.
We're taking DEV in a Tailwind-esc direction. Seems like everyone in this thread feels that way 😄
I'm curious: How do you keep your CSS maintainable with Tailwind in large-scale apps and websites? I can see it being useful for iterating very rapidly on small projects, but a sea of classes in HTML is going to be very difficult to look at, let alone debug, isn't it?
Definitely checkout TailwindCSS. I now have all the goodness of an extremely well-thought-out CSS framework, with none of the bloat, "everything looks like bootstrap" effect. Here's a great cheatsheet for TailwindCSS.
Nowadays I almost never write css, instead just building out the classes. the Tailwind site has some extremely good tutorials for learning it.
I also recommend TailwindCSS
Also, this:
"I am now sold on the argument that no one should be writing pure CSS."
Made me think back to how we wrote CSS back in 2005. Good times. :)
I would not touch Bootstrap. Bulma is not complete (no spacing helpers).
Pure BEM with post-CSS might be the closest and most lightweight, if not mentioning Tailwind CSS.
In reality, I rely on Vue SFC and CSS scoped, rather than global CSS. Not sure how robust it actually is, though.
Can anyone speak to the "live editing" capacity of Tailwind?
I like to be able to see my edits visually as I do them, is that possible with Tailwind? My understanding is that a stylesheet has to be generated with scripts, so would I have to make my edits, run a script, then see my edits?
It wouldn't be a dealbreaker, but it is a factor.
You can use dev tools to edit the classes on an element, and the changes will show up immediately. You will still have to update your code afterwards, however. (But if you write your own, you would need to reload the style sheet to get the new styles).
Normally you use webpack or rollup with PostCSS and a dev server to see changes live. There are plenty of solutions that are less complicated, but watching changes is the common practice.
I'm a huge fan of bulma. I haven't used tailwind, but I have used bootstrap and I like Bulma more.
CSS ain't easy man, keep on keeping on!
The HTML Grid solves all CSS woes. Goodbye Bootstrap et. al.
There's also tachyons.io/ which aims to be very lightweight but still gives you a lot to work with from the get go.