Uvod v ITCSS za spletne razvijalce

Obstaja nekaj odličnih metod za strukturiranje kode CSS, in vsi delujejo na različne načine. Najbolj priljubljene so OOCSS in SMACSS, vendar je znana tudi manj znana metoda ITCSS (obrnjen trikotnik CSS) ustvaril Harry Roberts.

To ni knjižnica ali okvir, ampak a metodologija pisanja kode ki je prilagodljiva in enostavna za upravljanje. Prednosti ITCSS segajo od preprosta organizacija kode manjše velikosti datotek in boljše razumevanje arhitekture CSS.

ITCSS ni za vsakogar, vendar nudi profesionalen način za pregledovanje slogov s jasnostjo med procesom kodiranja. Preglejmo koncepte ITCSS in vidimo, kako jih lahko uporabimo za spletne projekte.

Kaj je ITCSS?

Sodobni načini organiziranja CSS-ja se pogosto vrnejo nazaj modularizacija ali CSS objekti konstruirati abstraktne ideje.

Nova ideja CSS z invertiranim trikotnikom je a večplastni način delitve lastnosti CSS na podlagi njihove specifičnosti in pomena. To je manj znana metoda v primerjavi z SMACSS in OOCSS - čeprav je mogoče obe združiti z ITCSS.

Ker je ITCSS večinoma lastniške, ne obstaja podrobna knjiga pravil o njeni uporabi. Samo a posebnih načel na razpolago. Avtor o njih govori v videu spodaj.

ITCSS privzeto uporablja ista načela kot OOCSS, vendar z večjo ločitvijo na podlagi specifičnosti. Torej, če ste že seznanjeni z OOCSS, menite, da je to edinstven nadomestna arhitektura CSS poskusiti.

Tu je nekaj največjih prednosti uporabe ITCSS:

• Objesti strani je mogoče razdeliti v lastne CSS / SCSS datoteke za ponovno uporabnost. Preprosto kopiranje / lepljenje in razširitev vsakega predmeta v druge projekte.
• Globina specifičnosti je odvisno od tebe.
• Obstaja ni nastavljena struktura map, in ni potrebna uporaba orodij za predobdelavo.
• Koncepte iz drugih metodologij, kot so moduli CSS, lahko združite ustvarite svoj hibridni delovni tok.

Sistem ITCSS

Oglejmo si, kako model obrnjenega trikotnika deluje z naslednjo ilustracijo iz objave Lubosa Kmetka.

Smerni tok od ravnega vrha obrnjenega trikotnika navzdol do konice na dnu simbolizira povečanje specifičnosti. To osredotočiti na manj specifičnosti omogoča večkratno ponovno uporabo razredov na spletnem mestu.

Vsak pododdelek trikotnika se lahko šteje za ločeno datoteko ali skupino datotek, čeprav vam ni treba tako pisati kode. Za Sass / Less uporabniki je bolj smiselno, ker ima funkcijo uvoza. Pomislite na vsak pododdelek kot metodologijo za razdelitev in organiziranje kode CSS za večkratno uporabo.

Poglejmo hitro vsak del obrnjenega trikotnika od vrha navzdol do konice.

• Nastavitve - Preprocesorske spremenljivke in metode (ni dejanskega izhoda CSS)
• Orodja - Mešanice in funkcije (ni dejanskega izhoda CSS)
• Generično - CSS ponastavi, kar lahko vključuje ponastavitev Erica Meyerja, Normalize.css ali vašo lastno serijo kode
• Elementi - Izbirniki posameznih elementov HTML brez razredov
• Predmeti - Razredi za strukturo strani običajno sledijo metodologiji OOCSS
• Komponente - Estetski razredi za oblikovanje vseh & vseh elementov strani (pogosto kombinirani s strukturo objektnih razredov)
• Trumps - Najbolj specifični slogi za preglasitev vsega drugega v trikotniku

Vsaka plast obrnjenega trikotnika je lahko prilagojene vašim potrebam. Če torej ne uporabljate predprocesorja CSS, potem ne potrebujete plasti Nastavitve ali Orodja.

Vsak pododsek lahko razlagate, kot se vam zdi primerno. Na primer, Jordan Koschei pojasnjuje, kako je združil strukturo in estetiko skupaj v objektne razrede, pri čemer je v razdelku Komponente zelo malo..

ITCSS ima brez trdih pravil ki jih morate upoštevati. Ni preveritelja skladnosti s standardom ITCSS in nihče ne bo kričal na vas, ker ste rahlo spremenili ta model.

