DEV Community

Discussion on: Best CSS Frameworks for 2022

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!