It's 2021, 10 years after the release of Bootstrap and other CSS Frameworks.
Are CSS Frameworks dead? My opinion is: "no, but they are less important than before". Why? Consider the HTML5 Grid and SCSS; which together, give us complete height, width, column and row control, as well as specificity.
CSS itself is a poor example of a DSL that implements pseudo inheritance using Cascades. It's hard because finding out about browser internals is not something we can read up on. Therefore, CSS is pretty much a "Learn by your failures" thing. Many of us have had those CSS moments where anything we try doesn't work.
The simpler parts of CSS, such as background, color, margin, padding, height and width or font size, font family, font weight, box shadows and borders give us good control over the page. These rules are simple to use.
Pseudo elements such as hover, after, before are also easy to understand.
This means we have all fine adjustment tools we need, and are easy to understand.
The birth of entire industries that made layout easier was a direct result of the hard parts of CSS. Those hard parts are history, when we use SCSS, the HTML Grid, and @media print (for print layout).
JWP2020
Top comments (10)
Frameworks are certainly not dead, most of the web still make great use of them, and they'll still be popular for quite some years. I can see some people going out of the ginormous frameworks such as Bootstrap in favor of simpler things such as Tailwind. But they are here to stay.
I freaking love CSS grid, and in my opinion custom CSS is a better way for most projects in the smaller scale, and a custom design system for the bigger ones, but CSS Grid (and flex, and all the "new" things) only makes it easier to go with such approach. As much as I'd love to see a "more custom, less frameworks" approach, I don't really see that trend happening.
Article updated to reflect what you are saying here, thanks!
+1
That explains everything lol :)
On a serious note: Always keep in mind that the world is HUGE and there are always millions of people and businesses with use cases, goals and requirements that vastly differ from yours. E.g. one of the reasons CSS frameworks will exist forever is they allow for rapid prototyping. As a backend developer I often need to mock some stuff quickly (including for production) and without Tailwind (or whatever framework a dev prefers) that would take much more time. And that's just one of the example use cases. And I personally am very skilled in pure CSS, been working with it since the early beginning, the cascade is in my blood etc - I do write vanilla CSS quickly. And yet, CSS frameworks save time (and money). Thus, they will continue to exist whether you like it or not.
I updated the article to reflect these ideas, Thanks!
I'd also rephrase mentions of SCSS/SASS - while pre-processors do have their place for some use cases, post-processors (hello PostCSS) are better for most. With CSS evolving on its own, PostCSS actually allows you to write cutting-edge CSS before it is even adopted by the browsers. Just like Babel.
Thanks for the tip Ihor, I've never heard of PostCSS, but will look into it. I mentioned SCSS because with Angular View Encapsulation developers can't go deep into CSS on current page. They once recommend using NgDeep for this but, it has been deprecated.
The only work around is to define the queries in the root; and using SCSS, it's simple to do.
This is actually a good example of where SCSS may be beneficial!
Gosh this is one of the things about Angular that drives me bonkers. All these host elements that screw up any sense of positional CSS which is especially frustrating for things like tab components.
I actually like the ViewEncapluation as I can literally copy a CSS file and just import it and it's encapsulated (whereas in React I'd probably make a foo.css get wrapped by foo.modulecss if I'm using CSS Modules). Tradeoffs I guess. But in terms of CSS and HTML Angular is the most frustrating for me (vs. Vue 3, Svelte and React -- I code in all of these)
Love that you said CSS is a DSL. I always say this for utilities based frameworks, you're going to have to learn 2 DSLs, Tailwind + CSS (or Tachyons, etc.).
I would say a more conservative shifting I'm seeing is less folks relying specifically on these frameworks for layout or grids. Obviously CSS's own flexbox + grid and now pretty good support get folks quite far. I personally removed a flexbox-based grid from my own framework. It added like 1k lines of code. It made no sense to have this so I gutted it.
I think frameworks are actually a great place to learn from. You can bounce from your custom toy scripts and cross compare against frameworks. Maybe you see some
pointer-events: nonethey did and you're like "Hrm, why'd they need that?". Then you go research that and maybe read MDN, etc., and realize why and you've just had a great source code based lesson 😄 ⭐ 💪