"Gaming the system" by using the same class name multiple times

Viewed 37

I've seen people using this technique multiple times where I work.

Say I have an element:

<div class="new tile">I'm a new tile!</div>

I want to set the color of this tile as red, so I do so:

.tile { background-color: red; }

It works fine for a couple of months. But then someone else writes a new rule to set color below this one:

div.new { background-color: blue; }

The old rule had a specificity of 0 1 0 and this one has 0 1 1, so the color is changed.
His code is none of my business, but I don't like my tile set to blue, so I "force" it to red:

.tile.tile.tile.tile { background-color: red; }

This new rule has a higher specificity of 0 4 0, so it does set the color of the tile to red.

Is this intentional? It looks like a terrible practice - right up there with (mis)using !important, because this is basically referencing the same class. IMO, they could just patch this in some future CSS revision to only consider one class/element/id once per selector.

Fiddle if you want: https://jsfiddle.net/x634zh7u/

Edit: I see this question is closed as opinion based. What I mean is, does the CSS standard mention this anywhere as to why using the same class multiple times works?

0 Answers
Related