Intro til ITCSS for webutviklere

Det er en håndfull gode metoder for strukturering av CSS-kode, og de jobber 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) skapt av Harry Roberts.

Det er ikke et bibliotek eller et rammeverk, men en metode for å skrive kode Det er skalerbart og lett å manipulere. Fordelene ved ITCSS spenner fra enkel kode organisasjon 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å deres nivå 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 hovedsakelig proprietære, Det finnes ingen detaljert regelbok om bruken. Bare en sett med konkrete prinsipper står til disposisjon. Forfatteren snakker om dem i videoen nedenfor.

Som standard bruker ITCSS samme prinsipper som OOCSS men med større separasjon basert på spesifisitet. Så hvis du allerede er kjent med OOCSS, betrakt dette som en unik alternativ CSS-arkitektur å 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 utvide hvert objekt inn i andre prosjekter.
• Dybden av spesifisitet er opp til deg.
• Det er ingen satt mappestruktur, og ingen nødvendig bruk av forbehandlingsverktøy.
• Du kan slå sammen begreper fra andre metoder som CSS-moduler til Lag 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 fokusere på mindre spesifisitet gjør det lettere å gjenbruke klasser over 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 splitte opp og organisere gjenbrukbar CSS kode.

La oss ta en rask titt på hver del av den inverterte trekant flytter 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 Meyers tilbakestilling, Normalize.css, eller din egen gruppe kode
• Elements - Enkle 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 omvendte trekant kan være justert for å dekke dine 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 det passer deg. For eksempel forklarer Jordan Koschei hvordan han kombinerte struktur og estetikk sammen i objektklasser, og etterlot seg svært lite i delen Komponenter.

ITCSS har ingen harde 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 en å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 navngivningssystemene 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.
• Elements er alltid en del av en blokk
• modifikatorer endre alltid en blokk eller et element for å forandre litt utseende (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 nettsiden:

.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 spill vennlig med andre CSS metodologier.

Harry definerer navneområder for objekter vises som prefikser for hvert større klassenavn. De bryter ned som o- for gjenstander, c- for komponenter, og u- for verktøy (som clearfix eller tekst sentrering).

Her er noen eksempler som representerer typiske BEMIT navngivningskonvensjoner.

  
... 
 
 

Han anbefaler også å bruke @ suffiks for klasser basert på mediestiler. Så .o-media klassen 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 innviklet for grunnleggende webprosjekter. Jeg tror de fleste utviklere vil helst bruke vanlige medieforespørsler, og omskrive klassene på forskjellige bruddpunkter. Men jeg kan ikke si at metoden er riktig eller feil, og alle 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 skriving gjenbrukbar og skalerbar CSS. BEM er den foretrukne navngivningssyntaxen, og BEMIT strekker dette ut til arbeid med navneområder for mer spesifikk og gjenkjennelig kode.

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

Innpakning

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

Vanskeligheten 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 Presentasjoner (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)