Čeprav je ustvarjalec ITCSS Harry Roberts želel ohraniti svoje metode lastniške za notranjo uporabo, lahko najdete primer odprte kode za ITCSS v tej reprezentaciji GitHub. Gostuje jo račun CSS Wizardry, ki je osebna spletna stran Harryja Robertsa.

BEM + IT = BEMIT Poimenovanje

Ena izmed najbolj priljubljenih shem poimenovanja CSS je BEM. To pomeni Block-Element-Modifier in sledi zelo posebni sintaksi.

Vsak element v BEM opisuje konvencijo o poimenovanju za razrede CSS:

• Bloki so razredi za posamezne elemente, ki jih je mogoče ponoviti in samostojno.
• Elementi vedno del bloka
• Modifikatorji vedno spremeni blok ali element, da nekoliko spremeni njegov videz (vklop / izklop, aktivno / neaktivno, fiksno, statično, označite / nevtralno).

BEMIT je konvencija o poimenovanju ITCSS, ki izposoja ideje iz BEM pri izvajanju novih idej z ITCSS.

Sintaksa BEM narekuje zelo specifična pravila. Spodaj je vzorec s spletnega mesta BEM:

.form  .form - theme-xmas  .form - preprosto  .form__input  .form__submit  .form__submit - onemogočen  

Bloki imajo imena, ki nimajo ločitve, ali imena, ki so ločena z eno ali eno podčrtano. Elementi uporabljajo dva podčrtaja in opisujeta notranje elemente, ki so skladni s tem blokom. Modifikatorji delujejo na enak način, vendar za identifikacijo uporabljajo dve črtice.

Harry se poglobi globlje v BEMIT v tem blogu. Njegov opis je zelo jedrnat in kaže, da je resnična narava ITCSS igrati prijazno z drugimi metodologijami CSS.

Harry definira imenski prostori za objekte pojavljajo kot predponami za vsako ime večjega razreda. Razbijajo se kot o- za predmete, c- za sestavne dele in. \ t u- za pripomočke (na primer centriranje besedila ali besedila).

Tukaj je nekaj vzorčnih kod, ki predstavljajo značilne konvencije imenovanja BEMIT.

  
… 
 
 

Prav tako priporoča uporabo @ pripona za razrede, ki temeljijo na stilih medijev. Torej .o-mediji razred se lahko spremeni v .o-media @ lg za velike zaslone in .o-media @ md za zaslone srednje velikosti.

Osebno mislim, da so dodatne pripone preveč zapleten za osnovne spletne projekte. Mislim, da bi večina razvijalcev raje uporabljala običajne medijske poizvedbe in ponovno pisala razrede na različnih točkah prekinitve. Ampak ne morem reči, da je katerakoli metoda pravilna ali napačna, in vsak lahko posamezno odloči, ali želi uporabiti BEMIT ali ne.

Priporočam, da si preberete ta uvodni članek BEMIT, če želite izvedeti več o tem, zakaj je ITCSS razširjen BEM, in kako boste morda želeli poimenovati razrede CSS.

ITCSS lahko povzamemo kot organizacijska metoda za pisanje ponovno uporabljiv in razširljiv CSS. BEM je najprimernejša sintaksa poimenovanja in BEMIT razširja to na delo z imenskimi prostori za bolj specifično in prepoznavno kodo.

Veliko se je treba naučiti, in če ste novi v CSS-u, bo to težko prelomiti. Ampak, če ste se pripravljeni učiti, vam jamčim, da boste presenečeni zaradi elegantne narave kode ITCSS.

Zavijanje

Front-end razvijalci vedno iščejo optimizacijo svojega delovnega toka. ITCSS je le še ena metoda, ki lahko prispeva k izboljšani metodi strukturiranja kompleksnih spletnih strani.

Težava je učenje, kako deluje v resničnem projektnem delu. Če imate drznost in se naučite, potem je ITCSS lahko nekaj, kar bi morali dodati vašemu orodju. Čeprav nisem našel nobene uradne dokumentacije, je še vedno na voljo veliko virov za spoznavanje ITCSS.

• Upravljanje velikih spletnih projektov z novo CSS arhitekturo ITCSS (creativebloq.com)
• Upravljanje CSS projektov z ITCSS - predstavitvenimi diapozitivi (speakerdeck.com)
• CSS projekti z ITCSS (1h video predstavitev)
• ITCSS - zanimiv način organizacije velikih projektov (css-tricks.com)

(Fotografija na naslovnici z speakerdeck.com)