The Semantic Style Sheet Idea

A history of libraries and frameworks

Today there are a large diversity of available css frameworks and libraries with many different solutions to solving the different issues that we regularly face when writing css. Over the years the way developers decided to solve different problems evolved.

One issue which has plagued webdevelopers since the dawn of the internet is the fact that different browsers render html differently. For example, a <p> tag might have padding in one browser, but not in another. This lead to the rise of the CSS reset, a set of css rules designed to standardize the way different html would render across browsers. One reset which garnered alot of attention was the Eric Meyer reset.

In 2011, Bootstrap Version 1 was released. Bootstrap provided a set of css classes from which you could create your website. This eliminated the need to write your own css which made it easier and quicker create responsive websites. The premade classes also meant that everyone who knew Bootstrap, also knew exactly how different classes would look in the browser. Noone in the office knows what Toms ".layout" class does, but everyone knows what the ".container" bootstrap class does.

Bootstrap is still to this day the most used CSS framework but it is being challenged by a wide variety of up and coming frameworks and libraries. The biggest contender being Tailwind. Released in November 2017 it uses the same concept of premade classes but provided a more modern syntax. It also makes use of config JSON files to allow users to create custom classes and rules. This enables developers to create their own design system contained within tailwind.

There are tons of other CSS libraries of frameworks, describing them all would take alot of time. One which does deserve a mention however is Pico.css. It uses a classless approach and simply styles existing semantic html tags. While this probably won't take you the entire way, it provides a great starting point.

The weaknesses CSS and other frameworks or libraries

All modern frameworks attempt to solve the largest issue in css, naming things is **** hard. A set of utility classes is therefore the best option. BUT, they do not provide the most readable experience.

Weaknesses

Html should provide immediate context about the general appeareance of a sites. <flex></flex> is better than <div class="flex"></div>

What Semantic style sheets provides

(CSS resets from the olden days), utility class approach of tailwind and bootstrap, the semantic approach of Pico.css and custom html tags on top of that.

Tailwind was right... kind of <flex class="flex gap-100 flex-wrap-wrap align-items-center"></flex> is better than <div class="flex-layout"></div>

All of this, in a simple css file

Requirements

We should always strive for the smallest possible bundle size.

Provide readable syntax, and immediate context for html, prevent excesive usage of divs. We don't believe in abbreviations, if you have that amount of classes you are probably doing more than you need to, or you should create a custom class.

Naive to believe that a framework or library solves everything, you should be able to write your own css on top of it if needed.