So many different css "frameworks", it's getting ridiculous. Copies and hacks of others' work. Very little is net new. It does create a bit of a problem ... many of these CSS "frameworks" start off on a cheery note and then end up as "stalled development" or abandoned entirely. You can also add in this mix all the outdated stuff. And before you read any further please be aware that I refuse to support the aged and dropped Microsoft Internet Explorer (IE). That product has been dropped and replaced with another product. There are a considerable number of replacement for IE and the vast majority are free.
If you are here reading this article about different CSS frameworks, you are likely also struggling with how to get started on your project and want direction. I'll do my best to help.
I've created my own CSS framework. I call it "Blade CSS" ... "blade" to indicate cutting the crap out. My goals: functionality first followed by concise efficiency. No bloat.
My first issue was sorting out all the different types of CSS frameworks. It sure would help if the developers followed some type of standardized category system. There is none – although, there is some general direction from developers who have gone through the same process as us and created a list of CSS frameworks based on their evaluation process. In that, they have some defined categories. Here is my list of categories is short:
- Normalize / Reset. I don't want to get into the argument of which is best ... it really all depends on your workflow and what you want to achieve. Normalize works on the basis of setting all the browser's to one common-looking default style. Reset removes all formatting from default style and resets to one style. There's also a mini-reset that just removes all formatting from the default style. Of course, there are several variations of each of these. I personally use Modern Normalize. The original Normalize CSS is now dated and does not include some of the latest browser features or the progression of CSS (the latest version of normalize.css is now 6 years old). Modern Normalize is a current project with the latest release dated just yesterday. I use a CDN repository to always pull in the latest release.
- Classless. Classless css "frameworks" are designed on the basis of using only semantic HTML. No classes whatsoever. Note these are not "default" styles as in a normalize or reset ... these are opiniated re-structuring of the defaults into a new CSS entity. If you are going to use a classless framework, look at the results closely to make sure they meet your own standards and branding efforts. Of the classless frameworks, I recommend Simple.css.
- Class-light. Class-light builds on classless css frameworks. Class-light introduces components such as Switch toggles, Cards, Responsive grid, Button styling. Most also include support for Light/Dark mode. These are also highly opiniated. You should look at their demo pages closely to make sure they meet your standards and branding efforts. Of the class-light frameworks, I recommend Chota.css. Note that the Chota responsive grid is very very basic. You may have to create an extension if you want to support offsets.
- Utility. Utility CSS frameworks are similar to class-light in that they start with a basic reset or normalize and refine semantic HTML tags and add their own spin on basic component styling. By basic, I mean very basic – like a core button structure. Where a utility css framework shines is in making available an extensive array of components. The best known utility CSS framework, and the one I recommend, is Tailwind CSS. Tailwind CSS is the leader in its class and growing in popularity – it has overtaken many "general purpose" CSS frameworks, and with reason.
- General Purpose. I've called these "kitchen-sink CSS frameworks" in the past. They are typically huge in size and include every possible component and variation of those component. Some of these are ridiculous in size ... one is 714Kb (633Kb minified). Nuts, totally nuts. Of all the general purpose CSS frameworks, the best known (and I recommend) is Bootstrap (less than 1/3 the size of the elephantine CSS I mentioned above). There are a lot of Bootstrap wanna-be frameworks out there, but this is the best with a huge following and sample starter themes to get you started.
Before you run off and use any of these, keep a few statistics in mind. It's sobering:
- 97.5% of websites use HTML5.
- Of all websites, less than 25% report using ANY monitored css framework
- Of all websites that do use a CSS framework, Bootstrap is the preferred choice with 77.3% market share (keep in mind, this is only for websites that report using a CSS framework ... considering ALL websites Bootstrap market share is 17.5%). The closest competitor to Bootstrap is Foundation with 2.1% market share (0.5% of all)
- No other CSS framework of any type surpasses 0.8% market share (0.2% of all)
Despite the low market share numbers for any product, the user community seems rabid for or against any particular product.
It's easy to get dragged into a rabbit hole. I did. For some time, I committed to using a Bootstrap competitive product called Bulma. In the market share reports, it is one of the lowest used market share. Based on their website and marketing, you'd think they are a panacea for CSS users. Quite the opposite, their claims just don't stand up to scrutiny. It's not any easier to use than any other CSS framework. It's not efficient, the class names are not that simple, and it's not curated as the term "curate" implies.
I've made some recommendations above for each of the categories of CSS frameworks. If you want rapid development, use one of those.
My ultimate recommendation, however, is to develop your own. You'll find it a lot easier to create your own instead of fixing someone else's opinionated work.
And ... my "Blade CSS" will never see the light of day. I am not releasing it. There is already too much confusion about what to use with empty promises and marketing claims that are just outlandish.