Hey there DEV.to community!

Recently I was thinking about how much I used to use CSS and nowadays I don't. Don't get me wrong, CSS is still running under the hood and empowering the web pages and sometimes other applications' layouts as well. But how much are we involved in CSS actually these days and how much do we get our hands dirty working with it? Since there are awesome frameworks like Zurb Foundation, Bootstrap, Vuetify, Semantic UI, and many more I think the importance of understanding CSS for new developers getting into web development is slightly losing its value. And recently Tailwind is taking over the development world with its utility first approach.

So I decided to write this article explaining my experience with CSS since pure vanilla CSS till advanced frameworks like Vuetify.

What is CSS?

In case you are a newcomer to the web development world you might get confused with all these tools out there named SASS/SCSS, LESS, Stylus, and so many more. CSS (stands for Cascading Style Sheets) is a language (not a programming language) used for describing the presentation of a web page. In a simpler way, CSS is used for giving your web page beauty.

How does it work?

CSS features a concept of selectors and attributes. It is pretty simple, a selector selects an element or multiple elements and applies some styles to them.

For instance:

a {
    color: red;
}

The CSS above applies red color to all links on a web page.

There are two imaginations of how CSS works, many people think CSS selectors apply the styles to the elements and some people think it is the element that selects to use the styles of a CSS definition. But it is good to know that it is CSS that selects your elements.

What is a preprocessor?

A preprocessor is a tool that makes your CSS definition more enjoyable. Imagine wanting to write the CSS below:

.a {
    background: red;
}

.a .b {
    background: blue;
}

A preprocessor like SCSS can make it look better and easier to write:

.a {
    background: red;

    .b {
        background: blue;
    }
}

Though it will be translated down to normal CSS later.

Preprocessors were the first step to kill vanilla CSS. You can barely see someone writing vanilla CSS in an enterprise project. The only people who are using vanilla CSS might be the students who are learning web development in the early stages.

After preprocessors there goes the frameworks

A framework might seem scary when calling it a "FRAMEWORK" but it is literally a pre-written CSS file that helps you move forward without writing lots of CSS codes yourself. For instance, a button might look ugly on a webpage without proper CSS customization. A framework gives you a simple way to apply a default style to your button.

For instance, by using Zurb Foundation you can apply .button class to your links or buttons so they take a good outfit on them:

<a href="#" class="button">My link</a>

So this is another step that strays us further from CSS and understanding it. Using a framework might get really in the way of understanding some advanced concepts of CSS like grids or positioning and it isn't a good thing in my opinion.

Components and new JavaScript way

If you are working with new tools of web development like Vue or React you are highly likely using a component library to render your UI. I'm using Vuetify as my primary UI framework. When using these frameworks you might not even need to work with classes and most components already have a default look. See this simple box with shadows and borders built using Vuetify:

<v-card>Hello there</v-card>

Well, you can see no classes and nothing. Now, what if you want to remove the shadow? Just add an attribute called flat to your element:

<v-card flat>Hello there</v-card>

Here is another step that's killing CSS.

In most projects, you won't even need to write a single line of CSS when using frameworks.

So what is CSS going to be?

This is an absolutely personal opinion. I think CSS is going to be something like Assembly language. Eventually, no one is going to use it directly but it is going to empower other tools, only some people with high knowledge of CSS will be on the side of making and developing higher-level tools.

What are your stances about if CSS is already dying?