What color should the text be? (A CSS Quiz)

Today, I ran two quick polls on Twitter (they may still be running) and then reshared them on Reddit (on r/css: initial and follow-up), Mastodon (front-end.social), and LinkedIn (on the HTML5/CSS3 group: initial and follow-up). As I write this article, results are still coming in, so feel free to answer on your favorite social media before continuing.

Poll 1

The question is simple: without running the code –that part is essential as if you run it, you'll know the answer immediately and would be cheating–what color is the text inside the <div>? 

This is the HTML code:

<div>Hello World</div>

And this is the CSS:

div {
  color: blue;
}

div {
  color: red !important;
}

div {
  color: green  !  important; /* notice the spacing */
}

There are four possible answers:

• Blue
• Red
• Green
• None of the above (Black)

---

Poll 2

Then, there's a follow-up question... which is genuinely the same question, just changing a little bit the code: without running the code, what color is the text inside the <div>?

This time, the HTML code is:

<div id="div" class="div">Hello World</div>

And the CSS:

#div {
  color: blue;
}

.div {
  color: red !important;
}

div {
  color: green   !   important; /* notice the spacing */
}

And again, there are four possible answers:

• Blue
• Red
• Green
• None of the above (Black)

---

I added the code into two demos, where you can see the answers and a short explanation (don't worry, I'll add both at the end of the article so you don't have to go outside):

• Poll 1: https://codepen.io/alvaromontoro/pen/VwENJXE
• Poll 2: https://codepen.io/alvaromontoro/pen/RweOzMv

Now I will add a picture to have some space before adding the solutions and explanations, so you can't see a spoiler while looking at the code or thinking about the questions.

Photo by Michael Dziedzic on Unsplash.

.
.
.
.
.
.
.
.
.
.
.

---

Answers

Poll 1

The text will be Green. If you answered Red, don't worry, you are in good company, as most people answered that color.

Why though? Doesn't Red have an !important? Yes, it does, and so does Green. We add the ! delimiter followed by the important keyword to indicate that a declaration is important. But there is no requirement for them to be together! White spaces are allowed between the delimiter and the keyword: !important is the same as ! important. As we have two !important declarations and their rules have the same specificity, the one appearing last prevails: the color will be Green.

Poll 2

The text will be Red. If you answered Blue, you went with the most common answer on Twitter.

Why though? The id selector is more specific and sets the color to Blue... Right? Wrong! Because the other two rules have important declarations for colors (as explained in the previous section) even when less specific than the id selector. So we look at the relative specificity: .div has a class (1–0) and div is just an element/tag selector (0–1). .div is more specific. Thus the text will be Red.

---

Poster photo by Towfiqu barbhuiya on Unsplash.

Comments

[Sambhav Saxena]

for a long time I used to think that !important means NOT IMPORTANT, wrote inaccurate CSS for a very long time since, made me laugh though.

[Muhammad Sifat Hossain]

It's funny 😅

[Calin Baenen]

This taught me a new, interesting fact about !important in CSS; it is strange but logical that it permits whitespace.

[Alvaro Montoro]

I learned it this weekend 😅😳

[React Hunter]

Great!
You described the keen problem in CSS.
Thank you

[Alvaro Montoro]

That people don't understand how it works and then blame the language and move to a more abstract/complex solutions that fit their knowledge better? I don't think I discovered that. 😅🤣

[Eckehard]

The problem is, that the rules of CSS are too complex to be easily understood by humans. Even if you are a computer, it is hard work to deremine which rule is finally appied.

But computer languages are not made for computers, but for humans. If they where made for computers, they where possibly written in assembler. Languages like Javascript or even HTML or CSS (which are no "programming languages", but markup languages) are written by Humans to tell the computer, what to do. If a language knows 10 different concepts to do the same thing, this is simply confusing. To make totally clear what you want, there would be in the best case only one single way to do it.

[Alvaro Montoro]

Even if you are a computer, it is hard work to deremine which rule is finally appied.

CSS is interpreted live. If it was hard to do, the web wouldn't work because the results would be slow and incorrect. That's not the case. Rules are clear. It is a different programming paradigm that may be more difficult to interpret for people (than say imperative), but much of it's complexity comes from how the developer uses the language.

Languages like Javascript or even HTML or CSS (which are no "programming languages", but markup languages)

Markup languages are a subgroup of programming languages. HTML is a markup language, CSS is a declarative stylesheet language. Neither are imperative but both are programming languages.

If a language knows 10 different concepts to do the same thing, this is simply confusing. To make totally clear what you want, there would be in the best case only one single way to do it.

Having multiple ways to achieve the same thing is the case for most (if not all) programming languages. Each way will have its pros and cons, will be outdated/new, or will have some slight difference with the others. This is not a bug, it's a feature. And it is not exclusive to HTML/CSS, it's everywhere in development.

[Eckehard]

Recently I had a sniplet of Javascript code which I needed to change. It was only 10 lines of code, but it took me three days to even understand what this code does. That was due to the fact that you can use Javascript in an awful lot of ways. If you like puzzle games, this might be fun. But is this efficient?

Writing unreadable code makes program jus hard to maintain, I cannot see what is positive about this? And readability means: readable for humans.

[Alvaro Montoro]

Readability has more to do with the human writing the program than with the language itself (except languages created explicitly to be unreadable). Having multiple ways of doing a thing is not issue with JS, CSS, or HTML, as this happens with every single programming language.

Is it ideal? No. Is it normal? Yes. Does it happen in Java, C/C++, Python, etc.? Yes. Pointing fingers at web development languages for that is placing the blame in the wrong place.

[Eckehard]

You are absolutely right, this is not specific to web languages and there are many old languages that are much harder to read (like assembler or Forth).

I just wanted to emphasize, that readability matters (whatever language you are using). We should always know what a code does, otherwise programming is a game of chance. You have shown some examples where even experienced programmers do not know, what the result will be. This may be fun as an entertainment, but we should avoid those ambiguity in a production code.

If it is hard to understand a code, it will be even harder to maintain. If I had to decide,

• to write a simple code that shows my intention clearly,
• or I can achieve the same goal using an elegant, but highly unreadable trick (just so save some lines of code),

I would prefer the simple solution.

[Anthony Fung]

Thanks for sharing. I think the important lesson here is avoid using !important where possible.

[Alvaro Montoro]

Always.

[𒎏Wii 🏳️‍⚧️]

1. green
2. green (?)

---

Poll 1 was easy; the spaces around the ! just don't do anything, but that's also kind of a boring bit of syntax trivia.

Poll 2 is interesting; I do remember that !important does some wonky stuff to selector specificity, so I kinda just went with gut feeling for that one :)

