Úvod do ITCSS pre vývojárov webu

Je tu niekoľko skvelých metód štruktúrovanie kódu CSS, a všetci pracujú rôznymi spôsobmi. Najpopulárnejšie sú OOCSS a SMACSS, ale existuje aj menej známa metóda ITCSS (Invertovaný trojuholník CSS) vytvoril Harry Roberts.

Nie je to knižnica alebo rámec, ale a metodika písania kódu to je škálovateľné a ľahko manipulovateľné. Výhody ITCSS sa pohybujú od jednoduchá organizácia kódu na menšie veľkosti súborov a lepšie pochopenie architektúry CSS.

ITCSS nie je pre každého, ale poskytuje profesionálny spôsob, ako v procese kódovania prezrieť šablóny so štýlmi. Pozrime sa na koncepty ITCSS a uvidíme, ako sa dajú použiť pri webových projektoch.

Čo je ITCSS?

Moderné spôsoby organizácie CSS často spadajú do modularizácia alebo CSS objekty stavať abstraktné nápady.

Nová myšlienka Inverzného trojuholníka CSS je a vrstvený spôsob rozdelenia vlastností CSS na základe ich úrovne špecifickosti a dôležitosti. Je to menej známa metóda v porovnaní s SMACSS a OOCSS - hoci obe môžu byť kombinované s ITCSS.

Vzhľadom k tomu, ITCSS je väčšinou proprietárne, neexistuje žiadna podrobná kniha pravidiel o jeho použití. Len a súboru špecifických zásad je k dispozícii. Autor o nich hovorí vo videu nižšie.

Štandardne používa ITCSS rovnaké zásady ako OOCSS, ale s väčším oddelením založené na špecifickosti. Takže ak už poznáte OOCSS, zvážte to jedinečnú alternatívna architektúra CSS skúsiť.

Tu sú niektoré z najväčších výhod používania ITCSS:

• Objekty stránok je možné rozdeliť do svojich vlastných súborov CSS / SCSS znovupoužitelnost. Je jednoduché kopírovať / prilepiť a rozšíriť každý objekt do iných projektov.
• Hĺbka špecifickosti je až k vám.
• je tu žiadna nastavená štruktúra priečinka, a nevyžaduje použitie nástrojov na predbežné spracovanie.
• Môžete zlúčiť koncepty z iných metodológií, ako sú napríklad CSS moduly vytvorte si vlastný hybridný pracovný postup.

Systém ITCSS

Poďme sa pozrieť na to, ako Model obráteného trojuholníka pracuje na nasledujúcom obrázku z príspevku Lubose Kmetka.

Smerový tok z plochého vrcholu invertovaného trojuholníka smerom k dolnej špičke symbolizuje zvýšenie špecifickosti. toto zamerať sa na menšiu špecifickosť uľahčuje niekoľkokrát opakované použitie tried na celom webe.

Každá podsekcia trojuholníka môže byť považovaná za samostatný súbor alebo skupinu súborov, hoci nemusíte písať kód takýmto spôsobom. Má väčší zmysel pre používateľov Sass / Less kvôli funkcii importu. Len si myslite na každý pododdiel ako na metodiku rozdelenie a organizovanie opakovane použiteľného kódu CSS.

Poďme sa rýchlo pozrieť na každá časť obráteného trojuholníka pohybujúc sa zhora nadol na špičku.

• nastavenie - Premenné a metódy preprocesora (bez aktuálneho výstupu CSS)
• náradie - Mixiny a funkcie (bez aktuálneho výstupu CSS)
• rodový - CSS resetovania, ktoré môžu zahŕňať resetovanie Erica Meyera, Normalize.css alebo vlastnú dávku kódu
• elements - Jednotlivé selektory HTML prvkov bez tried
• objektov - Triedy pre štruktúru stránok, ktoré zvyčajne zodpovedajú metodike OOCSS
• súčasti - Estetické triedy pre styling všetkých prvkov & všetkých stránok (často v kombinácii so štruktúrou objektových tried)
• tromfy - Najtypickejšie štýly na prekonanie niečoho iného v trojuholníku

Každá vrstva invertovaného trojuholníka môže byť upravené tak, aby vyhovovali vašim potrebám. Ak nepoužívate preprocesor CSS, potom nebudete potrebovať vrstvy Nastavenia alebo Nástroje.

Mali by ste slobodne interpretovať každú podsekciu tak, ako to považujete za vhodné. Napríklad Jordan Koschei vysvetľuje, ako spojil štruktúru a estetiku dohromady s triedami objektov a v sekcii Súčasti zostal veľmi málo.

ITCSS má žiadne ťažké a rýchle pravidlá ktoré musíte dodržiavať. Neexistuje žiadna kontrola dodržiavania predpisov ITCSS a nikto na vás nebude kričať, pretože mierne zmenil tento model.

