Kafli 13: Að skrifa CSS

Eins og með HTML skiptir máli að huga að því hvernig við formum og skrifum CSS.

Algeng leiðin til að skrifa CSS er að hafa einn selector per línu með { á línu seinasta selectors. Allar yfirlýsingar eru síðan dregnar inn innan reglusetts.

Almennt ættum við ekki að nota ID selectora þar sem þeir hafa hærra specifity en class selector og geta því valdið vanda. Einnig ætti id aðeins að vera skilgreint einu sinni fyrir element per síðu og því ekki hægt að endurnýta fyrir fleiri. Þetta þýðir þó ekki að við notum id aldrei, þegar við vissulega viljum finna einstök element með JavaScript getum við notað id.

Einnig er æskilegt að nýta sér „flóðið“ þar sem það á við, t.d. til að skilgreina leturgerð aðeins einu sinni, þarf ekki að skilgreina aftur og aftur fyrir mörg element.

Stundum eru yfirlýsingum raðað á einhvern sérstakan hátt og þeim hópað saman, t.d. allt sem á við texta saman, allt sem á við staðsetningu. Þetta á sérstaklega við í verkefnum sem margir vinna í.

Þegar við skrifum class á element til að velja með selector þá er venjan að skrifa þá með kebab-case á ensku:

Kebab-case er ein af nokkrum leiðum til að skrifa samsett orð án bila en sú þörf kemur oft upp í forritun þegar bil hefur merkingu. Í CSS er bil leið til að sameina selectors svo velja þarf einhverja leið til að útbúa samsett orð. Aðrar leiðir eru t.d.

Eins og með annað sem viðkemur kóðastíl er mikilvægt að gæta samræmis og velja sér „nafnahefð“ (e. naming convention) sem getur fylgt hefðum forritunarmáls, forritarahóps eða fyrirtækis.

W3C heldur úti validation þjónustu sem bæði bendir okkur á beinar villur en einnig hugsanlega vandræði sem CSS gæti skapað. Til þess að fá allar upplýsingar þurfum við að kveikja á öllum warnings undir more options.

Fyrir eftirfarandi CSS:

fáum við villur:

og viðvaranir:

Sem bendir okkur á að þar sem við setjum bakgrunnslit en ekki lit, þá gætum við lent í því að flóðið gefi okkur ólæsilegan texta, eða texta sem ekki hefur nægilega mikið contrast.

Hver „user agent“ (í flestum tilfellum vafri) setur sín eigin sjálfgefnu gildi sem eru notuð ef við skilgreinum ekkert. Þetta getur verið mismunandi milli vafra og því varð hugtakið um css reset til, en það eru reglusett sem setur öll element í „núllstöðu“. Fyrsta reset.css skjalið var búið til af Eric Meyer.