CSS: quando usare quale selettore

Questa non è solo una questione di stile. È una questione di prestazioni e manutenibilità. Aneddoticamente, alcuni selettori sono difficili da implementare in modo efficiente per i browser. Ad esempio, il selettore di pari livello A ~ B o il selettore discendente A B . E ovviamente il selettore universale * . A meno che non siano effettivamente necessari, questi dovrebbero essere evitati. La cosa che è veramente veloce sta usando i nomi delle classi o gli ID. La virgola A, B non è considerata un selettore.

Quando inizi con i CSS, potresti essere tentato di scrivere qualcosa come ul.#steps > li.item-without-bullet . Questo non va bene per vari motivi:

• Non utilizzare ID nei selettori, perché qualsiasi ID può essere utilizzato solo una volta in un documento. Ciò ti impedisce di riutilizzare lo stile.
• Evita i nomi degli elementi nei selettori. L'HTML è pensato per essere usato come markup semantico che evidenzia ciò che ogni elemento significa . Questo dovrebbe essere tenuto per lo più separato dallo stile. Continuerai a voler applicare direttamente gli elementi di stile (ad esempio utilizzando un carattere diverso solo per le intestazioni o impostando l'altezza della linea per i paragrafi). Va bene, e non userei le classi per quello (yuck), ma non dovresti fare riferimento ai nomi degli elementi quando disegni qualcosa di speciale come una barra di navigazione, un carosello di immagini o una citazione di pull, o ....
• Evita nomi di ID e classi che si concentrino troppo sull'effetto di testo che forniscono (potresti usare anche attributi di stile inline), e invece usa nomi di classi come elementi personalizzati o modificatori di elementi, come modo per aggiungere la tua semantica. Una classe come red-text non è "semantica" come error--fatal .
• Evita il selettore discendente A B e il selettore figlio A > B . Di solito puoi codificare le informazioni necessarie attraverso i nomi delle tue classi, ad es. steps e steps__step . Puoi fidarti che chiunque applichi le classi alla struttura HTML rispetterà il corretto nidificazione, dato un nome di classe sufficientemente auto-documentante.

Consideriamo seriamente uno schema di denominazione rigoroso come BEM ( Modificatore di elementi di blocco ). Sì, è un incredibile overkill, ma l'utilizzo dello schema di denominazione BEM può aiutarti a strutturare correttamente il tuo CSS. Utilizza esclusivamente nomi di classi e generalmente non usa selettori.

Penso che sia un po 'di preferenza personale, tuttavia in genere scelgo di usare nomi di classi su qualsiasi altra cosa in modo che se decido di aggiungere / rimuovere uno strato di nidificazione di quanto non romperò il mio selettore.

Quindi, mentre potrei mettere una classe su un div "toolbar", potrei non decorare un contenuto ul o singoli elementi. Vorrei selezionare il contenitore in base alla classe, quindi sapere che cosa c'è sotto che sono i pulsanti della barra degli strumenti.

Come per la maggior parte delle cose relative ai CSS, le prove e gli errori vincono la giornata: buona fortuna!

Ogni tipo di selettore di CSS ha il suo posto. La progressione dell'uso che descrivi è naturale perché rispecchia la progressione del design da generale a specifico. Esistono diversi tipi di selettori che ci aiutano a raggiungere i nostri obiettivi di progettazione (ne ho forniti due esempi tra parentesi):

• selettori di elementi (p, div) per definire lo stile generale
• selettori di stato (: hover,: checked) per fornire feedback sull'interazione dell'utente
• selettori di classe (.nav, .span5) per ulteriori gruppi di stile di elementi simili
• id selector (#container, #result) per personalizzare gli elementi unici
• selettori di attributo ([target = _blank], [lang | = en]) per variare lo stile con i valori degli attributi
• selettori di posizione (:: after, :: first-line) per un controllo più preciso
• i selettori di relazioni (A B, A > B) non sono altrettanto efficienti, ma possono essere utili