DEV Community

Charles Gibson
Charles Gibson

Posted on

SOS! CSS is eating my timeline!

"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:

  • Quickest to visually tolerable
  • Lightweight, fast
  • FW/lib/method aligns with future CSS work

    It doesn't have to be:

  • Devastatingly gorgeous - if I need to make it prettier I will do the hard work
  • Idiot proof - I don't need it to abstract away CSS writing process

    To give a little context here was my impression of a few frameworks:

  • Bootstrap seems convenient but too heavy. Might be suitable for professional contexts where specs are sacrificed for short turnarounds.
  • CSS-in-JS seems too heavy and like it will die in the near future.
  • Utility-class frameworks and libraries seemed not any easier than pure (BEM) CSS. It felt more suited to managing large projects or many projects over time.

    Can anyone recommend a CSS framework or library for young devs like me?

  • Top comments (15)

    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.