Why Yet Another CSS System?

Overview

Since 2011, there have been many CSS frameworks introduced into the market. The most notable being Bootstrap, Bulma and lately Tailwind. Designed primarily for the front-end developer, they have provided a simpler and more consistent solution to creatively styling HTML layouts. They all solve the problem of letting development move along quickly, but they also trade-off the best customer experience through large file sizes and the need for JavaScript for some component functionality. Utility type CSS frameworks also burden (increase) the HTML files and don't make use of caching to reduce Time to First Paint (TTFP) and increase page load times.

Unfortunately, they also come with technical debt. Most notably, many of these frameworks stray away from HTML5 standards compliance and are, too often, semantically incorrect. These frameworks also do not use the latest changes in CSS3. The use of classes is verbose and the class name terminology can also be non-intuitive sometimes. Many have not been updated to the latest CSS3 capabilities.

Furthermore, the marketing of these frameworks is very noisy and makes the developer believe that they are the only viable solution. They also tend to overpromise and underdeliver, often leading to frustration and wasted time for developers. A delayed project also gets scrutiny from the folks paying the bills.

But what is the reality? The table below shows the usage statistics and market shares of CSS frameworks as of February 2026. It is interesting to note that Bootstrap is still the most popular framework. Although Tailwind has gained a lot of traction, it only represents a small fraction of the market at 0.3% overall and at 1.6% of the CSS framework market share. Most interesting is that 4 out of 5 websites do not use any CSS framework, implying that they have been built with custom or in-house CSS.

Many experienced designers and developers deliberately choose Vanilla CSS (writing styles from scratch). This shift is especially prominent in 2026, as native browser capabilities have evolved to match or exceed what frameworks once provided. Ultimately, a CSS framework is a knowledge polyfill. It bridges the gap while you learn how to do it yourself. Once you master the underlying language, the 'walls' of the framework start to feel like a cage. Common reasons for NOT using a framework are:

Modern CSS is "Powerful Enough”

In the past, frameworks were essential for handling complex layouts (like grids) and browser inconsistencies. Today, native features have made much of that "boilerplate" code obsolete.

• CSS Grid & Flexbox - These provide layout control that is more flexible than any 12-column framework grid.
• CSS Variables (Custom Properties) - These allow for dynamic theming and "design tokens" without needing a framework's configuration file.
• Modern Selectors - New tools like :has(), Container Queries, and CSS Nesting (now natively supported in all major browsers) allow designers to write clean, modular code that used to require a pre-processor or a framework.

Avoiding "The Framework Look”

Frameworks often come with "opinionated" defaults. If you use Bootstrap or Bulma without heavy customization, your site will look like every other "Bootstrap site.”

• Creative Freedom - Designing from scratch ensures the UI is unique to the brand rather than restricted by a framework’s predefined components.
• The "Override" Tax - Designers often find themselves "fighting the framework" by writing more code just to undo the default styles they didn't want in the first place.

Performance & Code Bloat

Large bundles - Frameworks can add a lot of code to your project. This code is not only unnecessary, but can also slow down your project. This is especially true for large projects. This bloat can be a problem for performance, especially on mobile devices.

• Lighter Bundles - Vanilla CSS allows for 100% "used code," leading to faster load times and better SEO.
• Simpler Maintenance - You don't have to worry about a framework update breaking your site or dealing with deprecated class names.

Semantic Integrity & Readability

Frameworks like Tailwind can lead to "class soup," where a single div has 20+ class names, making the structure hard to read. Separation of Concerns helps maintennace by keeping the design logic in a .css file and the content in the .html file and is a long-standing best practice that frameworks often ignore for the sake of speed of development.

The Business of Web Development

Web development techniques have matured in the last decade. W3C has updated both HTML and CSS standards to accommodate the changing needs of the business of website / application building. These latest versions of the web standards have become powerful enough to reduce the reliance on JavaScript to control the user experience. This maturation of web standards has delivered very comprehensive capabilities. Modern evergreen browsers have become very sophisticated and efficient in handling HTML5 for structure and CSS3 for presentation to the point that JavaScript use can be minimized or, in some cases such as static web pages, can be eliminated. JavaScript can return to its roots to provide a way for the web page to communicate with the server to fetch user data and to hydrate HTML scaffolding.

The widespread adoption and use of web technologies has increased the supply of companies capable of delivering websites to meet the needs of the buyers. This competition has also increased the competitive pressures on web page / application builders. The plethora of frameworks and languages available makes architectural choices critical and has a major impact on project costs and delivery times. Note that all frameworks / libraries work as advertised and do their job to help build web pages, but do so at varying cost points. These changes have shifted the focus from developer-driven innovation to the product manager who has to live in a world of constraints of both time and money.

The product manager has a mandate for managing a project’s profit and loss. The loss part is easy: hire developers and just keep building stuff. The profit side is hard … really hard. In order to have profit, a project needs to have customers that spend money (ie generate revenue). This revenue is the money available to a project manager to build more stuff and, more importantly, debug and maintain stuff that has already been built. Limited revenue also limits the developer team size. All of these constraints force the product manager into trade-offs: user experience is important, only some features can be built, code must be debugged and maintained, customer support has to be paid for, etc.

Although every developer looks for unopinionated tools to use, the reality is that as soon as a product plan is struck, technology decisions are made that create a very opinionated tool kit that the team is required to use. There are many benefits to doing so for development. These benefits also flow directly to the business side as well. Unfortunately, technology stacks are often constructed from many libraries that can add a tremendous amount of complexity that then becomes difficult to manage. This then requires much more labour to make work properly and can delay the product's entry into the market. AI, when used judiciously, can speed up the development process. When not, it can dramatically increase the amount of technical debt that has to be dealt with later. Proper planning becomes paramount.

Another Way Forward

The web world has accumulated a lot of experiences from UX designers on what works on a website and what to avoid. These experiences have been distilled into a set of best practices that can be applied to any web project. So, rather than focussing on new shiny bling, we can focus on the (mundane) best practices that have been proven to work. Goldilocks-CSS is inspired by the work of many people devoted to improving all aspects of web design and technology.

Goldilocks-CSS is a project designed to improve the user experience and to meet the needs of the business rather than the developer alone. Goldilocks-CSS is driven by the Goldilocks Principle and strives to find the sweet spot between a good user experience and efficient project execution. Goldilocks-CSS is more of a modular set of best practices rather than a just a framework. Goldilocks-CSS helps the product manager deliver products in a timely way by:

• Adhering to HTML and CSS standards to future-proof your project;
• Leveraging modern CSS3 to create a “no JavaScript” presentation layer;
• Reducing JavaScript code complexity;
• Using semantic HTML5 for content structure to meet accessibility requirements (and hence reduce litigation);
• Increasing HTML code readability for maintenance work by minimizing presentation layer cruft.
• Being a comprehensive source of truth for consistent web page creation;

The objective is faster time to market at a much lower cost. See Key Business Drivers.