DEV Community

Discussion on: Best CSS Frameworks in 2022

Collapse
 
capsule profile image
Thibaut Allender

Please, stop lying to yourself. "writing your own framework" is miles away from using a pre-made one that fits all needs (but yours, really).

A framework would never be "written in pure CSS" anyway, that would be a nightmare to maintain. You might only have access to a monolithic, pre-compiled and non configurable version of it, but it doesn't make it simpler. I would even tend to say it's worse as you can't customise it to your needs (if such a thing really exists).

Thread Thread
 
drawcard profile image
Drawcard

Here are some pure CSS frameworks that spring to mind:

Those frameworks use just a single uncompiled CSS stylesheet, so they require only 1 extra request to load, and they are extremely easy to customise (some of them use a handful of CSS variables to change the entire appearance). To me that's not much of a big deal.

If you want to go one step further, you can use a classless framework, requiring zero modification to HTML code: github.com/troxler/awesome-css-fra....

Thread Thread
 
capsule profile image
Thibaut Allender

I wouldn't call a classless framework a "framework", it's just an opinionated CSS reset.

Thread Thread
 
drawcard profile image
Drawcard • Edited

Google defines a framework as: "a basic structure underlying a system, concept, or text." or "an essential supporting structure of a building, vehicle, or object."

CSS Resets are actually frameworks by that definition: github.com/troxler/awesome-css-fra...

Many experienced developers hear the word "framework" and freak out - without really considering that there are some really useful, extremely lightweight systems out there that are helpful and fully customisable. Of course, no one is forcing you to use them, but you'll find Normalize.css on many websites for a very good reason - it's handy and it saves time.

A framework that doesn't save you time is worthless, I 100% agree with that. But I don't agree with the kneejerk reaction that "All frameworks suck!"

Thread Thread
 
perpetual_education profile image
perpetual . education

Yeah. I guess we're just kinda mad that bootstrap create 50 billions "why doesn't my CSS work" questions across the internet. It's OK. We don't have to agree. You are correct. Everything is a framework.

Thread Thread
 
capsule profile image
Thibaut Allender

If it was included the right way, Normalize should be invisible from the final CSS output tho. Either you merge it manually with your own declarations or you merge selectors with some PostCSS (although not recommended as this would potentially change the order of things). Another reason not to just throw some stuff and make an extra http call for things that you would rewrite anyway when writing your own custom CSS. Being able to tell it's used on many websites tells a lot about how much the devs responsible for them care about performance and optimisation.

Call me an old fart if you want but after close to 20 years of CSS I'm yet to find a CSS (not talking about JS here) framework that makes your life easier AND doesn't impact performance.

Thread Thread
 
roblevintennis profile image
Rob Levin

Thibaut, you should look at AgnosticUI. It does not use PostCSS, Sass, or nada. It's platform CSS. The methodology is essentially SMACSS (although I don't adhere closely; Bootstrap's style is similar with its class chaining). AgnosticUI -- look it up. It's certainly a framework, I am biased but believe it's quite maintainable.

Regarding impacting performance I generally have to agree but with the caveat that I believe it's generally because folks should be more creative in how they use frameworks! First off: at least do yourself a favor and only import modules you're actually using! Second: if you're not worried about being "upgrade safe", steal my buttons and prune the styles you're not using. I spent a lot of time getting them right and will have many bug fixes. Just take my CSS and craft it to your liking. Why reinvent the wheel completely from scratch? Leverage my pain 😄 -- I have to believe you do this anyway. Don't all us "old farts" to some degree.

But for performance, just measure and prune and use discretion. And tell the youngin's to "go learn CSS!" 💪 🍰 ⭐ 🙌

Thread Thread
 
capsule profile image
Thibaut Allender

You’re preaching to the choir. What you’ve done is some kind of universal atomic design system. I created one for the company I currently work for and it just saves so much time. The amount of work to get it up to speed is not trivial, and requires deep CSS knowledge, but once you have it running, it’s pretty much like building with LEGO. You don’t have to learn the 150 utility classes from a framework - most of them only emulating inline CSS anyway - and can’t really mess it up as the correct markup is also ready to go. LEGO vs “here’s a blank canvas and a bunch of paint buckets”

Thread Thread
 
roblevintennis profile image
Rob Levin

Yeah, sounds like we're pretty aligned on design systems aka universal component libraries (I like the atomic part though. Nice touch!).

Yes, it's not trivial to actually get these things done. I think companies are questing the ROI and it's a touchy dance with the stakeholders. I did one for ethos.com and basically before I was even to a place I felt even close to finished I was pulled off the design system to pound out more features. At some point I was asked "hey, who's managing the goals of the design system" and I'm like, wth, y'all took me off of that for your super urgent project. I bet you can relate to this reality too huh Thibaut.

If I'm super honest, I've started AgnosticUI as a survival mechanism so I can show up at a similar job with a more or less complete system that I know and feel good about in terms of a11y, code quality, etc., and I can get something branded in a month or two. Otherwise, yes, it probably takes a year to build a complete system full time dedicated very experienced developer with not just JavaScript skills, but good solid HTML and CSS and a11y skills.

You don’t have to learn the 150 utility classes from a framework

Yeah, I agree. I call this having to learn a DSL (domain specific language) + CSS. You can't really use a CSS utility library effectively in the first place if you don't know CSS. The only thing I'd admit a utility gives you is decent values perhaps. But yeah, I'm in your boat and just can't see myself doing anything but prototypes this way. Bootstrap 5 has a fair set of utilities and my colleagues have pretty much made certain sections look like we're using Tachyons or TW and then we have like 15 off canvas drawers and have some crucial h100 nested code and forget it in one place and I'm hunting down the bug lol.

Yeah, sounds like we're essentially from the same camp 💪 ⭐ 🙌