There are two main schools of thought in CSS frameworks.

There is the old guard (Foundation/Bootstrap) that is good for entry level work/learning but creates problems on bigger projects due to style leakage and not enough strictness in namespacing.

Then there is a new logic with lots of utility classes (which might get recompiled to a file that only uses these classes). Frameworks like TailwindCSS. The logic behind this might be sensible but it is too complicated, especially when considering reusing the utility class logic across multiple projects (answer: it doesn’t work).

Next to this there is a clear movement to “componentisation” in CSS. The CSS workflow used around MVVM frameworks (such as Angular) and React/Vue often have their ways to prevent style leakage. There are various projects like styled-components that make sure that styles don’t leak outside of components.

However these projects assume a full-on Javascript-based development environment and are too heavy handed in general. They re-implements parts of CSS and forego the strengths of native CSS.

It’s very painful to see a re-implementation of CSS in JS that only supports parts of CSS.

I have always liked a “pick and choose” approach for components. In Bootstrap for example you can take parts out of it that you don’t use (Jumbotron, Badges etc.) and the framework will still function.

However, Bootstrap suffers from overly complex code. Some parts of Bootstrap feel like somebody wanted to use every language feature of Sass just because they could.

In the end if you are trying to debug something you will end up reading the source that generated the code. If the source code is too complex that is no good.

One can wonder: why use a framework at all? There are of course several reasons. In bigger projects you never have enough time to to the deep work that is necessary to provide a quality user interface, especially when it comes to the more difficult components like datepickers or modals.

A framework that is already focussed on performance and accessibility and used in the right manner will help a project tremendously.

In my opinion, there is space in the “CSS framework market” for a great BEM/ITCSS framework that is well documented, namespaced and tested. Something that has good documentation and well-tested components. What do you think?