---

I got curious and started reading the spec, where I also found the actual answer to the first question, so in case anyone wants to read the explanation in the words of the spec:

A declaration is important if it has a !important annotation as defined by [css-syntax-3], i.e. if the last two (non-whitespace, non-comment) tokens in its value are the delimiter token ! followed by the identifier token important. All other declarations are normal (non-important).

---

Okay, I found what I was looking for. I had remembered things slightly wrong: I knew that !important turns something around, but it wasn't the selector specificity; what it does is make user styles overrite author styles, when normally it would be the opposite:

An important declaration takes precedence over a normal declaration. Author and user style sheets may contain important declarations, with user-origin important declarations overriding author-origin important declarations.
[...]
User-agent style sheets may also contain important declarations. These override all author and user declarations.

And if you're wondering what that [...] is, for whatever reason the spec decided that instead of having those to paragraphs together, they should sandwich a completely unrelated paragraph about animations:

Important declarations from all origins take precedence over animations. This allows authors to override animated values in important cases. (Animated values normally override all other rules.)

Which is a really weird choice in my opinion, but that paragraph is also kind of interesting: If you animate an !important property it won't actually animate.

---

All in all, don't use !important unless you're writing some dirty ad-hoc CSS. Use @layer instead whenever you're working on an actual project.

[Nicholas Stimpson]

As well as turning around the precedence of user and author styles, !important also turns around the precedence of cascade layers. So for normal declarations later named layers beat earlier named layers, but for !important declarations earlier named layers win.

[Nicholas Stimpson]

I confess I didn't know whether !important was one token or two. It means of course that as well as white space we can also put a comment between the two. i.e. This is also a working declaration.

div {
  color: tan  ! /* notice the comment */ important; 
}

[Khairunnisaas]

so many thing that i still didn't know about css... great post!

[CitronBrick]

1. red
2. blue