Introduktion til ITCSS til webudviklere

Der er en håndfuld gode metoder til strukturering af CSS-kode, og de arbejder alle på forskellige måder. De mest populære er OOCSS og SMACSS, men der er også en mindre kendt metode kaldet ITCSS (omvendt trekant CSS) skabt af Harry Roberts.

Det er ikke et bibliotek eller en ramme, men a metode til at skrive kode Det er skalerbart og let at manipulere. Fordelene ved ITCSS spænder fra simpel kode organisation til mindre filstørrelser og en større forståelse af CSS-arkitekturen.

ITCSS er ikke for alle, men det giver en professionel måde at se stilark med klarhed under kodningsprocessen. Lad os dykke ind i begreberne bag ITCSS, og se, hvordan de kan anvendes til webprojekter.

Hvad er ITCSS?

Moderne måder at organisere CSS ofte falder tilbage til modularisering eller CSS objekter at konstruere abstrakte ideer.

Den nye idé om Inverted Triangle CSS er en lagdelt måde at splitte CSS egenskaber på baseret på deres grad af specificitet og betydning. Det er en mindre kendt metode i forhold til SMACSS og OOCSS - selvom begge kan kombineres med ITCSS.

Siden ITCSS er hovedsagelig proprietære, Der findes ingen detaljeret regelbog om dens brug. Kun a sæt af specifikke principper står til vores rådighed. Forfatteren taler om dem i videoen nedenfor.

Som standard bruger ITCSS de samme principper som OOCSS men med større separation baseret på specificitet. Så hvis du allerede er bekendt med OOCSS, betrag det som en unik alternativ CSS-arkitektur prøve.

Her er nogle af de største fordele ved at bruge ITCSS:

• Sideobjekter kan opdeles i deres egne CSS / SCSS-filer til genbrugelighed. Det er nemt at kopiere / indsætte og udvide hvert objekt ind i andre projekter.
• Dybden af ​​specificitet er op til dig.
• Der er ingen sæt mappestruktur, og ingen nødvendig brug af præprocessionsværktøjer.
• Du kan slå sammen begreber fra andre metoder som CSS moduler til Opret din egen hybrid workflow.

ITCSS-systemet

Lad os se, hvordan Inverteret Triangle Model fungerer ved hjælp af følgende illustration fra Lubos Kmetko's post.

En retningsstrøm fra den flade top af den inverterede trekant ned til spidsen nederst symboliserer en stigning i specificitet. Dette fokusere på mindre specificitet gør det nemmere at genbruge klasser på tværs af et websted flere gange.

Hvert underpunkt i trekanten kan betragtes som en separat fil eller gruppe af filer, selv om du ikke behøver at skrive kode på den måde. Det giver mening for Sass / Less brugere på grund af importfunktionen. Tænk bare på hvert underafsnit som en metode til opdele og organisere genanvendelig CSS kode.

Lad os kigge hurtigt på hver sektion af den omvendte trekant flytter fra toppen ned til spidsen.

• Indstillinger - Preprocessorvariabler og -metoder (ingen faktisk CSS-udgang)
• Værktøj - Mixins og funktioner (ingen faktisk CSS output)
• Generisk - CSS nulstiller, som kan omfatte Eric Meyers nulstilling, Normalize.css eller din egen gruppe kode
• elementer - Enkelt HTML element selektorer uden klasser
• objekter - Klasser til sidestruktur, der typisk følger OOCSS-metoden
• komponenter - Æstetiske klasser til styling af alle & alle sider elementer (ofte kombineret med strukturen af ​​objektklasser)
• Trumps - De mest specifikke stilarter til at tvinge alt andet i trekanten

Hvert lag af den inverterede trekant kan være tilpasset dine behov. Så hvis du ikke bruger en CSS preprocessor, behøver du ikke indstillingerne eller værktøjerne.

Du bør gerne fortolke hvert underafsnit, som du finder passende. For eksempel forklarer Jordan Koschei, hvordan han kombinerede struktur og æstetik sammen i objektklasser og efterlader meget lidt i afsnittet Komponenter.

ITCSS har ingen hårde og hurtige regler at du skal følge. Der er ingen ITCSS compliance checker, og ingen vil skrige på dig for lidt at ændre denne model.

