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?
Top comments (35)
If CSS is dying at the hands of preprocessors and becoming more like an assembly language, I wouldn’t characterize that as dying, just maybe serving a different purpose.
But I’d also say that CSS is actually adopting features of preprocessors gradually and offering more and more natively, so it’s also pleasantly evolving.
Given how useful it is to whip out a
<style>tag and write some plain old css, I’d say css is living on in several quite useful ways.You say old, that's what it is nowadays, an old rusty way of doing styling, it's just to hard for the masses to digest the new approach that's actually taking shape... style components and properties, using the same language, instead of trying to keep alive that crazy tech from the past.
PD. I hate CSS, its just ugly and messy, and dificult to visualize on your head separated from the structure
Well. Actually, CSS is really good. My aim in this article was telling that CSS is going to run in the background for so long, but what developers are going to use on the surface are other tools like SASS or React Styles. I suggest you start liking CSS. It is pretty awesome!
I agree with css being a low level, powerful, ultimate, but last resource to do styling. Today's component frameworks like React has change the way you build user interfaces, and plain css or scss with post processors are not the best match for components. There are new and better ways like combining the power of utility classes with all the benefits you gain with css-in-js. A tool like twing.macro allow you to perfectly mix the beautiful tailwindcss utility classes, with styled-components, emotion, or goober. With these you can open a whole new means to style fast and efficiently.
My point is, in my projects I always try to write as few plain, repetitive css as posible, I really prefer using tailwindcss paired with css-in-js paradigm that allows me to organize much better and choose the best alternative for each case.
Learn CSS and embrace it. Don't just wish that someday it will disappear so you don't have to think about it anymore. That future won't happen for the same reason a website from 1998 still works today.
It's happening flutter.dev/
My stance on CSS dying is that it has a lot of time before it should worry about that, but it is something that might happen in the next 10 years.
Possible but in mu opinion unlikely.
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.
Sounds as dead as Javascript to me, since I once had to get used to compiling my JS.
I'm reading comments like this since to good old days of CoffeeScript :D
And still, JS is going strong ;)
Exactly. And so is CSS, despite people not understanding it or not caring to try.
People, in general, are learning frameworks or abstractions
and when they have to write js or CSS are complaining on the internet
This is why I advocate for learning the basics first.
Because what usually dies first are the abstractions and frameworks like CoffeScript just to name one example.
You characterize shortcuts for common tasks as "killing" CSS, which I think is a bit misguided. Your use (or lack of use) of any tool is context dependent. And my two cents are that knowing the vanilla language enables you to discriminately and appropriately apply frameworks (which you see right now with Javascript).
A better headline for this article might be "Given more libraries and frameworks, some developers (probably beginners) are spending less time learning the intricacies of Vanilla CSS."
A lot of us go for inline styles with CSS-in-JS like Emotion. To my taste that's the most viable approach so far. So yes, cascading feature of CSS seems to be dying, all other stuff? -- Don't think so.
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.
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.
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
If you still have to debug it, it isn't dead.
Hahaha, good answer.
No, but I hate it.
Chera? LOL
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.
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.
Yea it is but it's not going anywhere, they're gonna get right up with few updates, actually we all still need CSS
Some comments may only be visible to logged-in visitors. Sign in to view all comments.