Introduktion till ITCSS för webbutvecklare

Det finns en handfull bra metoder för strukturering av CSS-kod, och de arbetar alla på olika sätt. De mest populära är OOCSS och SMACSS, men det finns också en mindre känd metod som heter ITCSS (inverterad triangel CSS) skapad av Harry Roberts.

Det är inte ett bibliotek eller en ram, men en metod för att skriva kod Det är skalbar och lätt att manipulera. Fördelarna med ITCSS spänner från enkel kod organisation till mindre filstorlekar och en större förståelse för CSS-arkitekturen.

ITCSS är inte för alla, men det ger ett professionellt sätt att titta på stylesheets med tydlighet under kodningsprocessen. Låt oss gräva in i begreppen bakom ITCSS och se hur de kan tillämpas på webbprojekt.

Vad är ITCSS?

Moderna sätt att organisera CSS faller ofta tillbaka till modularisering eller CSS-objekt att konstruera abstrakta idéer.

Den nya idén med Inverted Triangle CSS är en skiktat sätt att dela upp CSS-egenskaper baserat på deras nivå av specificitet och vikt. Det är en mindre känd metod jämfört med SMACSS och OOCSS - även om båda kan kombineras med ITCSS.

Eftersom ITCSS är mestadels proprietär, Det finns ingen detaljerad regelbok om användningen. Endast en uppsättning specifika principer står till vårt förfogande. Författaren talar om dem i videon nedan.

Som standard använder ITCSS samma principer som OOCSS men med större separation baserat på specificitet. Så om du redan är bekant med OOCSS anser du att detta är en unik alternativ CSS-arkitektur att försöka.

Här är några av de största fördelarna med att använda ITCSS:

Sidobjekt kan delas upp i egna CSS / SCSS-filer för återanvändbarhet. Det är enkelt att kopiera / klistra in och utöka varje objekt till andra projekt.
Djupet av specificitet är upp till dig.
Det finns ingen uppsättning mappstruktur, och ingen nödvändig användning av förbehandlingsverktyg.
Du kan sammanfoga koncept från andra metoder som CSS-moduler till skapa ditt eget hybrid arbetsflöde.

ITCSS-systemet

Låt oss ta en titt på hur inverterad triangelmodell fungerar med hjälp av följande illustration från Lubos Kmetkos inlägg.

Ett riktningsflöde från den platta toppen av den inverterade triangeln ner till toppen i botten symboliserar en ökad specificitet. Detta fokusera på mindre specificitet gör det lättare att återanvända klasser över en webbplats flera gånger.

Varje del av triangeln kan betraktas som en separat fil eller grupp av filer, även om du inte behöver skriva kod på det sättet. Det ger bättre mening för Sass / Less-användare på grund av importfunktionen. Tänk bara på varje underavdelning som en metod för dela upp och organisera återanvändbar CSS-kod.

Låt oss ta en titt på varje sektion av den inverterade triangeln flyttar från toppen ner till spetsen.

inställningar - Preprocessorvariabler och metoder (ingen faktisk CSS-utgång)
Verktyg - Mixins och funktioner (ingen faktisk CSS-utgång)
Generisk - CSS återställs, vilket kan innefatta Eric Meysers återställning, Normalize.css eller din egen serie kod
element - Enkla HTML-elementväljare utan klasser
Objekt - Klasser för sidstrukturen följer vanligtvis OOCSS-metoden
Komponenter - Estetiska klasser för styling av alla och alla sidelement (ofta kombinerat med objektklassens struktur)
trumf - De mest specifika stilar för att tvinga allt annat i triangeln

Varje lager av den inverterade triangeln kan vara justerat för att passa dina behov. Så om du inte använder en CSS preprocessor behöver du inte lagren Inställningar eller Verktyg.

Du borde gärna tolka varje underavsnitt som du tycker är lämplig. Jordan Koschei förklarar till exempel hur han kombinerade struktur och estetik tillsammans i objektklasser och lämnar väldigt lite i avsnittet Komponenter.

ITCSS har inga hårda och snabba regler som du måste följa. Det finns ingen ITCSS compliance checker, och ingen kommer att skrika på dig för att ändra denna modell något.

Även om ITCSS 'skapare Harry Roberts var intresserad av att hålla sina metoder proprietära för internt bruk, kan du hitta en open source exempel på ITCSS i denna GitHub repo. Den är värd av CSS Wizardry-kontot som är Harry Roberts personliga webbplats.

BEM + IT = BEMIT Naming

Ett av de mest populära CSS namngivningssystemen är BEM. Detta står för Block-Element-Modifier och följer en mycket speciell syntax.

Varje element i BEM beskriver en namngivningskonvention för CSS-klasser:

Blocks är klasser för enskilda element som kan replikeras och stå ensamma.
element är alltid en del av ett block
modifierare Ändra alltid ett block eller element för att ändra sitt utseende något (på / av, aktiv / inaktiv, fast, statisk, markera / neutral).

BEMIT är namngivningskonventionen antagen av ITCSS, som lånar idéer från BEM samtidigt som man implementerar nya idéer med ITCSS.

BEM-syntaxen dikterar mycket specifika regler. Nedan visas ett urval från BEM: s webbplats:

.formuläret  .form - tema-xmas  .form - enkel  .form__input  .form__submit  .form__submit - inaktiverad

Block har namn med antingen ingen separation eller namn separerade med ett streck eller ett understreck. Element använder två underskrifter och de beskriver interna element som överensstämmer med det aktuella blocket. Modifierare fungerar på samma sätt men använder två bindestreck för identifiering.

Harry dyker djupare in i BEMIT i det här blogginlägget. Hans beskrivning är mycket kortfattad och det visar att ITCSS sanna natur är att spela vänligt med andra CSS-metoder.

Harry definierar namnområden för objekt visas som prefix för varje större klassnamn. De bryter ner som o- för objekt, c- för komponenter, och u- för verktyg (som clearfix eller textcentrering).

Här är några exempelkod som representerar typiska BEMIT-namngivningskonventioner.

...

Han rekommenderar också att du använder @ suffix för klasser baserat på mediestilar. Så .o-media klassen kan ändras till .o-media @ lg för stora skärmar, och .o-media @ md för medelstora skärmar.

Personligen tror jag att de ytterligare suffixerna är för invecklad för grundläggande webbprojekt. Jag tror att de flesta utvecklare hellre skulle använda vanliga mediefrågor och skriva om klasserna vid olika brytpunkter. Men jag kan inte säga att metoden är rätt eller fel, och vem som helst kan bestämma sig individuellt om de vill använda BEMIT eller inte.

Jag rekommenderar att läsa den här intro BEMIT artikel för att lära mer om varför ITCSS utvidgas BEM, och hur du kanske vill namnge CSS-klasser.

ITCSS kan sammanfattas som en organisationsmetod för skrivande återanvändbar och skalbar CSS. BEM är den föredragna namngivningssyntaxen och BEMIT utökar detta till arbete med namnområden för mer specifik och igenkännbar kod.

Det finns mycket att lära sig, och om du är ny på CSS kommer det att bli ett tufft koncept att bryta. Men om du är villig att lära, garanterar du att du kommer att bli förvånad över den eleganta naturen av ITCSS-koden.

Avslutar

Front-end-utvecklare letar alltid efter att optimera sitt arbetsflöde. ITCSS är bara en annan metod som kan bidra till en förbättrad metod för att strukturera komplexa webbplatser.

Svårigheten är att lära sig hur det fungerar i verkligt projektarbete. Om du har tuffhet och kör för att lära kan ITCSS vara något värt att lägga till din verktygslåda. Trots att jag inte har hittat någon officiell dokumentation finns det fortfarande många resurser online för att lära mig om ITCSS.

Hantera stora webbprojekt med ny CSS-arkitektur ITCSS (Creativebloq.com)
Hantera CSS-projekt med ITCSS - Presentationsglas (Speakerdeck.com)
CSS-projekt med ITCSS (1 timmars videopresentation)
ITCSS - Ett intressant sätt att organisera stora projekt (Css-tricks.com)

(Täck bild via speakerdeck.com)