Uvod u ITCSS za web programere

Postoji nekoliko odličnih metoda strukturiranje CSS koda, i svi rade na različite načine. Najpopularnije su OOCSS i SMACSS, ali postoji i manje poznata metoda ITCSS (CSS s obrnutim trokutom) stvorio Harry Roberts.

To nije knjižnica ili okvir, već a metodologija pisanja koda to je skalabilno i lako manipulirati. Prednosti ITCSS - a su od jednostavna organizacija koda za manje veličine datoteka i bolje razumijevanje CSS arhitekture.

ITCSS nije za svakoga, ali pruža profesionalan način gledanja stilova s jasnoćom tijekom procesa kodiranja. Uronimo u koncepte ITCSS-a i vidimo kako se mogu primijeniti na web-projekte.

Što je ITCSS?

Modernim načinima organiziranja CSS-a često se vraćaju modulariziranje ili CSS objekti konstruirati apstraktne ideje.

Nova ideja CSS-a s Invertiranim trokutom je a slojeviti način razdvajanja CSS svojstava na temelju njihove specifičnosti i važnosti. To je manje poznata metoda u odnosu na SMACSS i OOCSS - iako se oba mogu kombinirati s ITCSS-om.

Od ITCSS-a uglavnom vlasnički, ne postoji detaljna knjiga pravila o njezinoj uporabi. Samo a skup specifičnih načela na raspolaganju. Autor govori o njima u donjem videu.

Prema zadanim postavkama ITCSS koristi ista načela kao i OOCSS, ali s većim odvajanjem na temelju specifičnosti. Dakle, ako ste već upoznati s OOCSS-om, smatrajte to jedinstvenim alternativna CSS arhitektura pokušati.

Evo nekih od najvećih prednosti korištenja ITCSS-a:

Objekti stranice mogu se podijeliti u vlastite CSS / SCSS datoteke za višekratnog. Jednostavno je kopirati / zalijepiti i proširiti svaki objekt u druge projekte.
Dubina specifičnosti je ovisi o tebi.
tu je nema postavljene strukture mape, i nije potrebna upotreba alata za prethodnu obradu.
Možete spojiti koncepte iz drugih metodologija kao što su CSS moduli stvorite vlastiti hibridni tijek rada.

ITCSS sustav

Pogledajmo kako model Obrnutog trokuta radi koristeći sljedeću ilustraciju iz posta Lubosa Kmetka.

Usmjereni protok od ravnog vrha obrnutog trokuta do vrha na dnu simbolizira povećanje specifičnosti. Ovaj usredotočiti se na manje specifičnosti olakšava ponovno korištenje razreda na web-lokaciji više puta.

Svaki pododjeljak trokuta može se smatrati zasebnom datotekom ili skupinom datoteka, iako na taj način ne morate pisati kod. Ima više smisla za Sass / Less korisnike zbog značajke uvoza. Zamislite svaku pododjeljak kao metodologiju razdvajanje i organiziranje CSS koda za višekratnu upotrebu.

Pogledajmo na trenutak svaki dio obrnutog trokuta krećući se od vrha prema vrhu.

postavke - Preprocesorske varijable i metode (nema stvarnog CSS izlaza)
alat - Mixins i funkcije (nema stvarnog CSS izlaza)
opći - CSS se resetira, što može uključivati resetiranje Erica Meyera, Normalize.css ili vašu vlastitu skupinu koda
Elementi - Selektori pojedinačnih HTML elemenata bez klasa
objekti - Klase za strukturu stranice obično slijede OOCSS metodologiju
komponente - Estetske klase za oblikovanje bilo kojeg i svih elemenata stranice (često u kombinaciji sa strukturom klasa objekata)
aduti - Najspecifičniji stilovi za nadjačavanje bilo čega u trokutu

Svaki sloj obrnutog trokuta može biti prilagođen vašim potrebama. Dakle, ako ne koristite CSS pretprocesor, tada vam neće trebati slojevi Postavke ili Alati.

Svaku pododjeljak trebate slobodno tumačiti kako vam odgovara. Na primjer, Jordan Koschei objašnjava kako je kombinirao strukturu i estetiku zajedno u objektne klase, ostavljajući vrlo malo u odjeljku Komponente..

ITCSS ima bez strogih pravila koje morate slijediti. Ne postoji provjera usklađenosti s ITCSS-om i nitko neće vikati na vas zbog neznatnog mijenjanja ovog modela.

