Hva er din CSS-stil?

En av de mest forvirrende aspektene ved å jobbe med CSS (Cascading Style Sheets) er at du kan skrive stiler på så mange måter. I likhet med å skrive prosa, betyr det ikke at du mestrer å skrive kortfattet prosa bare fordi du forstår de grunnleggende reglene for grammatikk og stavemåte.

Erfarne CSS-designere bruker mye tid på å lage en kort, tydelig CSS som er enkel å redigere og oppdatere. Men de som er nye til CSS er tilbøyelige til å skrive flere stiler enn nødvendig og til å lage overflødige stiler.

Ikke bare tar det lengre tid å laste ned overflødig kode til en nettleser, det er mye vanskeligere å redigere eller revidere senere. Og jo mer overflødig koden din er, desto mer sannsynlig er det at du kommer inn i stilkonflikter.

Her er fem tips for å skrive rene, effektive stiler:

• Lag aldri to stiler når én er nok. Du kan for eksempel lage en stil ved å bruke tagvelgeren for alle

  tagger som endrer skriftfamilien til overskriftene dine, og lag deretter en andre stil ved hjelp av en klassevelger som du kan bruke på overskriftene dine for å endre fargen.

  Men det ville vært mer effektivt å definere både fargen og skriftfamilien i samme stil. Husk at du alltid kan gå tilbake og redigere en stil for å legge til en annen regel hvis du vil endre stilens formatering.

• Forkort heksadesimale fargekoder. Du kan definere farger i CSS ved å inkludere hele den heksadesimale fargekoden. Men når du bruker fargekoder som er repeterende, må du bare inkludere de tre første tegnene. For eksempel #ffffff er det samme som #fff; begge vil skape fargen hvit.

• Bruk eksterne stilark. Du kan definere stiler i et internt stilark øverst på hver nettside, eller du kan lagre stilene dine i en ekstern fil med .css-utvidelsen og legge ved det stilarket til alle nettsidene dine. Eksterne stilark er iboende mer effektive fordi de lar deg bruke samme stil på alle eller alle sidene på nettstedet ditt.

  Hvis du for eksempel definerer en stil som gjør alle hovedoverskrifter fete, blå og store, kan du bruke den samme stilen for hver overskrift ved å lagre denne stilen i et eksternt stilark. Deretter, hvis du senere bestemmer deg for at du vil endre overskriftene til grønne, kan du endre stilen i ett eksternt stilark og endre alle overskriftene samtidig.

  Hvis du hadde lagret stilene i et internt stilark, måtte du redigere overskriftsstilen i hver fil.

• Utvikle en navnekonvensjon for stilene dine. Selv om du kan navngi stiler opprettet med klasse- eller ID-velgerne hva du vil, er det best å velge stiler som har mening bortsett fra formateringen. Hvis du for eksempel oppretter en stil kalt .redHeadlines og senere bestemmer deg for at alle .redHeadlines skal være blå, vil du enten ende opp med en blå overskriftsstil kalt .redHeadlines, eller du må endre navn på stilen.

  Og å gi nytt navn til stilen inkluderer å gå tilbake og bruke den på nytt overalt hvor du har en rød overskrift som du vil gjøre blå, noe som på en måte opphever kraften til stiler for å gjøre globale oppdateringer. For å unngå dette problemet, lag stilnavn som refererer til plasseringen eller viktigheten av elementer, for eksempel .mainHeadlines eller .sidebarHeadlines.

• * Test og valider koden din. Selv erfarne CSS-designere gjør feil, og det er derfor Dreamweaver inkluderer så mange flotte verktøy for å teste og validere koden på nettsidene dine. Pass på at du tester CSS for vanlige feil.

  Følgende er to nettbaserte testtjenester som du kan bruke til å se etter feil i CSS-koden. Bare skriv inn URL-en til en hvilken som helst nettside på Internett i adressefeltet på et av disse nettstedene og klikk på Send-knappen for å motta en rapport som viser eventuelle feil i koden din:

  • Den W3C CSS valideringstjeneste

  • XHTML-CSS : Vær gyldig eller dø læring