.button.button.button.button

Us volia explicar una cosa sobre el CSS i no sabia com titular-ho.

“Però Adrià, ara amb Flexbox això és molt senzill”. Saps què en fem dels xivatos, al meu barri?

.button.button.button.button funciona

això funciona i és completament vàlid:

.button.button.button.button {
color: red;
}
<div class="button">Holi</div>

.button.button.button.button sobreescriuria els estils de .button.button.button

…que a la vegada sobreescriuria els estils de .button.button que a la vegada sobreescriuria els de .button.

.button.button.button.button {
color: red;
}
.button.button.button {
color: yellow;
}
.button.button {
color: green;
}
.button {
color: blue;
}
<div class="button">Holi</div>
div.button {
color: blue;
}
.button.button {
color: green;
}
<div class="button">Holi</div>
.button {
color: blue;
}
div {
color: green;
}
<div class="button">Holi</div>

Com es calcula l’especificitat?

Ara sí.

0 1 2 0 és més gran que 0 0 2 1
<div class="header">
<h2 class="title">Holi</h2>
</div>
<div class="una classe i mes classes fins que arribem a deu" id="lolnope">Holi</div>
0 | 1 | 0 | 0 > 0 | 0 | 10 | 0

Vale, però .button.button.button.button…funciona?

Funciona! El CSS es menja que escrivim la mateixa classe dues, tres o les vegades. Ho diu l’spec de CSS:

.button.button.button.button // 4 classes: 0 0 4 0
.button.button.button // 3 classes: 0 0 3 0
.button.button // 2 classes: 0 0 2 0
.button // 1 classe: 0 0 1 0

I l’ordre dels selectors no importa?

Clar que importa, animal. Però només quan hi ha dues regles que empaten a màxima especificitat. En aquest cas guanya l’última:

.button.classe { color: red }  // 2 classes: 0 2 0
.button.classe { color: blue } // 2 classes: 0 2 0
div { color: yellow } // 1 element: 0 0 1
<div class="button classe">Holi</div>

Escolta… i el mític !important no es passa tot això pel forro?

Doncs… sí. Bàsicament. El que fa !important és agafar els estils que tenen aquest flag i duplica la taula:

.classe { color: red !important } // 1 classe: 0 0 1 0Com que té important!, el resultat és: 0 0 1 0 0 0 1 0

.button.button.button.button és una ÑAPA

Espero que tothom qui llegeixi aquest article entengui que escriure quatre vegades una classe per augmentar-ne l’especificitat és una ñapa sideral. És tant evident que no volia ni escriure aquest paràgraf, però ja estic comptant les hores perquè algú em digui “eh eh, que ho vas publicar al Medium eh! Això vol dir que ho puc fer servir”.

Ñapa

--

--

Words matter – Software product development, Front-end, UX, design, lean, agile and everything in between. https://afontcu.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrià Fontcuberta

Words matter – Software product development, Front-end, UX, design, lean, agile and everything in between. https://afontcu.dev