CSS architecture?
stereobooster
Originally published at
stereobooster.com
on
・1 min read
Have you heard the term “CSS architecture”? You can search the internet for it, for example, there is the article by Philip Walton. I understand it as a set of best practices to make CSS scalable, e.g. some rules which allow you to write a lot of CSS before it becomes unmaintainable and collapses due to incidental complexity.
Let’s step back for a moment. What is CSS? CSS is a declarative language for layout and painting engine. Right?
Declarative languages
There are a lot of declarative languages, for example, SQL, YAML (as config), HTML (some people would argue this is not a programming language, but markup).
Have you heard about SQL architecture? There are database architects, but they not bothered with how to write big SQL queries, they rather working on the database itself, so it’s not the same.
Layout engines
There are a lot of layout engines, for example, flutter, subformapp, yoga, layoutkit, Render (see #layout-engine).
It seems they don’t have dedicated practices on how to write a lot of layout code. Maybe they don’t have the same requirements, maybe layout and visual presentation in their case can’t be separated from components.
🤔 Wondering
Did we, by any chance, gone too far with this CSS thing? Maybe it brings more incidental complexity in the long run than it solves essential complexity?
Posted on by:
Discussion
Isn't ORM kind of a SQL architecture? Developers try to framework and bootstrap all kinds of things.
The problems we have now with CSS (and html for that reason) revolve around componentization as a means to master complexity. Thats an aspect that simply wasn't important when those languages were designed, because websites weren't meant to be as complex as they're now.
In that sense, I'd argue we didn't go too far with CSS, we did go too far with websites.
Also, most web projects don't need to be a complex web app and most of the architectural problems we have now are self made and unnecessary.
P.S. I like your latest attempts on discussing CSS. Keep it going! :)
Not in my opinion. This is rather translation layer. It is closer to SASS if we can compare it.
Thanks)
I'd call it CSS structure.. to make it look smaller 🙂
But it did become a problem big enough in my last company that multiple engineers sought out a solution to it. And the solution turned out to be strictly using BEM/SuitCSS style and not mixing it with utility CSS style.
(there are multiple solutions though... you can go full utility-style like tailwind css.. but you can't mix and match them)
Nope. This architecture thing comes into play if you have really large apps with lots of CSS code to handle. Imagine having to manage 50k lines of CSS the way we do in our everyday projects!
Thanks for the clarification. Case closed. Everybody can go home. Nothing to see here.