Förstå CSS Writing Methodologies

I det här inlägget kommer vi att se vilka CSS skrivande metoder är, några välkända metoder och hur de kan vara användbara för oss när vi optimerar vår CSS-kod. Låt oss börja med den enklaste frågan att få bollen att rulla. Vad är en metodik?

En metod är ett system av metoder. Tänk på en metod som ett sätt att göra något systematiskt, på ett visst förinställt sätt att göra saker för att uppnå det resultat vi vill ha.

För att få bättre resultat, Vi förbättrar våra metoder genom att planera dem bättre, ändra ordning, förenkla steg - vad som helst som fungerar snabbare och är mer effektiv.

CSS metodik

Låt oss nu prata om CSS-metodiken. Precis som med nästan allt i livet, har vi en metod för att skriva CSS också: vissa skriv återställer CSS först, vissa layoutformat för sist håller, vissa börjar med två till tre klasser för att utforma ett element, vissa skriver alla CSS-koderna i en enda fil.

Våra föredragna metoder har antingen etablerats på egen hand över tiden eller påverkats av andra eller krävs på vår arbetsplats eller på grund av allt ovanstående. Men över tiden har CSS veteraner formulerat metoder för att skriva CSS det är mer flexibel, definierad, återanvändbar, förståelig och hanterlig.

Vi ska titta på de formulerade metoderna, som kommer att innefatta:

OOCSS (Objektorienterad CSS)
BEM (Block, Element, Modifier)
ACSS (Atomic CSS)
SMACSS (skalbar och modulär arkitektur för CSS)

Notera: Inget av de begrepp som nämns nedan bör förväxlas med ramar, bibliotek eller verktyg som kan ha samma namn och koncept som dessa metoder. Det här inlägget handlar bara om metoderna för att skriva CSS.

1. OOCSS

Utvecklat av Nicole Sullivan 2008, innehåller nyckelkoncepten för OOCSS (Object Oriented CSS) CSS objekt identifiering, separation av struktur och visuella stilar och undviker platsbaserade stilar.

I OOCSS är det första steget som Nicole föreslår att vi gör identifiera objekt i CSS.

“I grund och botten är ett CSS-objekt ett upprepande visuellt mönster som kan abstraheras till ett oberoende fragment av HTML, CSS och eventuellt JavaScript. Det objektet kan sedan återanvändas genom en webbplats. - Nicole Sullivan, Github (OOCSS)“

Ta till exempel den här strukturen från den här sidan. Här är något som är ett upprepande visuellt mönster och har sin egen oberoende HTML och / eller CSS:

Vi har här två typer av objekt, en större förhandsgranskning av titlar som vi kommer att namnge post-preview-primär och ett sidofält med titlar som vi kommer att namnge post-preview-sekundär.

Vi måste separat struktur och hud (dvs stilar som skapar objektets utseende). De två typerna av objekt har olika strukturer, en i en större låda trots att de liknar varandra, med bilder till vänster och titlar till höger.

Låt oss ge bilderna av båda objekten en klass post-preview-image och lägg till koden som lägger bilden till vänster. Detta hindrar oss från att behöva upprepa koden för var att lägga bilden i objekt i CSS. Om det finns andra liknande föremål återanvänds vi post-preview-image för dem.

Hudseparation kan också göras för enklare stilar som gränser eller bakgrunder. Om du har flera objekt med samma blå kant, skapa en separat klass för den blå gränsen och lägga till det till objekt kommer minska antalet gånger de blå gränserna måste kodas i CSS.

Nicole föreslår också att inte lägg till stilar baserat på plats, till exempel, istället för att rikta alla länkar inuti en viss div för att markera, ge dessa länkar a highlighter klass med lämpliga CSS-stilar. På så sätt när du behöver markera en länk i någon annan del av sidan kan du återanvända highlighter-klassen.

Fördelar med OOCSS: Återanvändbara visuella stylingkoder, plats flexibla koder, minskning av djupt inbyggda selektorer.

Nackdelar av OOCSS: Utan en hel del upprepande visuella mönster verkar separeringsstruktur och visuella stilkoder onödiga.

2. BEM

Utvecklat av utvecklare vid Yandex 2009 omfattar nyckelbegreppen för BEM (Block, Element, Modifier) att identifiera blockera, element & modifieringsmedel och namnge dem i enlighet därmed.

en “blockera” är i huvudsak samma som en “objekt”(från exemplet före), en “element” refererar till komponenterna i blocket (bild, titel, förhandsgranskningstext i ovanstående preview-stolpen- objekt). en “modifieringsmedel” kan användas när status för ett block eller element ändras, till exempel när du lägger till en aktiv klass i ett menyalternativ för att markera det, fungerar den aktiva klassen som din modifierare.

