Why Stylesheet Abstraction Matters

I’ve seen a number of comments on blogs and twitter that amount to “You don’t need a new stylesheet syntax, CSS is simple and you’re a moron if you can’t do it.” I agree, CSS is simple. You assign style primitives to elements and some of those primitives cascade down to the elements contained within. I get it. It’s simple to understand. But CSS is not simple to use or maintain. It’s time for stylesheets to evolve so that we can take web design to the next level.

Over the past few years the development of JavaScript frameworks have brought sanity to coding against the DOM – optimizing common coding tasks through the creation of abstractions than insulate us from the nitty-gritty details and providing a common platform for third-party libraries to rely on. As a result, it’s a very nice time to be a front-end programmer. It’s been a couple of years since I’ve bitched about DOM incompatibilities – long enough to almost forget how much work it used to be. It’s also a very nice time to be a user of the web, freed of the need to fuss with DOM primitives and JavaScript intricacies, developers have turned their spare time into much more sophisticated user interfaces.

Creating and maintaining the styles of a website, by comparison, is a total pain in the ass. I’m not talking about the lack of a decent layout module for CSS. I’m talking about the fact that CSS lacks the expressive nature required to create abstractions. The simplicity of the CSS syntax creates complexity for the developer. Every time you have to copy and paste something within your stylesheet instead of reference that same information, you’ve missed an opportunity to make your stylesheets easier to maintain through abstraction. However, if you’ve ever tried to build a DRY stylesheet, you’ve found that the only tool at your disposal is the “class” construct. So the DRYest stylesheet will necessarily force you to put all kinds of presentation classes in your markup, thus making your website less maintainable. Case in point: Shared html partials & includes may need to be styled differently in different contexts.

Let’s be frank, your designs are going to change. New features will be added that make you reevaluate things. You’ll decide you hate some color or font treatment. Your HTML is going to change. New browsers are going to come out with new quirks. Any every time something changes, you have to propagate that change across your stylesheets. If you’re lucky, you can search and replace for the change. But what if you want to change the color #000 to #333? You can’t search and replace for #000. First, you could have usedblack or #000000 or rgb(0,0,0). Second, it’s likely that black is used for other things than what is changing. But what if you had named that color? Now that black is different from all the other blacks. It’s now the “article font color” and changing that abstraction can be done once and propagated for you by a smarter stylesheet syntax.

CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block.

What Is Abstraction?

Abstraction is the ability to define a new concept in terms of other, more simple concepts. It’s nothing to be scared of. When you define a CSS class, you are creating an abstraction. Despite what the name implies, abstractions don’t make things harder to understand – quite the opposite in fact.

Why You Should Care About Demand Abstraction

Just because a website is digital, doesn’t mean it is intangible. It is a real thing that users can see and interact with. And although there’s a lot of code sitting behind a web page to make it work, it is the act of designing that makes a website concrete. It is the designer’s job to build real objects that users intuitively understand. Search boxes, articles, advertisements, navigation, and so on. But the browser doesn’t know what these things are. The browser only understands primitives like font-size, border, padding, images, tags, etc.

So it is the designer’s job to transform the primitive design concepts that a browser understands into real things. This is done by defining new abstractions that never existed before. They are not abstract to us, rather they are abstract to the browser. So when a language gives you the power of abstraction, it gives you the power to build real things. And that is your job. And that is why you should care about, nay, demand a stylesheet syntax that gives you the power of abstraction.

Parts is Parts

No finished product of sufficient complexity is built without first creating intermediate parts. Let’s consider an automobile for example. There are belts, wires, alternators, gears, etc. When a car maker wants to build a car, they don’t build belts and gears. They specify what kind of belts and gears they need and they get them from a third party. No one would think less of BMW for doing so.

We have the same in web design. Grids, buttons, tabs, menus, font rhythm, etc are all considered standard elements for a website. But for the most part, we don’t get their implementation from a third party. When we do, it’s generally viewed with disdain. I think this is unacceptable. Once certain design elements become commodity, there is no reason for you to waste your time building them anymore. You should focus your time on the unique aspects of your design.

Unfortunately, with CSS it’s hard to compose a design from third-party parts. They are hard to customize and once customized, hard to upgrade if there are bugs that need to be fixed. Clearly there must be a better way.

more: