Why CSS is Difficult

8 min readJul 15, 2019

I’ve worked with CSS for several years, not every day, but whenever that is needed. Recently I think I stumbled upon one reason why it can feel so difficult to get the CSS-styles right. Unlike in most (other) programming languages the order of CSS class-definitions, not their order of application, determines the effect they will have. That can produce unexpected and confusing results for programmers used to other programming languages, as explained below. I also propose a remedy which would require a simple addition to the CSS-standard.

1. Example Problem

I have the following CSS-classes that should allow me to easily style some text as code, some text in red and some as having pink background:

.pinkBG 
{ background-color: Pink;
} 
.red 
{ color: Red;
}  
.code 
{ font-family : courier;
  background  : #eaeaea;
  padding     : 12px;
  color       : Navy;
  font-weight : bold;
  width       : 200px;
}

I now use the above CSS-classes in HTML:

<div class="code">
 This is Code
</div><div class="red pinkBG code">
 This is Red Code
</div>

But something is wrong. It is as if CSS-classes ‘red’ and ‘pinkBG’ have no effect at all. What I see in browser is:

What happened? If you are a seasoned CSS-pro you will quickly tell me that the fault is in my CSS. Why because the order of the classes I specify for my DOM-elements in the HTML does NOT matter. Only thing that matters is the order of CSS-class definitions in the CSS . And they just happen to be in an order which produces the above output.

2. Required Remedy

It all works like I want if I “just re-order” my CSS to:

.code 
{ font-family : courier;
  background  : #eaeaea;
  padding     : 12px;
  color       : Navy;
  font-weight : bold;
  width       : 200px;
}
.pinkBG 
{ background-color: Pink;
} 
.red 
{ color: Red;
}

Now the output looks like this:

Great that is just what I wanted!

3. The General Problem

Do you see a problem with above solution? It is that I as the user of the CSS-stylesheet cannot specify the order in which the CSS-classes should be applied to the element to which I add them to. What if someone else wrote the style-sheet, someone who knows how to write CSS? Should I plead with them to make the change to their style-sheet? Will they?

Can they make the change without causing many adverse side-effects elsewhere? Maybe that style-sheet is used in a thousand places already, changing it could be dangerous. So maybe I just copy their style-sheet and modify my copy as I want. But then when they fix something really important in the original, I will be out of the loop, the fixes won’t be applied to my part of the website.

The combined effect of the style-classes I assign to DOM-elements is determined by the order in which those classes are written in style-sheet. And that order can only be the one order that it is.

In my HTML I can NOT write:

<div class="red pinkBG code">

AND expect the attributes of the CSS-class ‘red’ to be applied first, then the attributes of the class pinkBG and then the attributes of the CSS-class ‘code’. It doesn’t work that way. I would like it to, more power to the user of the style-sheet. But it doesn’t.

If I reorder the references to those classes to read:

<div class="code red pinkBG">

what happens? Nothing. There is no change in the output.

Only thing that matters is the order in which those classes are defined in my CSS stylesheet. I’m repeating myself because this is a very important point.

It means that my understanding of what individual CSS-classes do doesn’t “add up”, doesn’t “sum up” to understanding what they do in combination. In addition to knowing their individual definitions I also must know. must spend some time to figure out these THREE (3) additional facts:

Whether CSS-class “code” is defined before CSS-class ‘red’, or after
Whether CSS-class “code” is defined before CSS-class ‘pinkBG’, or after
Whether CSS-class “red” is defined before CSS-class ‘pinkBG’, or after?

Those questions need to be answered to know what your web-site will look like. Hey, maybe IBM’s “Watson” could tell us that. Or maybe we need a Sherlock Holmes.

Note you can not choose to NOT order your CSS-classes. They are always and must be in some order. The problem is that their order determines their effect on your web-site. The question then naturally arises, what is the best order for them?

4. Is there a Best Ordering of CSS-classes?

The way CSS currently works means that whoever writes the style-sheet must try to come up with the one best possible order for the style-classes defined in it. But does such one best ordering even exist? If you have 7 CSS-classes you have

7 * 6 * 5 * 4 * 3 * 2 == 5040

different ways of ordering those 7 CSS-classes. Which order is the best? Not sure. If you have nine (9) CSS-classes you must choose from 362,880 alternative orderings for them. How many CSS-classes do you have?

So what can you do trying to make your living using CSS? There is one Rule of Thumb I can tell you, maybe others can tell you more ...

5. How to order the CSS-classes of a style-sheet

Answer: If CSS-classes have a different number of style-attributes, place the ones with fewer attributes after the ones with more attributes.

The reasoning behind this rule is that with fewer number of properties there is less chance of their attribute-values conflicting with those of some other class .By using such a class you will get exactly what you ordered. Having the simpler classes defined later means the effect of simpler classes will override, their effect will be part of the output . You can then choose to add then to your HTML, or not, and they will affect just the one attribute associated with them.

Note that in my example above, this rule got me the results I wanted.

Observation: Strive to minimize number of style-attributes per class. If every style-class has just one attribute the problem mostly goes away. But as seen from the example that is not always what we want. We want code-section to have certain font, certain background etc. as seen in the below picture.

6. General Solution

A much better solution would be if the order of class-names attached to a DOM-element would be the order in which those CSS-classes get applied as styles.

Then the user of the style-sheet could say what order they want the style-classes to be applied to any particular DOM-element. Yes. Power to the user. Wouldn’t that be much better for everybody?

Are there some good reasons why CSS style-classes don’t currently work this way? I don’t know, tell me in the comments-section if you do.

Maybe in a future version of CSS this will be fixed. Maybe a future version of CSS will have a directive that says, “Use the order specified by the user, not the order in the style-sheet”. Wouldn’t that be great?

Hey, you can have your T-Model Ford in any color, as long as it is black. You can have your CSS-classes applied in any order, as long as it is the order in the stylesheet. Does that make sense?

7. House of Cards

As discussed when you have (just) nine CSS-classes there are 362,880 different orderings of them. Choosing one ordering over another can change the look of your website and can make it good bad or ugly. It can even break its functionality if it causes some interactive element to become invisible.

Naturally most of the 362,880 orderings produce the exact same result. But which ones? That is not obvious from the outset. This is what makes CSS difficult. You cannot just study the definitions of individual style-classes alone. You have to study them all together, to understand what each of them does in combination with others. CSS-classes don’t add up!.

1 + 2  == 2 + 1

Yes, as we would expect. But:

CssClass_A + CssClass_B  !=  CssClass_B + CssClass_A

Imagine how hard it would be to do arithmetics if it was the case that

a + b  !=  b + a

Now as a metaphor imagine that one “coordinate” of your web-site is which of the 362,880 orderings of its CSS-classes it uses. That is like one point on the X-axis of 362,880 points. Say you choose the x-coordinate value 123,456.

You later realize that to get the style of some element right you must change that to be x == 123,457. That gives you what you want for that element. But that change can also have unexpected side-effects all over the place.

You have made a very small change, like moving a card in a house-of cards just a little. This small change can change the visible styles of your web-site in unexpected ways, make it good, bad or ugly. And fragile.

8. Imagine

What if your favorite programming language behaved like CSS? You have a JavaScript program consisting of functions c(), b() and a(). It calculates some result and shows it on console or on your web-page. Maybe it calculates a color to be used in some part of your web-site.

One day, you decide to clean up your code and re-order the function-definitions into alphabetic order a() first, b() second, and c() last. A week later your customers are furious. Their users can no longer read parts of their web-site. Why? The background-color of those parts has become the same as its text-color.

You would be complaining to your programming-language vendor loudly, wouldn’t you? You would complain: “Dear Sirs it is very difficult to create programs that do what we want in your PL. Every time we re-order our function-definitions the results are different!”

Your PL-vendor replies: “Dear Customer, we have looked at your problem and agree it is really crazy that our JavaScript should behave this way. We can not change this behavior however because we need to be backwards-compatible. But we do have a solution in next version. It only requires that you put the following directive at the beginning of your program:”

DefinitionsOrderDoesNotMatter = true

9. Coda

Making a web-site with CSS is like building a house of cards. Sorry, just had to say that. Still, CSS is the best we have.

What we can do is add the style-classes with fewer attributes after the ones with more attributes.

And read ALL of the style-sheet to understand what ANY PART of it does, in combination with other parts. Take a “holistic approach” to understanding your CSS. You must. It can not be understood piecemeal in its current version.

And petition your CSS-vendor to make it so that in next version there is an option to write CSS so that order of style-class-definitions does not matter.