När du har identifierat komponenterna, namnge dem därefter. Till exempel:

ett menyblock kommer att ha klassen meny
dess föremål kommer att ha klassen menu__item (block och element separeras med dubbla understreck)
Modifieraren för funktionshindrade i menyn kan ha klassen menu_disabled (modifierare avgränsad av ett enda understreck)
modifierare för funktionshinder för ett menyalternativ kan vara menu__item_disabled.

För modifierare kan vi också använda nyckelvärde format för namngivning. För att skilja mellan menyalternativ som länkar till föråldrade artiklar kan vi ge dem klassen menu__item_status_obsolete, och för att ställa in menyalternativ som pekar på pågående dokument kan klassnamnet vara menu__item_status_pending.

Namnet kan ändras till det som fungerar för dig. Tanken är att kunna identifiera, blockera, element och modifierare från klassnamnen. Kolla in några av namngivningssystemet som finns på BEM-webbplatsen.

BEMs webbplats listar också hur kan block-, element- och modifierarsegregationen också införas i CSS-filsystemet. Blocken som “knappar” och “ingångar” kan ha egna mappar som består av filerna (.css, .js) som är kopplade till dessa block, vilket gör det enklare när vi vill importera dessa block i andra projekt.

Fördelar med BEM:Lätt att använda klassnamn och reduktion i djupa CSS-väljare.

Nackdelar med BEM:För att hålla namnen sane-looking, rekommenderar BEM att vi håller blocket till elementet som ligger grunda.

3. ACSS

Gjord känd av Yahoo, någonstans nära slutet av den första årtionden av 21^st århundradet består ACSS: s nyckelbegrepp av att skapa klasser för den mest atomära nivån av styling, dvs en egenskap för värde för värde och sedan använda dem i HTML efter behov.

Det är svårt att avgöra när ACSS (Atomic CSS) utvecklades först sedan konceptet har använts ett tag nu. Utvecklare har använt klasser som .clearfix overflow: hidden under en lång tid. Idén i ACSS är att ha en klass för nästan alla återanvändbara icke-innehållsrelaterade egenskaper-värdepar vi behöver på vår webbplats och lägga till de klasserna när det behövs för HTML-elementen.

Nedan är ett exempel på klasser baserade på ACSS och hur de används i HTML.

 .mr-8 margin-right: 8px; .fl-r float: right;

Som du kan se kommer antalet klasser att bli höga med den här metoden och HTML kommer att bli trångt av alla dessa klasser. Denna metod är inte 100% effektiv men kan göras användbar om så önskas. Yahoo använder det här trots allt.

Fördelar med ACSS:Styling HTML utan att lämna HTML.

Nackdelar med ACSS:För många klasser, inte mycket snyggt och du kanske hatar det.

4. SMACSS

Utvecklat 2011 av Jonathan Snook SMACSS (skalbar och modulär arkitektur för CSS) fungerar genom att identifiera de 5 olika typerna av stilregler. Klassnamn och arkivsystem skapas baserat på dessa.

“SMACSS är ett sätt att undersöka din designprocess och som ett sätt att passa de styva ramarna till en flexibel tankeprocess. - Jonathan Snook”

SMACSS identifierar 5 typer av stilregler nämligen bas, layout, modul, state, och tema.

Basstilar är standardstilarna riktade mot de grundläggande HTML-taggarna som
, .
Layout stilar är stilar som används för att definiera sidans layout, som kodning där sidhuvud, sidfot och sid menyer ska gå.
Modulstilar är specifika för en modul som galleri eller bildspel.
Statliga stilar är för att markera element med omställbara stater som dolda eller inaktiverade.
Tema används för att ändra sidans visuella system.

De olika stilreglerna kan identifieras med hjälp av ett prefix i klassnamnet, till exempel l-header (för layout) eller t-header (för tema). Vi kan också organisera dessa olika typer av regler genom att placera dem i separata filer och mappar.

Fördelar med SMACSS:Bättre organiserad kod.

Nackdelar med SMACSS: Ingen jag kan tänka på.

Det finns en gratis online-bok som du kan läsa om SMACSS, eller du kan köpa sin ebook-version för att studera mer.

Slutsats

Ovanstående CSS-metoder ger dig ett system till hantera och optimera dina CSS-koder. De kan kombineras, som OOCSS-SMACSS, eller OOCSS-BEM, eller BEM-SAMCSS som passar dina behov.

Det finns också ramar och bibliotek om du vill ha ett automatiserat system för att utföra CSS-metoder som:

OOCSS-ramverket
BEM-verktyg
Organisk CSS-ram (följer atomkoncept).