Det er veldig enkelt å finne deg selv lurer på hvordan ditt CSS skulle bli et slikt rot.

Noen ganger er det resultatet av slurvet koding fra starten, noen ganger er det på grunn av flere hack og endringer over tid.

Uansett årsak, trenger det ikke å være slik. Det å skrive ren, superhåndterbar CSS er enkel når du starter på høyre fot og gjør koden enklere å vedlikeholde og redigere senere.

Her er 11 tips for å øke prosessen, skrive CSS som er slankere, raskere og mindre sannsynlig å gi deg hodepine.

1. Bli organisert

Akkurat som alt annet, lønner det seg å holde seg organisert. Snarere enn å slippe tilfeldig i id og klasser i den rekkefølgen de kommer til å huske, bruk en sammenhengende struktur.

Det vil hjelpe deg med å holde den cascading delen av CSS i tankene og sette stilarket ditt opp for å dra nytte av stilarv.

Erklære dine mest generiske elementer først, så ikke-så-generisk og så videre. Dette gjør at CSS på riktig måte arver attributter og gjør det mye lettere for deg å overstyre en bestemt stil når du trenger det. Du blir raskere ved å redigere CSS senere, fordi den følger en lettlest, logisk struktur.

Bruk en struktur som fungerer best for deg mens du holder fremtidige redigeringer og andre utviklere i tankene.

  • Tilbakestiller og overstyrer
  • Lenker og type
  • Hovedoppsett
  • Sekundære layout strukturer
  • Formelementer
  • Diverse

    Skjermbilde

    2. Tittel, dato og tegn

    La andre vite hvem som skrev ditt CSS, da det ble skrevet og hvem du skulle kontakte hvis de hadde spørsmål om det. Dette er spesielt nyttig når du designer maler eller temaer.

    Skjermbilde

    Vent litt ... hva er det litt om fargepulverfarger ? Gjennom årene har jeg funnet ut at det å legge til en enkel liste over vanlige farger som brukes i stilarkene, er svært nyttig under innledende utvikling, og når du foretar endringer senere.

    Dette sparer deg for å måtte åpne Photoshop for å prøve en farge fra designet, eller slå opp fargene i nettstedets stilguide (hvis den har en). Når du trenger HTML-koden for den spesifikke blåen, blar du bare opp og kopierer den.

    3. Hold et mallbibliotek

    Når du har avgjort på en struktur som skal brukes, ta ut alt som ikke er generisk og lagre filen som en CSS-mal for senere bruk.

    Du kan lagre flere versjoner for flere bruksområder: et to-kolonne-layout, en bloggoppsett, utskrift, mobil og så videre. Coda (redaktøren for OSX) har en fantastisk Klipp- funksjon som lar deg gjøre dette enkelt. Mange andre redaktører har en lignende funksjon, men selv en enkel gruppe tekstfiler vil fungere pent.

    Det er vanvittig å skrive hver og en av stilarkene dine helt fra begynnelsen, spesielt når du bruker de samme konvensjonene og metodene i hver enkelt.

    Skjermbilde

    4. Bruk nyttige navnekonvensjoner

    Du vil legge merke til over hvor jeg erklærte et par kolonne id og jeg ringte dem col-alpha og col-beta. Hvorfor ikke bare kalle dem kol-venstre og kol-høyre? Tenk på fremtidige endringer, alltid.

    Neste år må du kanskje designe nettstedet ditt og flytte den venstre kolonnen til høyre. Du må ikke endre navnet på elementet i HTML-en din og endre navn på ID-en i stilarket bare for å endre posisjonen.

    Visst, du kan bare flytte den venstre kolonnen til høyre og beholde id som # col-left, men hvor forvirrende er det? Hvis id sier til venstre, bør man forvente at det alltid vil være til venstre. Dette gir ikke deg mye plass til å flytte ting rundt senere.

    En av de største fordelene ved CSS er evnen til å skille stiler fra innhold. Du kan helt redesign ditt nettsted ved bare å endre CSS uten å røre HTML-en. Så ikke mukt opp CSS ved å bruke begrensende navn . Bruk mer allsidige navngivningskonvensjoner og hold deg konsistent.

    Forlat posisjon eller stil spesifikke ord ut av stilene dine og ID-ene. En klasse av .link-blå vil enten gjøre mer arbeid for deg, eller gjøre stilarket ditt virkelig rotete når kunden din senere ber deg om å endre de blå koblingene til oransje.

    Navn elementene dine basert på hva de er, ikke hva de ser ut. For eksempel er .comment-blå mye mindre allsidig enn .comment-beta, og .post-largefont er mer begrensende enn .post-tittel.

    5. Hyphens i stedet for underskrifter

    Eldre nettlesere liker å bli glitchy med understrekinger i CSS, eller støtter dem ikke i det hele tatt. For bedre bakoverkompatibilitet, bli vant med å bruke bindestreker i stedet. Bruk # col-alpha i stedet for #col_alpha.

    6. Gjenta ikke selv

    Gjenbruk attributter når det er mulig, ved å gruppere elementer i stedet for å deklarere stilene igjen. Hvis h1 og h2-elementene begge bruker samme skriftstørrelse, farge og marginer, grupperer du dem med et komma.

    Dette:

    Skjermbilde

    Du bør også gjøre bruk av snarveier når det er mulig. Vær alltid på utkikk etter muligheter til å gruppere elementer og bruk deklarasjonsgenveier.

    Du kan oppnå alt dette:

    Skjermbilde

    med bare dette:

    Skjermbilde

    Det er veldig viktig at du forstår rekkefølgen der CSS tolker disse snarveiene: topp, høyre, nederst, venstre. En stor klokka med urviseren, som starter ved middagstid.

    Også, hvis topp- og bunn- eller venstre og høyre attributter er de samme, trenger du bare å bruke to:

    Skjermbilde

    Dette setter topp- og bunnmarginene til 1em, og venstre og høyre marginer til 0.

    7. Optimaliser for lette stilark

    Ved hjelp av de ovennevnte tipsene, kan du virkelig kutte ned størrelsen på stilarkene dine. Mindre laster raskere, og mindre er lettere å vedlikeholde og oppdatere.

    Klipp ut det du ikke trenger og konsolidere når det er mulig ved å gruppere. Vær forsiktig når du bruker hermetisert CSS-rammeverk også. Du sannsynligvis vil arve mye bulk som ikke vil bli brukt.

    Et annet raskt tips for slank CSS: Du trenger ikke å spesifisere en måleenhet når du bruker null. Hvis en margin er satt til 0, trenger du ikke å si 0px eller 0em. Null er null, uavhengig av måleenhet, og CSS forstår dette.

    8. Skriv basen din for Gecko, deretter Tweak for Webkit og IE

    Lagre selv feilsøking hodepine og skriv CSS først for Gecko-nettlesere (Firefox, Mozilla, Netscape, Flock, Camino). Hvis CSS fungerer riktig med Gecko, er det mye mer sannsynlig å være problemfritt i Webkit (Safari, Chrome) og Internet Explorer.

    9. Bekreft

    Benytte seg av W3Cs gratis CSS-validator . Hvis du sitter fast og utformingen din ikke gjør det du vil at den skal gjøre, vil CSS-validatoren være en stor hjelp ved å peke ut feil.

    10. Hold et ryddig hus

    Separat leserespesifikk CSS til eget eget stilark, og inkludere ved behov med Javascript, server-side-kode eller betingede kommentarer . Bruk denne metoden for å unngå skitne CSS hacks i dine hoved stilark. Dette vil holde basen CSS ren og håndterlig.


    Skrevet utelukkende for WDD av Jeff Couturier

    Følger du disse metodene når du koder nettsteder? Hvilke andre teknikker bruker du til å opprette bedre kode?