La specificità CSS è un argomento che molti nuovi codificatori front end evitano il più a lungo possibile. Sembra complicato, ci sono tutte queste regole, potresti persino dover fare un po 'di matematica! Quanto è zoppo?
In definitiva, puoi solo evitarlo per così tanto tempo. La specificità è un concetto essenziale che devi capire per essere uno sviluppatore efficace. Oggi ti guiderò attraverso i concetti di specificità in modo semplice e facile da capire. È più facile di quanto pensi!
Il concetto centrale di specificità
La specificità è una parola divertente, sin dall'inizio comunica l'idea che questo sarà complicato. Fortunatamente, la sua corteccia è più grande del suo morso. Non c'è motivo per cui tu non possa scegliere maggior parte di questa roba in pochi minuti o meno.
Per rompere l'applicazione pratica della specificità in qualcosa che ognuno può avvolgere, utilizziamo una metafora familiare.
Chi vincerebbe in una lotta?
Quando eri un bambino, il mondo era un posto molto più interessante. Se avessi l'opportunità di rivolgere una sola e unica domanda a un'entità onnisciente, non avresti riflettuto sul significato della vita o avessi fatto una domanda sulla possibilità o meno di raggiungere la pace mondiale, solo una cosa avrebbe avuto importanza. Se Batman e Spiderman si scontravano, chi vincerebbe?
ScrewAttack scrive pezzi enormi dedicati a mettere gli eroi contro gli altri.
C'è questa innata curiosità nei bambini di confrontare costantemente le cose e chiedere quale sia la migliore. Quando invecchiamo, le sfumature di grigio sostituiscono il bianco e nero e perdiamo questa tendenza (noi nerd siamo ovviamente un'eccezione). Per comprendere la specificità dei CSS, dovresti tornare all'infanzia. Quando vengono dati due selettori simili, chiediti sempre: "Chi vincerebbe in una rissa?" La risposta potrebbe rivelarsi fondamentale per il modo in cui si codifica.
Per vedere come funziona, dividiamo alcuni selettori uno contro l'altro e vediamo cosa succede.
E l'ultimo sarà il primo
Per la nostra prima battaglia, dividiamo due selettori essenzialmente identici l'uno contro l'altro. Come facciamo a sapere quale selettore vincerebbe?
Parla di guerra di classe. A parte i giochi, immagina di avere la seguente configurazione sulla nostra pagina web:
Qui abbiamo una corrispondenza uguale. Entrambe le classi sono applicate allo stesso div senza altre complessità per far saltare l'esempio. Lasciamoli sfidare e vedere chi vince?
La scatola è rossa! Ciò significa? .Box? classe vinta Ma perché? Probabilmente già conosci la risposta giusta? È arrivato l'ultimo Cambia i selettori in giro e vediamo il risultato opposto:
Qui il quadrato è blu perché il? .Blue? la lezione è arrivata per ultima, annullando la? .box? classe.
La classe non cambia chi sei
Quella ultima battaglia non era molto interessante. Gli avversari erano ugualmente eguagliati e il risultato era ovvio. Non abbiamo ancora nemmeno raschiato la superficie della specificità. Tuttavia, quello era un fondamento necessario che doveva essere posto.
Ora ci tufferemo in una battaglia un po 'più succosa: ID contro classe.
La nostra configurazione qui è abbastanza simile all'ultima volta, solo invece di due classi, avremo una classe e un ID:
Data la regola che abbiamo appreso l'ultima volta, potresti prevedere che la classe vincerebbe in questo scenario. Vediamo se ciò si dimostra vero.
Un turbamento! Anche se la classe è arrivata dopo l'ID, ha comunque perso. Questo indica che gli ID sono in qualche modo più forti delle classi nella battaglia della specificità.
Pseudo Death Match
Prima di saltare per vedere come funziona tutto questo, diamo un'occhiata a un ultimo esempio. Qui aumenteremo la complessità in modo da poter iniziare ad apprezzare come questa conoscenza possa essere applicata in una situazione reale.
Oh, scatto! Scommetto che anche questo fa inciampare alcuni dei lettori esperti. Molti di noi non conoscono nemmeno la differenza tra i due, tanto meno che si vince una partita di mortalità di specificità. Diamo inizio alla festa.
Cosa sarà? L'h2 sarà rosso o blu? Scopriamolo:
Lo pseudo elemento lo prende! La pseudo classe non ha avuto alcuna possibilità. Ma perché? Cosa sta accadendo dietro le quinte del voodoo qui? Come possiamo essere sicuri del risultato prima ancora di provarlo?
Regole di specificità
La prova e l'errore sono un ottimo modo per imparare, ma alla fine ci sono troppi diversi scenari possibili da percorrere per raccogliere tutte le informazioni che dovremmo sapere. Ciò di cui abbiamo bisogno è un modo difficile e veloce per decidere quali selettori il browser attribuisce maggiore importanza e perché.
Si scopre che esistono regole semplici che governano la specificità. In effetti, c'è anche un pratico sistema di punti:
Un determinato selettore CSS può avere un numero qualsiasi di pezzi di questo puzzle. Il trucco per capire la specificità è aggiungerli. Vince quello con il punteggio più alto. È così semplice.
A nessuno piace la matematica, quindi per testare la specificità di un selettore, possiamo usare l'eccezionale calcolatrice di specificità su Keegan Street.
Con questo fantastico strumento, possiamo digitare due selettori e un punteggio per ciascuno verrà calcolato automaticamente. Il primo selettore nell'esempio contiene una classe, una pseudo-classe e due elementi (punteggio: 0,0,2,2). Il secondo selettore batte le mani con un ID, una classe, una pseudo classe e un elemento (punteggio: 0,1,2,1).
La regola qui, come puoi vedere, è che il selettore con il più alto grado di specificità vince.In altre parole, i selettori più specifici superano selettori meno specifici.
Dato il nostro precedente esempio di una classe contro un ID, possiamo vedere perché l'ID vince. La sua specificità è molto più alta di quella della classe, quindi sostituisce la classe.
Regole speciali
Dato il calcolatore di specificità, possiamo capire la maggior parte degli scenari, ma ci sono alcune sfere di curva che dobbiamo tenere a mente.
- Il selettore universale (*) vale 0
- Quando due selettori hanno la stessa specificità, vince l'ultimo
- Gli elementi non possono mai battere un selettore di classe, anche se li impili
- ! importante è Superman, può battere quasi tutto
L'ultimo qui è il più interessante, quindi diamo un'occhiata a un esempio. Ecco alcuni HTML e CSS da considerare:
Abbastanza semplice, giusto? Usando il nostro sistema di punti, i punteggi delle classi superiori all'elemento, quindi il titolo verrà fuori rosso. Ma se lanciassimo Superman nello scenario?
Ora abbiamo truccato la lotta. In questo caso, il titolo viene effettivamente pubblicato blu! La regola "importante" dice: "ti infastidisce? e fa ciò che vuole.
Meno è meglio
Ora che capisci la specificità, sarai in grado di manipolare il tuo CSS per fare un sacco di cose pazze. Ricorda solo che con un grande potere derivano grandi responsabilità.
Nei CSS, la regola generale è che less is more. Più brevi sono le tue regole, meglio è. Non usare mai .list ul> li> a quando li a funzionerà bene I selettori più corti sono più efficienti e più facili da leggere. A volte devi essere elegante, ma lascia che sia l'eccezione, non la regola.
Un puzzle da risolvere
Aspetta un secondo. Le regole dovevano spiegare i risultati che abbiamo ricevuto nei nostri test iniziali, no? E che mi dici di questo?
Per quanto comprendo le regole, una pseudo classe batte uno pseudo elemento, quindi perché lo pseudo elemento vince qui? Forse abbiamo torto su quale sia l'elemento pseudo, controlliamo il nostro grafico.
No. Avevamo ragione sul fatto che il primo figlio sia la pseudo classe contro la prima riga, lo pseudo elemento. Forse lo stiamo calcolando male? Consultiamo la calcolatrice:
Per quanto riguarda la calcolatrice, il titolo dovrebbe essere blu perché il primo figlio batte la prima riga. Ma non è così che funziona nel browser. Cosa dà? Forse la nostra calcolatrice è rotta, proviamo con un'altra.
Anche secondo questo, il primo figlio dovrebbe avere un valore di specificità più elevato e dovrebbe quindi vincere? ma non è così. Ho provato a usare la sintassi dei due punti, cambiando l'ordine; niente funziona. Lo pseudo elemento vince sempre, indipendentemente da quello che lancio.
Questo è il punto in cui diventa davvero folle, anche se lancio un elemento di stile in linea, che dovrebbe battere quasi tutto, la cosa del dang è ancora rossa!
Concettualmente, questo ha quasi senso. La nostra pseudo classe sta prendendo di mira l'intero elemento h2 mentre il nostro elemento pseudo sta bersagliando solo la prima riga di quell'elemento, che sembra più specifico.
La tua spiegazione qui
Per essere sinceramente onesto, sono un po 'sconcertato qui. Per la maggior parte, la specificità è piuttosto semplice, ma non riesco a spiegarmi questo. Il mio istinto è che è forse una sorta di problema dell'eredità, ma non ne sono sicuro. Potrebbe anche essere qualcosa di simile a :non() che ha un significato speciale per quanto riguarda la specificità (solo gli elementi tra parentesi contano, di per sé è uno zero).
In risposta al nostro piccolo enigma, ecco alcune utili risposte dei lettori!
Tim Pietrusky
"Secondo le specifiche solo un altro elemento che avvolge il contenuto della prima riga è più specifico dello pseudo-elemento di prima linea." - Demo CodePen
Tommaso
? Pensa alla prima linea come un Elemento addizionale (come la span) all'interno del titolo, avvolgendo solo la prima linea, quindi il suo obiettivo è un elemento all'interno della h2, come
prima riga seconda riga
Il colore di sfondo di h2 verrebbe utilizzato (ereditato) solo se non fosse stato dichiarato alcun valore per :: first-line?
Ulteriori letture
Ci sono già stati molti grandi articoli pubblicati sulla specificità, eccone alcuni:
- Specificità CSS: Cose che dovresti sapere - Smashing Magazine
- Specifiche sulla specificità CSS - Trucchi CSS
- Specificità CSS per i giocatori di poker - Sono una macchina fotografica
- Comprensione della specificità CSS - Jonathan Snook
- The Power of CSS Specificity - Temi fai-da-te
Conclusione
Come abbiamo appena visto, la specificità CSS è super semplice, tranne quando è super complessa? Puoi e dovresti imparare le nozioni di base in modo da poter evitare qualsiasi risultato inaspettato, ma quando si arriva a questo, potrebbero essere necessari alcuni buoni vecchi tentativi ed errori di moda se ti imbatti in una situazione appiccicosa.
Cosa pensi? Capisci la specificità quanto dovresti? Puoi spiegare lo scenario sconcertante in cui ci siamo imbattuti sopra?