Rethinking CSS
Tags: frontend, css, html, webdev
Published: 2018-09-29 11:15:34

---
title: Rethinking CSS
published: true
description: I few thoughs on CSS and how it could be improved. Share your ideas, too! :)
tags: frontend, CSS, HTML, webdev 
---

I love front-end and back-end. Both the slowly changing, robust back-end technologies and the always-changing front-end frameworks. 

But when I say always-changing I make a mistake. As like no one would use VanillaJS nowadays except for beginners, millions of people use pure CSS. And I was thinking... why is it happening? CSS is like a stable technology that is evolving but not in the way that the JavaScript universe does.

So... I have a question for you: Would you change CSS into something else? If yes, how? If no, why? 
Before going on, please think about it for a few seconds...

I googled 'Rethinking CSS' looking for ideas of other developers, and the very first thing I found was [John Polacek's thoughts](http://johnpolacek.com/rethinking/). I guess a lot of you have read it previously. It is about atomic or functional CSS, so this will be the first thing I would like to comment on.

## 0. Atomic CSS

The idea is simple. Make CSS classes for commonly used lines and you will have millions of classes and your HTML markup will be a bit longer. To show you an example: 

```html
<p class="padding-small margin-big color-red">I am a p tag! How cool is that? :)</p>
```
```css
.padding-small { padding: 10px; }
.margin-big { margin: 20px; }
.color-red { color: red }

```
It looks different to what people are usually used to but I think it is not really 'rethinking' it is just another way of using the elements of the language. So I was thinking of other ways...

## 1. Object-Oriented CSS

Being a Java developer this is the first thing that came to my mind, so again I googled it up and I found a tutorial on [Envato](https://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986). If you check the article it is again another structure, trying to look like object-oriented. 

I guess I would say that it would look much more like OOCSS. I know modern day tools like SASS and LESS give us an easy way to do the same.
(Sorry I could not use highlighting as it showed errors obviously)

```
.card {

  {
    color: #333;
    padding: 20px;
    background-color: white;
  }
    
  .title {
    font-size: 24px;
    margin: 10px;
  }

  .body {
    ...
  }

}
```

## 2. OOCSS + Atomic

If we want to make it more OO and we want to get the advantages of the atomic thinking, then consider this:

```
.padding-big { padding: 20px; }
.margin-small { margin: 10px; }

.card {

  {
    padding-big;
    color: #333;
    background-color: white;
  }

  .title {
    margin-small;
    font-size: 24px;
  }

  .body {
    ...
  }

}

```

## 3. Web components + CSS

What if we could do something like this? (I really don't like CSS classes)

```html
<card>
  <title>I am an awesome CARD! :)</title>
  <body>...</body>
</card>
```

```
card {

  {
    color: #333;
    padding: 20px;
    background-color: white;
  }
    
  title {
    font-size: 24px;
    margin: 10px;
  }

  body {
    ...
  }

}
```
Throughout these examples I tried to make them resemble the original syntax, but what if I could change that, too?


## 4. Other structures 

Again I googled it up and I found [YAML CSS](http://www.yaml.de/) which is another modular framework, nothing like I was looking for.

I have something else on my mind: CSS has its simple syntax, but what if I could use some other structures, too? Like YAML, which is a lot more readable in my opinion:

``` yml

card:
  color: #333
  background:
    color: white
  title: 
    margin: 
      bottom: 10px
  body: 
    font:
      weight: normal
    padding: 20px
    
```


## +1. Small bits of CSS

In the latest JS frameworks we have scoped CSS, so somehow it means that we can have CSS in every file. But some people don't like it, including me, because we are used to having 1 big static CSS file. Unfortunately, over time it can grow very long. 

What if we had them in smaller CSS files, but still at the same place? 
I could imagine having a global one containing utility classes and the others could be by components.

```
css
  -- global.css
  -- card.css
  -- slider.css
  -- navigation-bar.css
  -- ...
```
This way CSS would also be a lot more easily reusable, I think. Of course, you can organize your rules this way even now, and it is an improvement to what we usually have in our projects, but it is again something that could be game-changing.

## Summary

I know that many people are working on how to be able use CSS easier and smarter but maybe as a community we can share the knowledge to make a 'new CSS'. 
I had a few ideas on my mind and I am just simply interested in your opinions, so please share it! :)