DEV Community

Discussion on: Best CSS Frameworks for 2022

Collapse
 
deathshadow60 profile image
deathshadow60

I don't use CSS frameworks because they are so... ignorant. Ignorant of why HTML and CSS are separate, ignorant of the entire purpose of HTML, ignorant of everything HTML 4 Strict was trying to drag us back to after the horror-show that was HTML 3.

As I've said many the time if you don't realize that this:

class="text-center color-500-neutral text-large"

And this:

<center><font color="#777" size="3">

... are in fact the exact same broken mid-'90's code building mentality, then you don't know the first thing about HTML or CSS. You are putting what things look like for screen media in the markup, ignoring all the other types of media that exist where your screen layout means but two things, Jack and ****, and Jack left town.

But I suspect that's why most of the people MAKING these frameworks and their examples don't even seem to know what the media attribute for the LINK and STYLE tags do, thus why they omit it. Just like how they all set X-UA to "edge" as if any relevant browser uses the old M$ blacklist, how their examples are have broken heading orders, a lack of logical document structure, and all the other telltales that the people who CREATED these frameworks lack the knowledge to be using web technologies in the first place, much less have the gall to tell others how to do so.

NONE of their wild unfounded claims about how "great", or "easier", or "better for collaboration" is in any way, shape, or form based in fact. All they do is prey on people who need to spend more time learning HTML and CSS, instead of wasting twice as much time and code on these stupid frameworks!

In the 23 years I've been working with HTML and CSS, I've NEVER seen a website built with any of these frameworks that was easy to maintain, met accessibility minimums, properly leveraged or exploited caching models, or even used the most basic of proper semantic markup.

Thus my endless chain of articles on Medium ripping them to shreds.

EXPLICIT LYRICS WARNING if you can't take a little harsh language, please don't even bother with this first article. I was venting because from where I sit, the claims of how "great" frameworks are sounds like the type of delusional nonsense I expect from cultists.

medium.com/codex/stop-fighting-the...

medium.com/codex/more-tailwind-to-...

medium.com/codex/pure-css-more-lik...

medium.com/codex/semantic-ui-doesn...

medium.com/codex/material-ui-frame...

I'll never understand how dragging practices back to "screen only plow everyone else" mid '90's style coding using classes, resulting in two to ten times the markup needed, to requires a library of CSS two to three times larger than the CSS of an entire site should ever be, flipping the bird at semantics, leveraging the advantages of caching and pre-caching, ignoring the separation of concerns, and basically shoving one's cranium up 1997's rectum makes anything 'easier" or "better". Again, the praises people sing of frameworks is painfully outright DELUSIONAL!

Which is why as an accessibility and efficiency consultant, the first thing I have to tell EVERY client in legal trouble for this nonsense is that the frameworks need to be ripped out by the groin!

Collapse
 
roblevintennis profile image
Rob Levin • Edited

I love your irreverence toward these frameworks honestly haha. I mainly agree but also think some things are worth saying.

I believe SemanticUI is no longer maintained (but appears to live on in popularity with something like 50k stars on GH).

PureCSS if I recall was like a small project years ago that somehow continues on. It's very simple to just audit this script and use what you want...no need to religiously just import it. Same for resets or normalize. Folks need to actually go in there and see if they agree with the damn CSS rules. Oh, but they do need to learn CSS to be able to do so 💪

I don't probably even need to read your articles to agree (I will when I get a spare cycle though!); but I noticed Bootstrap wasn't in there.

I think that BS as frameworks go is fairly well written considering the number of cases it has to adapt to. I've looked at the code and it appears fairly solid. You as the user may need to add that aria-busy="true" based on the dynamic thing that is happening in say a spinner, but otherwise, they appear to mostly use correct aria roles and semantic tags. If you hate class chaining, OOCSS, SMACSS approaches, and prefer positional markup/structure based CSS in the name of removing "classitis" you'll disagree. But this takes us to an apples vs. oranges thing and we have to admit that classless approaches have their limitations (e.g. the number of cases you can support) as well; also positional approaches are generally riskier on large projects where larger teams start to "fight the cascade". I believe it really depends on the use case.

