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?
Latest comments (35)
Hello Adnan,my friend So what do you suggest instead of css?
Hey there mate
There is nothing to replace CSS behind the scene. I mean we are using frameworks already. I really love Vuetify and hardly get into CSS unless wanted to create something special. Vuetify gives the power to control the CSS attributes in JavaScript or as component attributes.
I couldn't be more agree with you... In the past you hadn't other choice but css, keeping style and structure apart is at all a nice thing, today there are still some advocates to css, but this retrogades are going down... just look at flutter!, it is completely the future in styling... style components and style properties, and composition over fucking inherintance
For a rather custom project you would spend more time customizing the default look of some components lib rather than you'd spend just building everything from scratch. Haven't tried Tailwind so far though, added it recently to my learning list. I think it is the future - no- or little-opinionated highly customizable components. But you still need to know what's under the hood to customize properly. So no, css is not going anywhere.
If you still have to debug it, it isn't dead.
Hahaha, good answer.
I use CSS still, and don't find preprocessors necessary. CSS already has variables, and I like it's syntax just fine the way it is. I think, as a standard, and in terms of usefulness, it is growing.
Vanilla CSS is terrible, low level, inheritance, a language on its own to give style, out of the context of where the real thing is happening (javascript), static, repetitive, I can only guess that you like it because you haven't understand other approaches. CSS will forever be the styling way for browsers, but will become a low level thing. Just look at flutter, try it, and we'll talk then
I have tried flutter, and I did not like it. It is an inaccessible mess, and it needs a build step.
If your main site content is JS, you are doing it wrong. Progressive enhancement is the way to go, never rely on any one component. No JS but have CSS? Great. It should work. JS and no CSS? Working too. CSS and JS but missing things like ES modules or CSS Variables? Let them use the noscript version. Inheritance is powerful and useful, and so is the cascade. I suggest you use CSS more, it takes time to get used to, but it is well worth it. Also, never write all your CSS by hand. Use the browser devtools, you can see changes live and in Chrome at least it has extras like a nice color picker, the shadow editor, and the timing-function editor. JS styling was tried before at Netscape, and it failed miserably. If you do not learn history, you are forever doomed to repeat it.
You can do everything with css, but today there are better ways to apply css, like tailwindcss in combination with twin.macro and css-in-js. Have you tried tailwind?, it's not the same as bootstrap, it's focus is utility classes. Just using their playground you should see the huge difference to reinventing your own class names every time and repetition everywhere. I mean, css is going to be there always because it's pretty powerful, but there are higher level alternatives that are a boost for productivity without the having to pay with efficiency.
I don't like utility classes. If someone made something like tailwind but using css variables instead of classes, I'd jump on in an instant, if it had any benefits over vanilla. I like my content and styles seperate.
With css in js everything is possible, you want separate styles? It got’s you cover, you have alternatives so you can lower the level when you need to, or use utility classes on other cases. Its definitely a matter of taste. I prefer styled components, css in jsx as properties, or tailwind
CSS in JS cannot style elements when JS is off, or in browsers without JS.
CSS is growing and that is awesome. Especially the latest updates which added variables. But preprocessors are still powerful, especially when it comes to the nested selectors.
No, but I hate it.
Chera? LOL
IMO CSS isn't dying, but it's continuously going toward current pre-processors. Current CSS can do some basic calculations and handle variables similarly to SASS or LESS.
It's quite instructive article for people which is new in web programming like me. Good job 👌👍
ahh a lot of assumptions here.
Which looks like a filter bubble to me.
For example yes Tailwind is popular.
Does it replace every other CSS framework? No, not at all.
If you look at websites running then probably bootstrap is still king.
CSS can do a lot of things in a modern browser where you don't need to use a preprocessor.
and what does that preprocessor output in the end? CSS right :D
Oh yeah, the inline CSS argument. This will die earlier when CSS itself.
If you just pick a theme and a framework then yeah you never have to touch CSS.
But if you just work at a bigger project with more custom elements then you have to understand the framework and how to extend that CSS correctly ;)
Just because in tutorials and youtube and twitter talk a lot about things it does not mean that it reflects the reality in software projects.
So yeah to anyone who made it that far:
Learn CSS
Learn Javascript
In general, learn the basics if you want to become good.
If you just learn the frameworks then you are outdated in the next 3 to 4 years.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.