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. 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:
<p class="padding-small margin-big color-red">I am a p tag! How cool is that? :)</p>
.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. 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)
<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 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:
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! :)
Top comments (17)
Bold assumption there.
Anyway, small bits of CSS + OOCSS + Atomic is how I work... especially as I use SCSS imports which comes with partials and this works for me. I split my general CSS into helpers/atomic partials. Layout specific into their own partials, merge it all into one file for production. Then again I don't work at Facebook or Google, so maybe I can't relate to the challenges these massive companies have with CSS.
I see no reason for it to be always-changing. HTML/CSS are the backbone of the web, they need to be stable because unlike JS, every single website needs them. There are small but impactful improvements added to CSS every year, the way improvements are added to decades-old languages like Python or PHP.
If anything I think we should be trying to calm down with the JS framework trends.
I still use vanilla JS after 17 years... Making assumptions that nobody develops without frameworks makes it sound like it is you that is the beginner in this equation. You definitely do not know the collective purpose of developers across the entire web... Making blanket statements that support what you think is not adding value to your viewers. Stick to the facts, and don't push your own beliefs. There is no reason for many developers to use frameworks that aren't as fast or as functional as raw experience. Just because you take the easy way out, which may also be the correct way in your instance... Does not universally mean your way is the only way... And the right way. Let's try to be mature and realize... There are many different opinions and styles of Dev... Keep opinions where they belong.
With that very first sentence, I meant that there almost no web projects that use no library or framework.
I agree that HTML and CSS need to be stable, and we have the improvements. But as even Python and PHP had its major updates, maybe CSS could have one too! :)
But again, these are just a few random thoughts... :)
I still don't know if it's a good comparison, by nature of how simply CSS is structured and what it's used for, which is styling, you don't really need a framework. I need only 3 lines of CSS to place an element anywhere in a page. I think this is a feature, not a bug.
Even if they did, do things like Bootstrap, Tailwind not count? Or tools like SASS or LESS? They do what something like jQuery does, which is provide shortcuts/pre-written elements so you don't have to.
I don't know, it just feels like a desire to add complexity – trying to make CSS feel like a 'real boy'/language–that it doesn't need.
GitHub, Hackernews, and Wikipedia all don't use JavaScript frameworks and many others are only using JQuery for compatibility with old browsers at this point.
So scss then?
What don't you like about scoped css? Scoped css doesn't necessarily mean you are required to have a file per component, but even if that were required, is it a bad thing to have component css that matches the component driven development of modern libraries?
I usually use Vue.js so markup, JS and CSS are all in the same template file.
In fact, I like the concept of separation. In my opinion, components are more easily reusable if the design is not included. I mean this way I will be able to make a whole new and consistent design with the same markup and functionality. So even if I can add scoped CSS in Vue templates (and I do for very special CSS rules only), I use global CSS files, too.
But again, I like the concept, and it can be great, but my experience shows that this is something that works for us.
I can understand that, and I agree we are still figuring it out. In React, I find myself often separating my presentation components from my container components to start and that works 85% of the time. In those cases where I have a lot of styles (atoms), I will break that out into its own file.
I prefer CSSinJS because to me, there's less of a context switch and I haven't ran into a scenario where it didn't meet my needs.
Unfortunately, most of the tooling for this pattern doesn't support the shadow dom, so I find myself using Stencil when I create framework agnostic components.
You forgot one of the best, SMACSS. I've employed it with great success for over 5 years. It's used in Yahoo's Pure and my sequel Hydrogen.
Oh yes... you are right! I love that book and the mindset that comes with it, too! :)
I refactoring my client existing UI so often. And some projects using different types of CSS frameworks. Touching the stylesheet is a true nightmare.
My solution is to keep the existing class names untouched across all the HTML files and refactoring the CSS class property with injecting Yogurt utility modules into something like these:
Once the refactoring is done with the Yogurt CSS. The next UI development for me will be faster, cleaner, and efficient.
For a very different take on html page layout, I'd check out Grid Style Sheets. It defines your layout in terms of declarative constraints, which I find to be much more intuitive / readable (not that I've used their library before).
At this point I think the project's dead, but as long as we're talking about what direction we'd like the web to evolve in, I vote for this direction.
The elm-ui package in the elm language ecosystem is addressing exactly this idea. I love the approach it has taken that means never having to write css again.
Elm-ui is no longer maintained?
It is, but it's mdgriffith/elm-ui which used to be style-elements.
thx!