Det er virkelig nemt at finde dig selv at undre sig over, hvordan dit CSS skulle være sådan et rod.

Nogle gange er det resultatet af sjusket kodning fra starten, nogle gange er det på grund af flere hack og ændringer over tid.

Uanset årsagen behøver det ikke at være sådan. At skrive ren, superhåndterbar CSS er enkel, når du starter på højre fod og gør din kode lettere at vedligeholde og redigere senere.

Her er 11 tips til at fremskynde processen, skrive CSS, der er slankere, hurtigere og mindre tilbøjelige til at give dig hovedpine.

1. Bliv organiseret

Ligesom alt andet, betaler det sig at holde sig organiseret. I stedet for tilfældigt at falde i id'er og klasser i den rækkefølge, de kommer til at tænke på, skal du bruge en sammenhængende struktur.

Det vil hjælpe dig med at holde den cascading del af CSS i tankerne og sætte dit stilark op for at drage fordel af stilarv.

Erklære dine mest generiske elementer først, så den ikke-så-generiske og så videre. Dette gør det muligt for din CSS at arve attributter korrekt og gør det meget lettere for dig at tilsidesætte en bestemt stil, når du har brug for det. Du bliver hurtigere ved at redigere din CSS senere, fordi den følger en let læselig, logisk struktur.

