Hur jag slutade kämpa emot och började skriva bättre CSS

2012-06-28 / 4 min.

Jag har sedan sju år tillbaka varit närmast militant vad gäller POSH. Att skriva semantisk HTML inom ramar sällan angivna av enbart mig själv har varit en ständig utmaning om jag gladerligen axlat.

Jag tillhör gamla skolans webbstandardistor, som länge förespråkat klinisk ren HTML-kod, i andan som Roger Johansson sammanfattar i Vanliga misstag inom webbuteckling.

På Jaiku har jag till exempel diskuterat detta i tråden Objektorienterad CSS? Låter såväl spännande som absurt. där jag sammanfattar den syn jag länge haft.

Det där med rit-prestandan

Jag är dock inte längre inte längre samma övertygelse. Det som framförallt fick mig att grundligt omvärdera min bild är främst två omständigheter.

Jag insåg att det måste finnas något annat sätt. Ett bättre sätt. Rätt sätt.

CSS som ett eget, självsammanhängande lager

Det är ofta de tre lagren struktur, presentation och beteende omnämns när webbstandarder diskuteras. Likväl har de främst alltid låtit presentationslagret (CSS) speglas och bli hårt knuten till strukturen (HTML). Jag är numera av åsikten att det är här är roten till dåligt skriven CSS.

Vi lägger stor möda på att skriva validerande, semantisk och hjälpsam HTML. Vi avlusar och skruvar på våra script för att inte skapa sajter som är tröga och få Steve Souders att sova bättre om nätterna. CSS däremot har varit en eller flera filer dit kod skyfflats in för att uppnå de krav sajtens presentation har på sig. Det är en aning snedfördelat, har jag kommit fram till.

Jag är numera av den bestämda åsikten att CSS ska organiseras och refaktoriseras med samma omsorg som vi hittills lagt på scripts och uppmärkning. Även Fleecelabs har varit inne på samma sak i bloggposterna Dags att omvärdera semantisk HTML? och Därför måste vi diskutera hur vi bygger CSS.

Fler än en smartskalle har tänkt på detta och angripit det olika.

Just klasser eller ej är det som skapat mest upprörda känslor, då många är ypperligt fästa vid att skriva ID-selektorer i sin CSS-kod.

Som sagt, även jag var den personen. Tills jag insåg att class-attributet redan förlorat sin glans.

WAI-ARIA landmark roles, HTML5, Microdata

Class-besattheten uppkom i en tid där vi märkte upp vårt innehåll med XHTML 1.0 Strict och HTML4. En tid där vi slet hårt med listor, DIV och nitiskt kedjade rubriker. Vår enda utväg för att skapa ytterligare semantik då var klasser. Detta understryktes ytterligare när vi började försöka enas om konventioner för klassernas namn i form av Mikroformat.

Det var då. Nu har vi andra förutsättningar.

Med detta sagt vill jag säga att class-attributet numera inte är något jag behöver för att ge mina HTMLdokument mening. Jag använder istället class-attributet för att skriva förvaltningsbar, förutsägbar och smart CSS. Jag skriver numera nästan all CSS med enbart klasser, max två led i selektorerna. Inte ens under pistolhot skulle jag vända mig om och gå tillbaka till mina gamla riktlinjer; den skillnaden jag upplever är helt fantastisk.

Även @csswizardry har tänkt på det här. På Front-Trends 2012 höll han presentationen Breaking Good Habits som berör mycket av det jag skrivit här, men på ett mer objektivt sett. Rekommenderas.

Uppdatering: Nu finns en video uppe.

Breaking Good Habits - Harry Roberts from Front-Trends on Vimeo.

~