Hvad er din CSS-stil?

Et af de mest forvirrende aspekter ved at arbejde med CSS (Cascading Style Sheets) er, at du kan skrive stilarter på så mange måder. Ligesom at skrive prosa, betyder det ikke, at du mestrer at skrive kortfattet prosa, bare fordi du forstår de grundlæggende regler for grammatik og stavning.

Erfarne CSS-designere bruger meget tid på at lave en kort, klar CSS, der er nem at redigere og opdatere. Men dem, der er nye til CSS, er tilbøjelige til at skrive flere stilarter end nødvendigt og til at skabe overflødige stilarter.

Ikke alene tager redundant kode længere tid at downloade til en webbrowser, det er meget sværere at redigere eller revidere senere. Og jo mere overflødig din kode er, jo større er sandsynligheden for, at du løber ind i stilkonflikter.

Her er fem tips til at skrive rene, effektive stile:

• Lav aldrig to stilarter, når én er nok. For eksempel kan du oprette en stil ved hjælp af tagvælgeren for alle

  tags, der ændrer skrifttypefamilien af ​​dine overskrifter, og opret derefter en anden typografi ved hjælp af en klassevælger, som du kan anvende på dine overskrifter for at ændre farven.

  Men det ville være mere effektivt at definere både farven og skrifttypefamilien i samme stil. Husk, at du altid kan gå tilbage og redigere en stil for at tilføje en anden regel, hvis du vil ændre stilens formatering.

• Forkort hexadecimale farvekoder. Du kan definere farver i CSS ved at inkludere hele den hexadecimale farvekode. Men når du bruger farvekoder, der er gentagne, skal du kun inkludere de første tre tegn. For eksempel er #ffffff det samme som #fff; begge vil skabe farven hvid.

• Brug eksterne typografiark. Du kan definere typografier i et internt typografiark øverst på hver webside, eller du kan gemme dine typografier i en ekstern fil med .css-udvidelsen og vedhæfte det typografiark til alle dine websider. Eksterne typografiark er i sagens natur mere effektive, fordi de giver dig mulighed for at bruge den samme typografi på enhver eller alle sider på dit websted.

  Hvis du f.eks. definerer en typografi, der gør alle hovedoverskrifter fed, blå og store, kan du bruge den samme typografi for hver overskrift, hvis du gemmer den typografi i et eksternt typografiark. Så, hvis du senere beslutter dig for, at du vil ændre dine overskrifter til grønne, kan du ændre typografien i ét eksternt typografiark og ændre alle overskrifter på én gang.

  Hvis du havde gemt typografierne i et internt typografiark, skulle du redigere overskriftstypografien i hver fil.

• Udvikl en navnekonvention for dine stilarter. Selvom du kan navngive stilarter, der er oprettet med klasse- eller id-vælgerne, hvad du kan lide, er det bedst at vælge stilarter, der har betydning bortset fra formateringen. For eksempel, hvis du opretter en typografi kaldet .redHeadlines og så senere beslutter dig for, at alle dine .redHeadlines skal være blå, vil du enten ende med en blå overskriftsstil kaldet .redHeadlines eller bliver nødt til at omdøbe stilen.

  Og at omdøbe stilen inkluderer at gå tilbage og genanvende den stil overalt, hvor du har en rød overskrift, som du ønsker at blive blå, hvilket på en måde afviser stilens magt til at lave globale opdateringer. For at undgå dette problem skal du oprette stilnavne, der henviser til placeringen eller vigtigheden af ​​elementer, såsom .mainHeadlines eller .sidebarHeadlines.

• * Test og valider din kode. Selv erfarne CSS-designere laver fejl, og derfor indeholder Dreamweaver så mange gode værktøjer til at teste og validere koden på dine websider. Sørg for at teste din CSS for almindelige fejl.

  Følgende er to online testtjenester, som du kan bruge til at kontrollere for fejl i din CSS-kode. Indtast blot URL'en på en hvilken som helst webside på internettet i adressefeltet på et af disse websteder og klik på knappen Send for at modtage en rapport, der viser eventuelle fejl i din kode:

  • Den W3C CSS Validation service

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