Selvom ITCSS 'skaberen Harry Roberts var interesseret i at holde sine metoder proprietære til intern brug, kan du finde en open source eksempel på ITCSS i denne GitHub repo. Det er hostet af CSS Wizardry-kontoen, som er Harry Roberts personlige hjemmeside.

BEM + IT = BEMIT navngivning

En af de mest populære CSS navneordninger er BEM. Dette står for Block-Element-Modifier og følger en meget særlig syntaks.

Hvert element i BEM beskriver en navngivningskonvention for CSS-klasser:

• blokke er klasser for individuelle elementer, der kan replikeres og stå alene.
• elementer er altid en del af en blok
• modifiers ændrer altid en blok eller et element for at ændre sit udseende lidt (on / off, aktiv / inaktiv, fast, statisk, fremhæv / neutral).

BEMIT er navngivningskonventionen vedtaget af ITCSS, som låner ideer fra BEM, mens man implementerer nye ideer med ITCSS.

BEM syntax dikterer meget specifikke regler. Nedenfor er en prøve fra BEM-webstedet:

.form  .form - tema-xmas  .form - simple  .form__input  .form__submit  .form__submit - disabled  

Blokke har navne med enten ingen adskillelse eller navne adskilt af en bindestreg eller en understregning. Elementer bruger to understregninger, og de beskriver interne elementer i overensstemmelse med den pågældende blok. Modifikatorer fungerer på samme måde, men brug to bindestreger til identifikation.

Harry dykker dybere ind i BEMIT i dette blogindlæg. Hans beskrivelse er meget kortfattet, og det viser, at ITCSS 'sande natur er til Spil venlig med andre CSS metoder.

Harry definerer navneområder for objekter vises som præfikser for hvert større klassenavn. De bryder sammen som o- for objekter, c- for komponenter, og u- til værktøjer (som clearfix eller tekstcentrering).

Her er nogle eksempler kode repræsenterer typiske BEMIT navngivningskonventioner.

  
... 
 
 

Han anbefaler også at bruge @ suffiks for klasser baseret på mediestiler. Så .o-medier klassen kan ændre sig til .o-media @ lg til store skærme, og .o-media @ md til mellemstore skærme.

Personligt tror jeg, at de ekstra suffikser er også forvoldt til grundlæggende webprojekter. Jeg tror, ​​at de fleste udviklere hellere vil bruge almindelige medieforespørgsler og omskrive klasserne ved forskellige breakpoints. Men jeg kan ikke sige, at metoden er rigtig eller forkert, og alle kan individuelt beslutte, om de vil bruge BEMIT eller ej.

Jeg anbefaler stærkt at læse denne intro BEMIT artikel for at lære mere om, hvorfor ITCSS forlængede BEM, og hvordan du måske vil navngive dine CSS klasser.

ITCSS kan opsummeres som en organisatorisk metode til skrivning genbrugelige og skalerbare CSS. BEM er den foretrukne navngivningssyntax og BEMIT udvider dette til arbejde med navneområder for mere specifik og genkendelig kode.

Der er meget at lære, og hvis du er ny til CSS vil dette være et hårdt koncept at bryde. Men hvis du er villig til at lære, garanterer jeg, at du vil blive overrasket over den elegante karakter af ITCSS-koden.

Afslutter

Front-end-udviklere søger altid at optimere deres arbejdsgang. ITCSS er blot en anden metode, der kan bidrage til en forbedret metode til strukturering af komplekse hjemmesider.

Vanskeligheden er at lære, hvordan det virker i ægte projektarbejde. Hvis du har temerity og kører for at lære, kan ITCSS være noget værd at tilføje til din værktøjskasse. Selvom jeg ikke har fundet nogen officiel dokumentation, er der stadig mange ressourcer online for at lære om ITCSS.

• Administrer store webprojekter med ny CSS arkitektur ITCSS (Creativebloq.com)
• Håndtering af CSS-projekter med ITCSS - Præsentationsdyser (Speakerdeck.com)
• CSS Projekter med ITCSS (1 timers video præsentation)
• ITCSS - En interessant måde at organisere store projekter på (Css-tricks.com)

(Cover foto via speakerdeck.com)