DEV Community

SOS! CSS is eating my timeline!

Charles Gibson on March 10, 2020

"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 y...
Collapse
 
deciduously profile image
Ben Lovy • Edited

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.

Collapse
 
uminer profile image
Moshe Uminer

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.

Collapse
 
deciduously profile image
Ben Lovy

Definitely - I use cssnano as well as purgeCSS, both via PostCSS. My production bundles with Tailwind are not remotely problematic size-wise.

Collapse
 
readredready profile image
Charles Gibson

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.

Collapse
 
ben profile image
Ben Halpern

We're taking DEV in a Tailwind-esc direction. Seems like everyone in this thread feels that way 😄

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

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?

Collapse
 
bobwalsh47hats profile image
Bob Walsh

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.

Collapse
 
dkruythoff profile image
Darius Kruythoff

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. :)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

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.

Collapse
 
readredready profile image
Charles Gibson

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.

Collapse
 
uminer profile image
Moshe Uminer

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).

Collapse
 
khrome83 profile image
Zane Milakovic

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.

Collapse
 
jvarness profile image
Jake Varness

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!

Collapse
 
jwp profile image
John Peters

The HTML Grid solves all CSS woes. Goodbye Bootstrap et. al.

Collapse
 
ludamillion profile image
Luke Inglis

There's also tachyons.io/ which aims to be very lightweight but still gives you a lot to work with from the get go.