DEV Community

A case against modern CSS frameworks (component libraries)

Michael Z on July 14, 2019

Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content. CSS frameworks are a great way to quickstar...
Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I want a banana 🍌, I know.. I'll import the jungle 🍌🦍🐦💦🌴. That's my feels towards CSS frameworks, I used to be the opposite.

Collapse
 
polluterofminds profile image
Justin Hunter

I was a big css framework person for a long time. But I’ve started writing all css from scratch for my side projects and I feel so much power! Plus, it’s nice to remember how things actually work rather than relying on framework components.

Collapse
 
jamesthomson profile image
James Thomson

This. Writing your own css is so much more satisfying and CLEAN. Having to hack away at a framework to overwrite countless styles is so unproductive and leads to some serious bloat.

When I do need to do some quick scaffolding, I've been using modules from Bass CSS recently for side projects. It's very low level and modular so you can include just the pieces you want to get you past some of the basic boilerplate stuff like typography.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I think you should invest in smaller compile time only frameworks, such as a scss grid (do we even need grids anyway?) Maybe something lean and minimal to kick-start. But after that do it yourself.

Collapse
 
oenonono profile image
Junk

Yes, the future of "CSS Frameworks" are Web Components that expose Named Parts for author styling.

Collapse
 
tombozwell profile image
Thomas Thornton

Tailwind is great. I prefer Bulma though.

Collapse
 
willvincent profile image
Will Vincent

I think as with most things, it's circumstantial. Also opting for a less do all the things framework is beneficial. Bulma seems a reasonable balance between useful stuff and not overly in the way. Similarly, buefy for some starting point Vue components that can still be pretty easily styled however you wish.

My colleague just started using tailwind with buefy and says it's great, haven't tried that yet myself.

But yeah.. entirely depends on the circumstances I think. Are you building something totally custom? Plain vanilla css or something like tailwind is probably a good option, prototyping a more do everything framework will probably save time. Honestly though tailwind largely seems like mostly a prototyping tool too...

Collapse
 
jrbell989 profile image
Jason Bell

I agree on Bulma. I'm currently working on a project that uses the Buefy component lib (based on Bulma). For the most part, Bulma stays out of the way until you actually want to use its styles.

Collapse
 
pozda profile image
Ivan Pozderac

material-ui for react seems ok, even if you have to override some things, but yeah, reading documentation for API and how it should be used is crucial part of it. Recently started to use styled components and I like it a lot. Writing my own styles without css frameworks.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Ever try shadow DOM? It's been liberating for me. Nowadays I just apply styles as needed - no need for baroque classes or !important.

Collapse
 
michi profile image
Michael Z

Will give it a try!

Collapse
 
clamstew profile image
Clay Stewart

Emotion and react has been made incredibly flexible and extendable, but agreed that css frameworks are more trouble than they are worth. How long does it take to code a good looking button and import it everywhere?

Collapse
 
hyperpress profile image
John Teague • Edited

There are upsides to using a CSS library such as Material, which applies best practices out front and doesn't require the use of the entire library. Often I find it to be the fault of designer/developer teams who find it easier to import an entire framework into an app when only 15% to 40% of it gets used.

I found that together with LitElement created web components I can choose specifically what I want to include as shared CSS across all components and adding only what I need keeping the components light while enjoying shadowDOM isolation and reusability. It's great to have options, but I'm very sensitive about just how many bytes we have to deliver to a screen.

Collapse
 
jlozovei profile image
Julio Lozovei

As you said, Bootstrap-like frameworks are a good alternative when you don't have a designer in the project or even when you don't have time to create a styleguide properly.

After thinking a lot about the need of those big CSS frameworks in my projects, these ones crossed my path:

As a front-ender, I love to create the styles and optimize it until it breaks. Excluding Bulma and Primer, the above are considered micro-frameworks or even CSS starter packs; and they helped me to save time while developing.

Collapse
 
roblevintennis profile image
Rob Levin

You could even use CSS itself. No 2nd DSL to learn and will continue to work for the longest of times. I'm sort of partially kidding. The JIT removal thing in TW is pretty sweet. Certainly it's viable and folks are building great stuff with it. Same for BS too though. Great stuff can be built with it.

My thoughts on modern CSS frameworks? I know most call them frameworks. But shouldn't we be calling them libraries? Well, I've created my own such library and it will help me next time I need to build a design system for a company and they only want to give me 3 months to do it. Writing a custom framework from scratch probably takes about 9 months to a year imo. So I've elected to waste a bunch of my extra time creating AgnosticUI lol. Hopefully it'll pay off.

Collapse
 
zzjames profile image
James Smith

I was using uikit, I know that's not utility CSS like Tailwind but the idea, that you don't write CSS and apply styles using class attributes, is similar.
I was using twig templates and found that I was forced to make almost identical templates with just different class attributes for margin and padding, which seemed a lot more potentially problematic than slipping in a few lines of custom CSS. So I wonder if there is a case for blended solution of mostly use utility CSS with a use case for specific overrides when it would help keep complexity low

Collapse
 
jamesjcole profile image
James Cole

This is a great thought to have. The key things I've found is when using frameworks :

  1. Only include what's needed (most scss based frameworks allow you to do this).
  2. Override using variables first (scss again).
  3. Full customisation should use a a compilation pattern that overrides the frameworks file for the changes you are making. Gulp with node-sass can really help here.

I also found that you can use frameworks to help promote and control consistency when working with multiple devs. Bad patterns are easier to spot, and in-eficciencies are noticeable if you follow the above guides.

Collapse
 
radogado profile image
Radoslav Sharapanov

Style-agnostic lightweight framework/library without dependencies that solves tough UI problems (iOS modal, accessible drop down nav etc): github.com/radogado/natuive
Re-writing those components for every project is impossible.
Thanks for checking it out. Regards.

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

This isn't really a case against frameworks, it's a case against frameworks that aren't Tailwind. Or at least, frameworks that aren't lightweight/functional.

Collapse
 
michi profile image
Michael Z

Yea, basically CSS frameworks that are based on a JS component library/framework like vue or react. Is there a term for such frameworks?

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

Yes, those are JS Component Libraries. If you can't use it without the JS framework, it's not really a CSS framework like Tailwind, Bootstrap, Bulma, etc. e.g. Vuetify is a Vue component library.

Collapse
 
harrika profile image
henry kirya

Have you had a look at skeleton.css? It mostly stays out of your way

Collapse
 
codelitically_incorrect profile image
codelitically_incorrect

Nuff said

Collapse
 
knth profile image
KNTH

I switch from Bulma to TailwindCSS. And it's great! The best tool in the CSS game.

Collapse
 
peterdkc profile image
Peter DeMarco

I feel like you really need to check out TailwindCSS...

Collapse
 
kp profile image
KP

@mzanggl is amazing!

Collapse
 
ssimontis profile image
Scott Simontis

I'm like "oh hey I'm gonna go find away to automate that thing over there!" or "let me see that backend, yo". I enjoy the non-JS aspects of front-end design a lot less than I used to.

Collapse
 
kambanthemaker profile image
Kamban

That's interesting, you have a point man!