Questa mattina ho trovato un appunto sulla mia scrivania con alcuni suggerimenti di uno sviluppatore più in alto che stava esaminando alcuni HTML / CSS che avevo messo insieme.
Uno dei suoi suggerimenti era per me "stare lontano dai nomi di classe e ID basati sul contesto come" sinistra "o" destra ". Non utilizzare mai i colori come nomi, attenersi ai nomi semantici in base al contenuto. "
Questo consiglio è valido? Perché?
Sì. Consigli decisamente validi. Le classi CSS, per la maggior parte, non dovrebbero essere legate direttamente a ciò che sembrano. Legali invece a ciò che intendono.
Se stai utilizzando .blue per fornire enfasi, e la progettazione del tuo sito cambia in modo tale che tu non voglia più che l'enfasi sia blu, allora hai una disconnessione tra la visualizzazione dell'elemento e il nome della classe.
Se, invece, hai usato .emphasize , potresti cambiare il colore nel CSS e l'attributo HTML sarebbe comunque significativo. Puoi ottenere la modifica senza dover toccare l'HTML (o, in questo caso, puoi modificare il tag em e ottenere una semantica persino migliore nell'HTML).
Inoltre, rende il tuo CSS più leggibile. Quando cambi .blue , non è ovvio quali elementi della tua pagina stai modificando. Ma se stai modificando .emphasize o .pull-quote , puoi immediatamente dire.
Ci sono casi in cui i nomi di classi non semantiche sono inevitabili, ma questo è soprattutto quando si crea un layout generico. Cose come column o column-left o half o third sono necessarie nei layout basati su griglia.
Quindi, la mia opinione è che il layout non ha bisogno di essere semantico, e di solito non lo sarà. Ma il contenuto dovrebbe essere sicuramente semantico. Chiediti cosa è il tuo contenuto e fai in modo che il nome della classe lo rappresenti, in modo che possa essere utilizzato in modo significativo.
Assolutamente. Vuoi iniziare con il significato semantico, quindi tramite CSS applicare lo stile a quello.
Guardalo dal punto di vista della manutenzione, a lungo termine. Supponi di avere un messaggio di avviso sul tuo sito e in questo momento ritieni che dovrebbero essere visualizzati in rosso arrabbiato.
Dare il tuo avviso <div> la classe "rosso" può sembrare una buona idea ora, ma cosa succede se la ricerca ha dimostrato che un'etichetta gialla di avvertimento è più efficace in seguito? Ora devi andare a rinominare il nome della tua classe e adattare il tuo stile.
Se, tuttavia, ti sei fermato a un nome di classe semantico ("warning"), tutto ciò che devi fare è modificare lo stile associato a quell'etichetta semantica per regolare l'aspetto. Ora, quando è necessario aggiungere margini extra, un bordo, un'ombra esterna, non è necessario utilizzare classi aggiuntive, si stanno ancora impostando avvisi.
Inoltre, usando i nomi semantici, è più facile usare il codice HTML in contesti diversi. Ora puoi associare il codice JavaScript per manipolare tutto div con la classe "warning" e sarà chiaro a chiunque altro usi il tuo codice che cosa stai facendo con quel codice. Il tuo codice JavaScript è meno soggetto a rotture, poiché ci sono molte meno probabilità che la classe CSS sull'avviso <div> cambierà.
Nomi come left , right così come i nomi dei colori sono molto ambigui.
Nella nostra azienda stiamo lavorando a un enorme progetto web. Esistono migliaia di classi css ed è conveniente assegnare un nome alle classi in base al componente con cui lavorano. Questo aiuta te e gli altri a sapere dove viene utilizzata ogni classe CSS. Quindi, quando viene modificato un contenuto di una classe, sappiamo esattamente dove aspettarsi possibili modifiche del look.
C'è un altro potenziale problema qui. Quando assegni alla classe left e in un paio di giorni il design cambia leggermente in modo che l'elemento con left debba andare a destra, non puoi semplicemente modificare il contenuto della tua classe. Dovrai rinominarlo, trovare tutti i riferimenti e rinominare anche quelli. O dovrai creare una nuova classe, e quella vecchia diventerà gradualmente spazzatura inutile.