Vad är din CSS-stil?

En av de mest förvirrande aspekterna av att arbeta med CSS (Cascading Style Sheets) är att du kan skriva stilar på så många sätt. Precis som att skriva prosa, bara för att du förstår de grundläggande reglerna för grammatik och stavning betyder det inte att du behärskar att skriva koncis prosa.

Erfarna CSS-designers lägger ner mycket tid på att skapa kort, tydlig CSS som är lätt att redigera och uppdatera. Men de som är nya inom CSS är benägna att skriva fler stilar än nödvändigt och att skapa överflödiga stilar.

Det tar inte bara längre tid att ladda ner redundant kod till en webbläsare, det är mycket svårare att redigera eller revidera senare. Och ju mer överflödig din kod är, desto mer sannolikt är det att du stöter på stilkonflikter.

Här är fem tips för att skriva rena, effektiva stilar:

• Skapa aldrig två stilar när det räcker med en. Du kan till exempel skapa en stil med taggväljaren för alla

  taggar som ändrar teckensnittsfamiljen för dina rubriker, och skapa sedan en andra stil med en klassväljare som du kan använda på dina rubriker för att ändra färgen.

  Men det skulle vara mer effektivt att definiera både färgen och teckensnittsfamiljen i samma stil. Kom ihåg att du alltid kan gå tillbaka och redigera en stil för att lägga till en annan regel om du vill ändra stilens formatering.

• Förkorta hexadecimala färgkoder. Du kan definiera färger i CSS genom att inkludera hela den hexadecimala färgkoden. Men när du använder färgkoder som är repetitiva behöver du bara inkludera de tre första tecknen. Till exempel #ffffff är detsamma som #fff; båda kommer att skapa färgen vit.

• Använd externa stilmallar. Du kan definiera stilar i en intern stilmall högst upp på varje webbsida, eller så kan du spara dina stilar i en extern fil med .css-tillägget och bifoga den stilmallen till alla dina webbsidor. Externa stilmallar är i sig mer effektiva eftersom de gör att du kan använda samma stil på någon eller alla sidor på din webbplats.

  Om du till exempel definierar en stil som gör alla huvudrubriker feta, blå och stora, kan du använda samma stil för varje rubrik genom att spara den stilen i en extern stilmall. Sedan, om du senare bestämmer dig för att du vill ändra dina rubriker till gröna, kan du ändra stilen i en extern stilmall och ändra alla rubriker på en gång.

  Om du hade sparat stilarna i en intern stilmall, skulle du behöva redigera rubrikstilen i varje fil.

• Utveckla en namnkonvention för dina stilar. Även om du kan namnge stilar som skapats med klass- eller ID-väljarna vad du vill, men det är bäst att välja stilar som har betydelse förutom formateringen. Till exempel, om du skapar en stil som heter .redHeadlines och sedan senare bestämmer dig för att alla dina .redHeadlines ska vara blå, kommer du antingen att få en blå rubrik som heter .redHeadlines eller måste du byta namn på stilen.

  Och att byta namn på stilen inkluderar att gå tillbaka och återanvända den stilen överallt där du har en röd rubrik som du vill göra blå, vilket slags förnekar stilarnas kraft att göra globala uppdateringar. För att undvika detta problem, skapa stilnamn som hänvisar till positionen eller betydelsen av element, som .mainHeadlines eller .sidebarHeadlines.

• * Testa och validera din kod. Även erfarna CSS-designers gör misstag, vilket är anledningen till att Dreamweaver innehåller så många bra verktyg för att testa och validera koden på dina webbsidor. Se till att du testar din CSS för vanliga misstag.

  Nedan följer två testtjänster online som du kan använda för att kontrollera om det finns fel i din CSS-kod. Ange bara webbadressen till valfri webbsida på Internet i adressfältet på någon av dessa webbplatser och klicka på knappen Skicka för att få en rapport som visar eventuella fel i din kod:

  • Den W3C CSS valideringstjänst

  • XHTML-CSS : Be Valid or Die Learning