Intro til ITCSS for webutviklere

Det er en rekke gode metoder for å strukturere CSS-koden, og de fungerer alle på forskjellige måter. De mest populære er OOCSS og SMACSS, men det er også en mindre kjent metode kalt ITCSS (Inverted Triangle CSS) opprettet av Harry Roberts.

Det er ikke et bibliotek eller et rammeverk, men en metode for å skrive kode som er skalerbar og enkel å manipulere. Fordelene ved ITCSS spenner fra enkel kodeorganisasjon til mindre filstørrelser, og en større forståelse av CSS-arkitekturen.

ITCSS er ikke for alle, men det gir en profesjonell måte å se stilark med klarhet under kodingsprosessen. La oss dykke inn i konseptene bak ITCSS, og se hvordan de kan brukes til webprosjekter.

Hva er ITCSS?

Moderne måter å organisere CSS ofte faller tilbake til modularisering eller CSS objekter å konstruere abstrakte ideer.

Den nye ideen om Inverted Triangle CSS er en lagdelt måte å splitte CSS egenskaper på basert på nivået av spesifisitet og betydning . Det er en mindre kjent metode sammenlignet med SMACSS og OOCSS - selv om begge kan kombineres med ITCSS.

Siden ITCSS er for det meste proprietære, eksisterer det ingen detaljert regelbok om bruken av den. Bare et sett med konkrete prinsipper står til disposisjon. Forfatteren snakker om dem i videoen nedenfor.

Som standard bruker ITCSS de samme prinsippene som OOCSS, men med større separasjon basert på spesifisitet. Så hvis du allerede er kjent med OOCSS, anser dette som en unik alternativ CSS-arkitektur for å prøve.

Her er noen av de største fordelene med å bruke ITCSS:

• Sideobjekter kan deles inn i egne CSS / SCSS-filer for gjenbruk . Det er enkelt å kopiere / lime inn og forlenge hvert objekt til andre prosjekter .
• Dybden av spesifisitet er opp til deg .
• Det er ingen satt mappestruktur, og ingen nødvendig bruk av forhåndsbehandlingsverktøy.
• Du kan slå sammen begreper fra andre metoder som CSS-moduler for å lage din egen hybrid arbeidsflyt .

ITCSS-systemet

La oss se på hvordan Inverted Triangle-modellen fungerer ved hjelp av følgende illustrasjon fra Lubos Kmetkos innlegg.

En retningsstrøm fra den flate toppen av den omvendte trekant ned til spissen nederst symboliserer en økning i spesifisitet . Dette fokuset på mindre spesifisitet gjør det lettere å gjenbruke klasser på et nettsted flere ganger.

Hver del av trekanten kan betraktes som en egen fil eller en gruppe filer, selv om du ikke trenger å skrive kode på den måten. Det gir mer mening for Sass / Less brukere på grunn av importfunksjonen. Tenk bare på hvert underavsnitt som en metode for oppdeling og organisering av gjenbrukbar CSS-kode .

La oss ta en rask titt på hver del av den inverterte trekanten som beveger seg fra toppen ned til spissen.

• Innstillinger - Preprocessorvariabler og metoder (ingen faktisk CSS-utgang)
• Verktøy - Mixins og funksjoner (ingen faktisk CSS-utgang)
• Generisk - CSS tilbakestiller som kan omfatte Eric Meyer reset, Normalize.css, eller din egen serie med kode
• Elementer - Enkelt HTML elementvelger uten klasser
• Objekter - Klasser for sidestruktur som vanligvis følger OOCSS-metoden
• Komponenter - Estetiske klasser for styling av alle og alle sideelementer (ofte kombinert med strukturen av objektklasser)
• Trumps - De mest spesifikke stilene for å tvinge alt annet i trekanten

Hvert lag av den inverterte triangelen kan justeres etter behov . Så hvis du ikke bruker en CSS preprocessor, trenger du ikke lagene Innstillinger eller Verktøy.

Du bør gjerne tolke hvert underavsnitt som du ser hensiktsmessig. For eksempel forklarer Jordan Koschei hvordan han kombinerte struktur og estetikk sammen i objektklasser, og etterlot seg svært lite i komponentdelen.

ITCSS har ingen raske og raske regler som du må følge. Det er ingen ITCSS compliance kontroller, og ingen vil skrike på deg for litt å endre denne modellen.