Hoci tvorca ITCSS Harry Roberts bol záujem zachovať jeho metódy proprietárne pre interné použitie, môžete nájsť open source príklad ITCSS v tomto repo GitHub. Hostite ho v účte CSS Wizardry, ktorý je osobnou webovou lokalitou Harryho Robertsa.

BEM + IT = BEMIT Pomenovanie

Jeden z najpopulárnejších schém pomenovania CSS je BEM. Toto znamená Modifikátor blokových prvkov a sleduje veľmi špecifickú syntax.

Každý prvok v BEM opisuje konvenciu pomenovania pre triedy CSS:

• Blocks sú triedy pre jednotlivé prvky, ktoré môžu byť replikované a samostatné.
• elements sú vždy súčasťou bloku
• modifikátory vždy upravte blok alebo prvok tak, aby mierne zmenil jeho vzhľad (zap / vyp, aktívny / neaktívny, pevný, statický, zvýraznený / neutrálny).

BEMIT je konvencia pomenovania prijaté ITCSS, ktorá požičiava nápady od spoločnosti BEM pri implementácii nových nápadov s ITCSS.

Syntax BEM diktuje veľmi špecifické pravidlá. Nižšie je ukážka z webovej stránky BEM:

.formulár  .form - téma-xmas  .forma - jednoduchá  .forma_info  .form__submit  .form__submit - zakázaná  

Bloky majú názvy bez oddelenia alebo názvy oddelené jednou pomlčkou alebo jedným podčiarknutím. Prvky používajú dve podčiarknuté a opisujú vnútorné prvky v súlade s daným blokom. Modifikátory pracujú rovnakým spôsobom, ale na identifikáciu používajú dve pomlčky.

Harry sa ponorí hlbšie do BEMITu v tomto blogovom príspevku. Jeho opis je veľmi stručný a ukazuje, že skutočná povaha ITCSS je hrajte priateľské s inými metodami CSS.

Harry definuje namespaces pre objekty zobrazuje sa ako predpony pre každý hlavný názov triedy. Rozpadajú sa ako o- pre objekty, C- pre komponenty a u- pre nástroje (ako je clearfix alebo centrovanie textu).

Tu je niekoľko vzorových kódov typické konvencie pomenovania BEMIT.

  
... 
 
 

Odporúča tiež použiť @ prípona pre triedy založené na štýloch médií. Takže .O-media trieda sa môže zmeniť .o-médiá @ lg pre veľké obrazovky a .o-médiá @ md pre stredne veľké obrazovky.

Osobne si myslím, že sú to dodatočné prípony príliš zložité pre základné webové projekty. Myslím, že väčšina vývojárov by radšej používala bežné mediálne dopyty a prepísala triedy na rôznych hraničných bodoch. Ale nemôžem povedať, že metóda je správna alebo nesprávna a každý sa môže individuálne rozhodnúť, či chce použiť BEMIT alebo nie.

Veľmi odporúčam čítať tento úvodný článok BEMIT, aby ste sa dozvedeli viac o tom, prečo ITCSS rozšíril BEM a ako by ste mohli chcieť pomenovať vaše triedy CSS.

ITCSS možno zhrnúť ako organizačnú metódu pre písanie opakovane použiteľné a škálovateľné CSS. BEM je preferovaná pomenovacia syntax a BEMIT rozširuje to do práce s mennými priestormi pre konkrétnejší a rozpoznateľný kód.

Je veľa čo sa naučiť, a ak ste noví v CSS, bude to náročný koncept na prelomenie. Ale ak ste ochotní sa učiť, zaručujem, že vás prekvapí elegantná povaha kódu ITCSS.

Zbaliť

Vývojári v oblasti front-end sa vždy snažia optimalizovať svoj pracovný postup. ITCSS je len ďalšia metóda, ktorá môže prispieť k zdokonalenej metóde štruktúrovania zložitých webových stránok.

Problémom je, že sa učíte, ako to funguje pri skutočnej práci na projekte. Ak máte obavy a vedieť sa učiť, ITCSS môže byť niečo, čo stojí za to, aby ste sa pridali k súboru nástrojov. Aj keď som nenašiel žiadnu oficiálnu dokumentáciu, stále existuje veľa zdrojov online, aby som sa dozvedel o ITCSS.

• Správa rozsiahlych webových projektov s novou architektúrou CSS ITCSS (Creativebloq.com)
• Spravovanie projektov CSS s ITCSS - Prezentačné prezentácie (Speakerdeck.com)
• CSS Projekty s ITCSS (1hr video prezentácia)
• ITCSS - zaujímavý spôsob zorganizovania rozsiahlych projektov (Css-tricks.com)

(Obal na fotke cez speakerdeck.com)