DEV Community


Posted on • Originally published at on

CSS architecture?

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?

Top comments (4)

iamschulz profile image
Daniel Schulz • Edited

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! :)

stereobooster profile image

Isn't ORM kind of a SQL architecture?

Not in my opinion. This is rather translation layer. It is closer to SASS if we can compare it.

P.S. I like your latest attempts on discussing CSS. Keep it going! :)


munawwar profile image
Munawwar • Edited

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)

stereobooster profile image
stereobooster • Edited

Thanks for the clarification. Case closed. Everybody can go home. Nothing to see here.