Come ridurre Classitis in HTML con i CSS selettori discendenti

June 11

Avete sentito parlare di classitis? Inizio designer CSS padroneggiare rapidamente la capacità di creare decine di classi in un foglio di stile CSS e di applicarle liberamente ai loro documenti HTML. La maggior parte di queste classi sono inutili e si limita a ingombrare il codice e aggiungere al formato del documento. Una dimensione del documento più grande si traduce in un download più lento e maggiori costi di larghezza di banda. codice Ingombra afflitto da classitis non è buono per gli affari; non è la migliore pratica e non aiuta a raggiungere l'obiettivo dell'accessibilità di separare il contenuto dalla presentazione. Ecco come ridurre classitis usando i CSS.

istruzione

1 Le classi in CSS non sono una brutta cosa. Ma spesso le classi vengono aggiunti ripetutamente quando un selettore discendente avrebbe fatto la stessa cosa con molto meno codice aggiunto a una pagina.

2 Come ridurre Classitis in HTML con i CSS selettori discendenti

Ecco un esempio di classitis.

3 Nel CSS ci sarebbe una regola per la #leftcol ID e una seconda regola per il .smalltext di classe. Due regole sono, infatti, necessari nel CSS, ma questo è l'approccio sbagliato.

4 Come ridurre Classitis in HTML con i CSS selettori discendenti

Una soluzione migliore è una regola per #leftcol e una seconda regola per il discendente del selettore #leftcol p. Ogni paragrafo nel div "LeftCol" sarebbe stato designato dalla regola e dovrebbe essere aggiunto al codice senza attributi di classe. Con un selettore discendente il codice sarebbe simile a questa.

5 Utilizzando un selettore discendente come #leftcol p ha lo stesso effetto sulla comparsa dei paragrafi, ma meno codice che deve essere scaricata da parte dell'utente, rendendo il caricamento della pagina più veloce mentre ancora alla ricerca esattamente come si desidera.

Consigli e avvertenze

  • Classitis può sollevare la sua ripugnante testa in ogni elemento LI di un elenco o in ogni collegamento ipertestuale di un menu. Cercare un elemento più alto nella gerarchia delle pagine, forse un UL o un div con un ID che potrebbe funzionare con un selettore discendente, invece.