Hvordan redusere Classitis i HTML med CSS etterkommer velgere

Har du hørt om classitis? Begynnelsen CSS designere raskt mestre evnen til å lage dusinvis av klasser i en CSS-stilark og anvende dem rikelig til sine HTML-dokumenter. De fleste av disse klassene er unødvendig og bare fyller opp koden og legge til dokumentstørrelsen. En større dokumentstørrelse betyr en tregere nedlasting og økt båndbredde utgifter. Rotete kode plaget med classitis er ikke bra for business; det er ikke den beste praksis, og det hjelper ikke oppnå tilgjengelighet målet om å skille innhold fra presentasjon. Her er hvordan du kan redusere classitis ved hjelp av CSS.

Bruksanvisning

1 Klasser i CSS er ikke en dårlig ting. Men ofte klasser få lagt flere ganger når en etterkommer velger ville gjøre det samme med mye mindre kode lagt til en side.

2

Her er et eksempel på classitis.

3 I CSS vil det være en regel for ID #leftcol og en annen regel for klassen .smalltext. To regler er faktisk nødvendig i CSS, men dette er feil tilnærming.

4

En bedre løsning er en regel for #leftcol og en annen regel for kommer velgeren #leftcol s. Alle ledd i "leftcol" div ville bli stylet av regelen og ingen klasse attributter ville trenge å bli lagt til koden. Med en etterkommer velger koden vil se slik ut.

5 Ved hjelp av en etterkommer velger som #leftcol p har samme effekt på utseendet av avsnittene, men mindre kode må lastes ned av brukeren, noe som gjør det siden lastes raskere mens du fremdeles ser akkurat som du vil.

Hint

• Classitis kan stikke sitt stygge hode i hvert LI element i en liste eller i hvert hyperkobling til en meny. Se etter et element høyere i sidehierarkiet, kanskje en UL eller en DIV med en ID som kan fungere med en etterkommer velger stedet.