Ryddigere CSS med semantisk HTML
Når vi skriver semantisk HTML streber vi gjerne mot rikt beskrevne dokumenter. Disse dokumentene inneholder masse struktur og har mange unike kontekster. Disse kan du benytte deg av for å forenkle CSS-en din samtidig som du går inn i en god sirkel der du rydder opp HTML-en etterhvert som overdreven bruk av klasser og ID-er ikke lengre er nødvendig for å få den stilingen du ønsker.
Bli kvitt overflødig kode
Når folk lærer seg å skrive
HTML etter standardene og begynner å bruke
CSS er det mange som bytter ut alle elementene med
<div>-elementer med klasser og ID-er.
Denne praksisen fører med seg utrolig mye overflødig kode, og gir deg liten verdi mot "gammel" HTML. Hvis vi bruker semantisk HTML vil behovet for alle mulige klasser og ID-er bli mindre fordi dokumentet naturlig har flere unike kontekster.
Gode velgere
Å lage gode velgere i CSS som er lette å jobbe med selv når prosjektet blir stort er en kunst. Det er alikevel noen tommelfingerregler du kan benytte deg av for å gjøre livet litt enklere, og å unngå de verste tabbene:
- Vær generell. Så langt det er mulig, prøv å stile så bredt som mulig. Med mindre det er en veldig god grunn til å lage en velger alá
#content .entry h2 {}, bruk hellerh2 {}, eller så lite som du kan komme unna med. Det er mye lettere å utvide stilsettet til nye områder senere ved å skrive over tidligere velgere dersom de opprinnelige velgerne ikke har så stor vekt. - Vær veldig forsiktig med å avslutte en velger med en ID. Tenk deg godt om før du lager noe alá
#content #rss {}. Er du virkelig helt sikker på at du aldri kommer til å trenge flere enn ett av det elementet på samme side? Noen gang? Veldig sjelden er svaret ja hvis du tenker deg godt om. Med mindre det er snakk om en sentral del av sidelayouten (en kolonne eller lignende) så bruk heller klasser på elementene. - Tenk deg om før du stiler mikroformat-klasser. Selvom tanken er innbydende bør du tenke gjennom saken først. Et konkret eksempel fra denne bloggen er listing-oppsettet på blogginlegg og filmer. De ser helt like ut, men jeg sleit med å gjenbruke
CSS til filmene fra artiklene fordi de ikke bruker (og ikke kan bruke) samme mikroformater. Siden den opprinnelige implementasjonen var knyttet til
hfeedog filmene tilhReviewmåtte en del kode skrives om. - Ikke vær generell med generiske elementer. Elementer
<div>tjener så å si aldri på å bli stilet generelt fordi du da i praksis mister det generiske elementet. I tillegg gir disse generiske elementene ingen mening uten klasse eller ID
Hvilke er dine kjekkeste triks for ryddig CSS?