Selv om ITCSS 'skaperen Harry Roberts var interessert i å beholde sine metoder proprietære for intern bruk, kan du finne et åpen kildekode eksempel på ITCSS i denne GitHub repo. Den er vert for CSS Wizardry-kontoen som er Harry Roberts personlige nettsted.

BEM + IT = BEMIT Naming

En av de mest populære CSS navneordninger er BEM. Dette står for Block-Element-Modifier og følger en veldig spesiell syntaks.

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

• Blokker er klasser for individuelle elementer som kan replikeres og stå alene.
• Elementer er alltid en del av en blokk
• Modifikatorer endrer alltid en blokk eller et element for å endre utseendet litt (på / av, aktiv / inaktiv, fast, statisk, høydepunkt / nøytral).

BEMIT er navngivningskonvensjonen vedtatt av ITCSS, som låner ideer fra BEM mens man implementerer nye ideer med ITCSS.

BEM-syntaks dikterer meget spesifikke regler. Nedenfor er et eksempel fra BEM nettsted:

 .form {} .form - tema-xmas {} .form - enkelt {} .form__input {} .form__submit {} .form__submit - disabled {} 

Blokker har navn med enten ingen separasjon, eller navnene er adskilt med en dash eller en understreking. Elementer bruker to understreker og de beskriver interne elementer som stemmer overens med den aktuelle blokken. Modifikatorer fungerer på samme måte, men bruker to bindestreker for identifikasjon.

Harry deltar dypere inn i BEMIT i dette blogginnlegget. Hans beskrivelse er veldig kortfattet, og det viser at den sanne naturen til ITCSS er å spille vennlig med andre CSS-metodologier .

Harry definerer namespaces for objekter som vises som prefikser for hvert større klassenavn . De bryter ned som o- for objekter, c- for komponenter, og u- for verktøy (som clearfix eller tekstsentre).

Her er noen eksempler som representerer typiske BEMIT navngivningskonvensjoner .

...

Han anbefaler også å bruke @ suffiks for klasser basert på mediestiler. Så .o-media kan endres til .o-media@lg for store skjermer, og .o-media@md for mellomstore skjermer.

Personlig tror jeg at de ekstra suffiksene er for konvolutterte for grunnleggende webprosjekter . Jeg tror at de fleste utviklere hellere vil bruke vanlige medieforespørsler, og omskrive klassene ved forskjellige bruddpunkter. Men jeg kan ikke si at metoden er riktig eller feil, og noen kan enkelt avgjøre om de vil bruke BEMIT eller ikke.

Jeg anbefaler på det sterkeste å lese denne intro BEMIT artikkelen for å lære mer om hvorfor ITCSS utvidet BEM, og hvordan du kanskje vil nevne CSS-klassene dine.

ITCSS kan oppsummeres som en organisasjonsmetode for å skrive gjenbrukbar og skalerbar CSS . BEM er den foretrukne navngivningssyntaxen, og BEMIT utvider dette til å fungere med navneområder for mer spesifikk og gjenkjennelig kode.

Det er mye å lære, og hvis du er ny til CSS, vil dette være et tøft konsept å bryte. Men hvis du er villig til å lære, garanterer jeg at du vil bli overrasket over den elegante naturen til ITCSS-koden.

Wrapping Up

Front-end-utviklere ser alltid ut til å optimalisere arbeidsflyten. ITCSS er bare en annen metode som kan bidra til en forbedret metode for strukturering av komplekse nettsteder.

Sværheten er å lære hvordan det fungerer i ekte prosjektarbeid. Hvis du har temerity, og kjøre for å lære, kan ITCSS være noe verdt å legge til verktøykassen din. Selv om jeg ikke har funnet noen offisiell dokumentasjon, er det fortsatt mange ressurser på nettet for å lære om ITCSS.

• Administrer store webprosjekter med ny CSS-arkitektur ITCSS (creativebloq.com)
• Administrere CSS Prosjekter med ITCSS - Presentasjon Slides (speakerdeck.com)
• CSS Prosjekter med ITCSS (1 timers video presentasjon)
• ITCSS - En interessant måte å organisere store prosjekter på (css-tricks.com)

(Cover bilde via speakerdeck.com)