I det här inlägget tänkte jag gå igenom mina rekommendationer för frontend-utveckling (CSS/HTML) när man bygger större sajter. För 7-8 år sedan var CSS-dokumenten mindre komplexa och utmaningarna var inte de samma som de är idag. Genom åren har de tekniska förutsättningarna förändrats. Det har alltid varit lite av ett ”vilda västern” när det gäller hur man utformar CSS-kod, och det gjorde inte så mycket när man hade 100 rader kod. Men när man istället har 5000 rader blir det en annan sak.

En växande komplexitet
I grund och botten är HTML/CSS enkla “markup” språk som beskriver hur ett innehåll på en sida ska ritas upp. Under de senaste tre fyra åren har vi sett en markant förändring i hur vi arbetar med gränssnittsutvecklingen vilket till stor del bottnar i en mognad av språken (HTML5/CSS3) och framförallt ett stöd för detta i webbläsarna.
Denna mognad har bland annat mynnat ut i att vi idag inte längre ”klipper upp” photoshop dokument och använder dessa element som byggstenar för framtagandet av webbsidan, vi kan göra allt det jobbet direkt med CSS och vi arbetar mer eller mindre uteslutande med webbplatser som är anpassade för skärmar av olika storlekar (responsive design).

Följden av detta har blivit att CSS dokumenten har växt, i många fall till filer med flera tusen rader kod, vilket får till följd att det till slut blir svårt att överblicka koden, underhålla den och för att inte nämna överta någon annans kod och göra uppdateringar.

Hur kan vi göra detta bättre, vad har vi för verktyg att tillgå?
Som tur är finns det sätt att hantera den växande komplexiteten vilket inte så förvånande bottnar i att strukturera koden. Detta har traditionella programmerare i många år varit medvetna om och utnyttjat för att bryta ned koden i mindre hanterbara moduler, modulär programmering har funnits som en del i deras verktygslåda sedan åtminstone 1960-talet. För oss gränssnitsutvecklare har det tagit lite längre tid att nå dit men nu kan vi nog hävda att även vi har verktygen för att jobba modulärt.

Modulbaserad HTML/CSS (BEM)
BEM står för Block, Element, Modifier och är en namngivningsmetod för frontendutveckling som arbetats fram av gänget bakom Yandex.com.

I Nicolas Gallagher artikel från mars 2012, About HTML semantics and front-end architecture, utvecklar han tankarna runt BEM, HML semantik, komponenter och förhållningssätt till gränssnittsutveckling. Han menar bland annat att skalbar HTML/CSS till stor del bygger på HTML-klasser som tillåter återanvändning av komponenter. En flexibel och återanvändbar HTML-komponent är en komponent som inte är beroende av dess placering i DOM-trädet och inte heller kräver specifika element. Komponenten ska kunna anpassa sig till olika containers och vara enkel att anpassa rent grafiskt.

Harry Roberts tar detta ytterligare några steg i artikeln MindBEMding – getting your head ’round BEM syntax från januari 2013 där han på ett enkelt sätt beskriver en något modifierad BEM nomenklatur (vilket är den jag använder).

Namngivningen följer följande mönster
.block {}
.block__element {}
.block–modifier {}
kan också beskrivas på följande sätt.
.person {}
.person__hand {}
.person–female {}
.person–female__hand {}
.person__hand–left {}

Om man tänker sig en webbplats, likt den på bilden nedan, så är det bra att fundera på vad som utgör de ”block” eller byggstenar som webbplatsen består av. I nedanstående illustration kan man tex identifiera sidhuvud, Innehållsdelen, sidfot.

dummysida

Sidhuvudet i sin tur består av Logotyp, Sökfunktion och Navigering.

dummysida--head

Ett ”block” är en oberoende enhet, en byggsten i webbplatsen likt en Legobit. Den kan vara både enkel eller sammansatt av flera ”block”.

Block och Element
Sökformulär är ett exempel på ett enkelt ”block”.

searchform

Sökformuläret består i sin tur av två ”element”, en knapp och ett input fält. Ett ”element” är en del av ett ”block” som utför en viss funktion. Element är contextberoende, de får endast en mening i contexten av det ”block” de befinner sig i.
Block och Element kan följa på varandra för att utgöra en större enhet, t.ex. Ett s.k. media block upprepat efter varandra utgör en medialista.

mediablock

Modifierade Block
Ofta dyker det upp block som är snarlika varandra, det kan vara en sökruta som används i sidhuvudet men som också dyker upp på annan plats i sidan men med något förändrad färg, då är det ett modifierat block. För att förhindra att vi utvecklar två separata block som är nästan identiska kan vi använda oss av s.k. ”modifiers”, en ”modifiers” används för att förändra utseendet eller uppförandet av en modul.

searchform-2

I praktiken
– ett mini-Bootstrap för varje leverans
För att föregående stycke ska vara till någon större praktisk nytta måste vi börja tänka på våra leverabler som modulära enheter. Istället för att producera ett psd dokument per sida, eller ännu värre, en psd per responsive vy, måste vi se våra modulära enheter som en del av ett större system.
Det finns flera goda exempel på hur detta skulle kunna se ut, allt från ett fullfjädrat Twitter Bootstrap till det enklare style-guide-boilerplate.

Ett intressant alternativ är Pattern lab http://www.pattern-lab.info/ skapat av Brad Frost och Dave Olsen. Även om man inte använder deras verktyg rakt av så har de tänkt till runt problemet.

För den som ytterligare vill fördjupa sig i detta rekommenderar jag starkt Jonathan Snooks eminenta e-bok Scalable and Modular Architecture for CSS.

Det här inlägget är en del i bloggutmaningen #Blogg100, att blogga minst ett inlägg om dagen i 100 dagar.  Våra medarbetare bloggar tillsammans här på Intellectabloggen.