<p class="blue green red">This is some text</p>

Which color is this text going to be?

No cheating, give it a think ??

.

.

.

.

Blue. The answer is blue. ?

Look. I’m not lying. It’s really blue.

See the Pen BLvpER by Swizec Teller (@swizec) on CodePen.

You can use any permutation of blue green red – the text is still blue. Try it! Edit the codepen. Play around πŸ™‚

Did you find the pattern?

CSS classes apply in the order in which they are defined, not the order in which they are invoked. This is not intuitive.

Look: if you switch around the CSS rules, the text becomes red.

See the Pen EgGWNY by Swizec Teller (@swizec) on CodePen.

Same HTML, same CSS classes, different order of definitions. Try it; change the code.

Maybe this is obvious to everyone but me, but I spent an embarrassing amount of time yesterday and today debugging some React components. It hits you when common components have default styling, and you want to override it in a specific instance.

const P = ({ className, children }) => (
    <p className={`italic blue ${className}`}>{children}</p>
); // default P
 
// ...
 
const Error = ({ errorText }) => (
    <p className="red">Red error!</p>
); // doesn't become red

The generic P component returns a <p> element with an italic and a blue class. You can expect text to be italic and blue by default.

Please don’t do that in real life. This is just an example.

It takes a className prop so you can extend classes used.

But when you use the Error component, which produces <p class="italic blue red">Red error!</p>, it’s not red. It’s blue because your CSS defines .red first and .blue second.

?

There is no workaround. This is expected behavior. The relevant part of W3C spec makes no mention of HTML attribute ordering.

How did I go 15 years without ever noticing? ?

Learned something new? Want to become a better engineer? πŸ’Œ

Join 9,400+ people just like you already improving their skills.

Here's how it works πŸ‘‡

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet πŸ“– right away. After that you'll get a thoughtfully written email every week aboutΒ React, JavaScript,Β  andΒ lessons learned in my 20 years of writing code for companies ranging from tiny startups to Fortune5 behemoths.



Man, I love your way of writing these newsletters. Often very relatable and funny perspectives about the mundane struggles of a dev. Lightens up my day. ~ Kostas

PS: You should also follow me on twitter πŸ‘‰ here.
It's where I go to shoot the shit about programming.