Brug en struktur, som fungerer bedst for dig, mens du holder fremtidige redigeringer og andre udviklere i tankerne.

  • Nulstiller og tilsidesætter
  • Links og type
  • Hovedlayout
  • Sekundære layoutstrukturer
  • Formelementer
  • Diverse

    screenshot

    2. Titel, dato og tegn

    Lad andre vide hvem der skrev dit CSS, da det var skrevet og hvem der skulle kontakte, hvis de havde spørgsmål om det. Dette er især nyttigt ved udformning af skabeloner eller temaer.

    screenshot

    Vent et øjeblik ... Hvad er der lidt om farvefarver ? I årenes løb har jeg konstateret, at tilføjelse af en simpel liste over almindelige farver, der bruges i mine stilark, er yderst hjælpsom under den første udvikling og ved senere redigering.

    Dette sparer dig fra at skulle åbne Photoshop for at prøve en farve fra designet, eller se farverne op på webstedet stil guide (hvis den har en). Når du har brug for HTML-koden for den pågældende blå, skal du blot rulle op og kopiere den.

    3. Hold et skabelonbibliotek

    Når du har afgjort en struktur, der skal bruges, skal du fjerne alt, hvad der ikke er generisk, og gem filen som en CSS-skabelon til senere brug.

    Du kan gemme flere versioner til flere anvendelser: et to-kolonne layout, et bloglayout, print, mobil og så videre. Coda (redaktøren til OSX) har en fantastisk Clips- funktion, som gør det nemt for dig at gøre det. Mange andre redaktører har en lignende funktion, men selv en enkel gruppe tekstfiler vil fungere fint.

    Det er vanvittigt at omskrive hver enkelt af dine stilark fra bunden, især når du bruger de samme konventioner og metoder i hver enkelt.

    screenshot

    4. Brug nyttige navngivningskonventioner

    Du vil bemærke ovenfor, hvor jeg erklærede et par kolonne id'er, og jeg kaldte dem col-alpha og col-beta. Hvorfor ikke bare kalde dem col-left og col-right? Tænk på fremtidige redigeringer, altid.

    Næste år skal du muligvis omlægge dit websted og flytte den venstre kolonne til højre. Du skal ikke omdøbe elementet i din HTML og omdøbe id'et i dit stilark bare for at ændre dets position.

    Sikker på, du kan bare omplacere den venstre kolonne til højre og holde id'et som # col-left, men hvor forvirrende er det? Hvis id'et siger venstre, skal man forvente, at det altid vil være til venstre. Dette giver dig ikke meget plads til at flytte tingene rundt senere.

    En af de største fordele ved CSS er evnen til at adskille stilarter fra indhold. Du kan helt omstrukturere dit websted ved blot at ændre CSS uden at røre HTML'en. Så tag ikke din CSS op ved at bruge begrænsende navne . Brug mere alsidige navngivningskonventioner og forbliv konsekvente.

    Forlad position eller stil specifikke ord ud af dine stilarter og id'er. En klasse af .link-blå vil enten gøre mere arbejde for dig, eller gøre dit stilark virkelig rodet, når din klient senere beder dig om at ændre de blå links til orange.

    Navngiv dine elementer ud fra hvad de er, ikke hvad de ser ud. For eksempel er .comment-blue meget mindre alsidigt end .comment-beta, og .post-largefont er mere begrænsende end .post-title.

    5. Hyphens I stedet for Underscores

    Ældre browsere kan lide at blive glitchy med understregninger i CSS, eller støtter dem slet ikke. For bedre backward kompatibilitet, kom i vanen med at bruge bindestreger i stedet. Brug # col-alpha i stedet for #col_alpha.

    6. Gentag ikke dig selv

    Genbrug attributter, når det er muligt, ved at gruppere elementer i stedet for at forklare stilerne igen. Hvis dine h1 og h2-elementer både bruger samme skriftstørrelse, farve og margener, grupperer du dem med et komma.

    Det her:

    screenshot

    Du bør også gøre brug af genveje, når det er muligt. Vær altid på udkig efter muligheder for at gruppere elementer og brug genvejstaster.

    Du kan opnå alt dette:

    screenshot

    med kun dette:

    screenshot

    Det er meget vigtigt, at du forstår den rækkefølge, hvori CSS fortolker disse genveje: øverste, højre, nederste, venstre. En stor uret cirkel, der starter ved middagstid.

    Hvis din top- og bund- eller venstre og højre attributter er ens, skal du også bruge to:

    screenshot

    Dette sætter de øverste og nederste margener til 1em, og venstre og højre margen til 0.

    7. Optimer til lette stilark

    Ved hjælp af ovenstående tips kan du virkelig reducere størrelsen af ​​dine stilark. Mindre belastninger hurtigere, og mindre er lettere at vedligeholde og opdatere.

    Skær ud, hvad du ikke behøver og konsolidere, hvor det er muligt, ved at gruppere. Vær forsigtig, når du bruger dåse CSS-rammer. Du vil sandsynligvis arve masser af masse, der ikke vil blive brugt.

    Et andet hurtigt tip til slank CSS: Du behøver ikke at angive en måleenhed, når du bruger nul. Hvis en margen er sat til 0, behøver du ikke at sige 0px eller 0em. Nul er nul uanset måleenhed, og CSS forstår dette.

    8. Skriv din base for Gecko, Så Tweak for Webkit og IE

    Gem dig selv fejlfinding hovedpine og skriv CSS først for Gecko browsere (Firefox, Mozilla, Netscape, Flock, Camino). Hvis din CSS fungerer korrekt med Gecko, er det meget mere sandsynligt, at det er problemfrit i Webkit (Safari, Chrome) og Internet Explorer.

    9. Validere

    Gøre brug af W3Cs gratis CSS-validator . Hvis du sidder fast og dit layout ikke gør hvad du vil have det, vil CSS validatoren være en stor hjælp til at pege på fejl.

    10. Hold et ryddeligt hus

    Separat browser-specifik CSS til sit eget individuelle stilark, og om nødvendigt med JavaScript, server-side kode eller betingede kommentarer . Brug denne metode til at undgå beskidte CSS hacks i dine vigtigste stilark. Dette vil holde din base CSS ren og håndterbar.


    Skrevet udelukkende til WDD af Jeff Couturier

    Følger du disse metoder, når du koder dine websites? Hvilke andre teknikker bruger du til at oprette bedre kode?