Iako je kreator ITCSS-a Harry Roberts bio zainteresiran zadržati svoje metode vlasničkim za internu uporabu, možete pronaći primjer otvorenog koda ITCSS-a u ovom GitHub repo. Domaćin je CSS Wizardry račun koji je Harry Roberts osobna web stranica.

BEM + IT = BEMIT Imenovanje

Jedna od najpopularnijih CSS shema imenovanja je BEM. Ovo je skraćenica od Block-Element-Modifier i slijedi vrlo određenu sintaksu.

Svaki element u BEM-u opisuje konvenciju imenovanja za CSS klase:

blokovi su klase za pojedinačne elemente koji se mogu replicirati i samostalno.
Elementi uvijek su dio bloka
Izmjenjivači uvijek izmijenite blok ili element da malo promijeni njegov izgled (uključivanje / isključivanje, aktivno / neaktivno, fiksno, statično, označavanje / neutralno).

BEMIT je konvencija imenovanja usvojila ITCSS, koja posuđuje ideje iz BEM-a, a implementira nove ideje s ITCSS-om.

BEM sintaksa diktira vrlo specifična pravila. U nastavku slijedi primjer s web-lokacije BEM-a:

.obrazac  .form - theme-xmas  .form - jednostavan  .form__input  .form__submit  .form__submit - onemogućen

Blokovi imaju imena bez odvajanja ili imena odvojena jednom crticom ili jednom donjom crtom. Elementi koriste dvije podvlake i opisuju interne elemente koji su u skladu s tim blokom. Modifikatori rade na isti način, ali koriste dvije crtice za identifikaciju.

Harry dublje ulazi u BEMIT u ovom blogu. Njegov opis je vrlo koncizan i pokazuje da je prava priroda ITCSS-a igrati prijateljski s drugim CSS metodologijama.

Harry definira Prostori imena za objekte pojavljuju se kao prefiksi za svako glavno ime klase. Oni se slome kao o- za objekte, c- za komponente i u- za uslužne programe (kao što je centriranje teksta ili teksta).

Evo nekih primjera koda koji predstavljaju tipične konvencije imenovanja BEMIT-a.

...

Također preporučuje korištenje @ sufiks za klase temeljene na medijskim stilovima. Tako je .O-media klasa se može promijeniti u .O-LG 'medij za velike zaslone i .o-media 'md za zaslone srednje veličine.

Osobno, mislim da su dodatni sufiksi previše složen za osnovne web-projekte. Mislim da bi većina developera radije koristila uobičajene medijske upite i prepisivala klase na različitim točkama prekida. Ali ne mogu reći da je bilo koja metoda ispravna ili pogrešna, i svatko može pojedinačno odlučiti želi li koristiti BEMIT ili ne.

Preporučujem čitanje ovog uvodnog BEMIT članka kako biste saznali više o tome zašto je ITCSS proširena BEM i kako biste željeli imenovati CSS klase.

ITCSS se može sažeti kao organizacijska metoda za pisanje CSS za višekratnu upotrebu i skalabilnost. BEM je preferirana sintaksa naziva i BEMIT proširuje ovo na posao s prostorima naziva za specifičniji i prepoznatljivi kod.

Ima puno toga za naučiti, a ako ste novi u CSS-u to će biti težak koncept. Ali ako ste voljni učiti, jamčim da ćete biti iznenađeni elegantnom prirodom ITCSS koda.

Završavati

Front-end programeri uvijek žele optimizirati svoj tijek rada. ITCSS je samo još jedna metoda koja može pridonijeti poboljšanom načinu strukturiranja složenih web stranica.

Teškoća je naučiti kako ona funkcionira u stvarnom projektnom radu. Ako imate nepristojnost, i vozite se naučiti, onda ITCSS može biti nešto što vrijedi dodati vašem alatu. Iako nisam pronašao niti jednu službenu dokumentaciju, još uvijek ima mnogo resursa na mreži da bih saznala više o ITCSS-u.

Upravljanje velikim web projektima s novom CSS arhitekturom ITCSS (Creativebloq.com)
Upravljanje CSS projektima s ITCSS - prezentacijskim slajdovima (Speakerdeck.com)
CSS projekti s ITCSS-om (1 h videoprezentacija)
ITCSS - zanimljiv način organiziranja velikih projekata (Css-tricks.com)

(Fotografija na naslovnici putem speakerdeck.com)