I feel that many folks are simply using Bootstrap (or any framework) in an unsophisticated and needlessly inefficient way. I've said this myself many times elsewhere, but you could simply do the following (with disclaimer you'd need to be in an SCSS env):

  • Copy github.com/twbs/bootstrap/blob/mai...
  • Comment everything out
  • Watch your builds fail (Webpack, Vite, Rollup, whatever)
  • Import the things that are obviously low level requirements to BS like the utilities and reset and what no
  • Add in typography and other generalized ones you're using in your cascade
  • Start to only add components you're using. For example, using Bootstrap's button, simply uncomment that. Using the Accordion, uncomment that.

I did this at work because they were using it before I even showed up. It worked fine. This is for Bootstrap, but most frameworks would have such hooks to utilize if you go looking.


I'm the author of a framework myself called AgnosticUI and I'd enjoy getting your feedback on my GitHub issues or discussions board if you find something egregious especially in terms of a11y violations (I have to balance what I can actually fix as it IS a side project at the moment; but you seem to have some valid and interesting findings and I'm trying to make my components inclusive and a11y compliant as much as my abilities allow me to do so! So I'm happy to learn of mistakes and correct them). I try to use semantic tags, add aria roles where and when appropriate, and use lighthouse or storybook accessibility tooling to check my code. I honestly don't always have time to do VO audits, but try to drop down to a screenreader when I do sanity checks.

I would also point out to folks, that you can leverage these open source projects and simply remove extra code you don't need. Or just fork the project and leverage some of the boilerplate! I know folks like to bag on framework bloat, but, I would argue that more often the usage is crudely done with an "import all the things at once" approach; and although framework authors have a responsibility — so do its users. Simply import things in a modular way and stop dropping in href="path/to/all/of/bootstrap.css" 💥 🍰 💪 in fact I've seen they have instructions on modular imports in their docs as do I.

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

I added a discussion on GIT outlining how -- to be brutally frank -- I don't see anything of merit in your "framework" just as I fail to see any merit in frameworks in general. The markup and CSS of the dotcom homepage of your project ALONE should send any same developer recoiling in HORROR!

No offense, but you need to take a few steps back and LEARN HTML. And CSS. Which seems to remain the biggest problem with people who CREATE frameworks. They dive for it before they have grasped even the most basic of concepts.

Thread Thread
 
roblevintennis profile image
Rob Levin

Thanks for taking the time to write that up and have a look. I certainly did ask for it haha. I used Vitepress for the dot com docs and I have github.com/AgnosticUI/agnosticui/i... for the accessibility issues that causes. Many areas you seemed displeased with so I'll have to go through those over time and see if I agree and/or if I can fix. Sorry to have upset you with all this, but I do appreciate that you took the time to have a look!

Collapse
 
roblevintennis profile image
Rob Levin • Edited

Ok, I read your stop fighting frameworks (I had to fight medium incognito so I can't comment because I'm apparently over my reading limit lol).

Love your points about parallelism and performance screenshots. I can tell from your cleanly coded accountCard that you are very sensitive to classitis; so you may not like my approach which is more a SMACSS approach. But, I work on teams where I'm literally the only one who knowns how to work with the cascade and I'm outnumbered, and the number of CSS cascade related regressions is outstanding on these larger projects. I argue that something like SMACSS is a much needed compromise. I do think we probably share a lot of common ground and I see you especially dislike Tailwind / Tachyons et al. I have to acknowledge their success in terms of devux but generally agree and just cannot see myself adding that many classes nilly willy everywhere. Your points on the performance and caching impacts were very good!

Collapse
 
dagnelies profile image
Arnaud Dagnelies

In both agree and disagree. Sure you can do everything using pure html and finely crafted css. It is a wonderful separation of concerns between content and style... But it is very time consuming too, tricky to get right and repetitive to do over and over. On the other hand, you could copy paste a couple of links and code blocks and you achieve something looking good and behaving well in a fraction of the time. So it ain't so bad either.