Úvod do ITCSS pro webové vývojáře

Existuje spousta skvělých metod strukturování CSS kódu, a všichni pracují různými způsoby. Nejoblíbenější z nich jsou OOCSS a SMACSS, ale existuje také méně známá metoda nazvaná ITCSS (Inverzní trojúhelník CSS) vytvořil (a) Harry Roberts.

Není to knihovna ani rámec, ale metodika psaní kódu je škálovatelný a snadno ovladatelný. Výhody ITCSS sahají od jednoduchá organizace kódu menší velikosti souborů a větší porozumění architektuře CSS.

ITCSS není pro každého, ale poskytuje profesionální způsob, jak se během procesu kódování podívat na styly. Pojďme se ponořit do konceptů ITCSS a zjistit, jak mohou být aplikovány na webové projekty.

Co je ITCSS?

Moderní způsoby organizace CSS se často opírají modularizace nebo CSS objekty konstruovat abstraktní myšlenky.

Nová myšlenka invertovaného trojúhelníku CSS je vrstveného způsobu rozdělení vlastností CSS jejich specifičnosti a důležitosti. Je to méně známá metoda ve srovnání se SMACSS a OOCSS - i když obě lze kombinovat s ITCSS.

Vzhledem k tomu, ITCSS je většinou proprietární, o jeho použití neexistuje žádná podrobná pravidla. Pouze a specifických zásad je k dispozici. Autor o nich hovoří ve videu níže.

Ve výchozím nastavení používá ITCSS stejné principy jako OOCSS s větší separací na základě specifičnosti. Takže pokud jste již obeznámeni s OOCSS, zvažte to jedinečný alternativní architektura CSS zkusit.

Zde jsou některé z největších výhod používání ITCSS:

• Objekty stránky lze rozdělit do vlastních souborů CSS / SCSS použitelnosti. Kopírování / vkládání a rozšiřování každého objektu je jednoduché do jiných projektů.
• Hloubka specificity je na tobě.
• Tady je žádná nastavená struktura složek, a bez použití nástrojů předzpracování.
• Můžete sloučit koncepty z jiných metodik, jako jsou například moduly CSS vytvořit vlastní hybridní pracovní postup.

Systém ITCSS

Pojďme se podívat, jak Inverted Triangle Model pracuje na následujícím obrázku z příspěvku Luboše Kmetka.

Směrový tok z plochého vrcholu obráceného trojúhelníku dolů ke špičce ve spodní části symbolizuje symbol zvýšení specificity. Tento zaměřit na menší specifičnost usnadňuje opakované použití tříd přes web několikrát.

Každý pododdíl trojúhelníku může být považován za samostatný soubor nebo skupinu souborů, i když tímto způsobem nemusíte psát kód. To dává větší smysl pro Sass / méně uživatelů, protože funkce importu. Přemýšlejte o každém pododdílu jako metodiku rozdělení a organizování opakovaně použitelného CSS kódu.

Podívejme se rychle každé části obráceného trojúhelníku pohybující se shora dolů na špičku.

• Nastavení - Předprocesorové proměnné a metody (žádný aktuální CSS výstup)
• Nástroje - Mixiny a funkce (žádný aktuální CSS výstup)
• Obecný - CSS resetuje, což může zahrnovat reset Erica Meyera, Normalize.css nebo vlastní dávku kódu
• Prvky - Single selektory HTML elementů bez tříd
• Objekty - Třídy pro strukturu stránky typicky podle metodiky OOCSS
• Komponenty - Estetické třídy pro styling všech elementů všech stránek (často kombinovaných se strukturou tříd objektů)
• Trumfy - Nejtypičtější styly pro přepsání všeho jiného v trojúhelníku

Každá vrstva obráceného trojúhelníku může být přizpůsobené vašim potřebám. Pokud tedy nepoužíváte předprocesor CSS, nebudete potřebovat vrstvy Nastavení nebo Nástroje.

Měli byste se bez obav vykládat každý pododdíl, jak uznáte za vhodné. Například, Jordan Koschei vysvětluje, jak spojil strukturu a estetiku dohromady do tříd objektů a zanechal jen velmi málo v sekci Komponenty..

ITCSS má žádná tvrdá a rychlá pravidla které musíte následovat. Neexistuje žádná kontrola shody s předpisy ITCSS a nikdo na vás nebude křičet, protože tento model mírně mění.

Přestože tvůrce ITCSS Harry Roberts měl zájem o to, aby jeho metody byly chráněny pro interní použití, můžete najít open source příklad ITCSS v tomto repo GitHub. Hostuje ho účet CSS Wizardry, který je osobní stránkou společnosti Harry Roberts.

BEM + IT = Pojmenování BEMIT

Jedním z nejpopulárnějších schémat pojmenování CSS je BEM. To znamená Block-Element-Modifier a následuje velmi specifickou syntaxi.

Každý prvek v BEM popisuje konvenci pojmenování pro třídy CSS:

• Bloky jsou třídy pro jednotlivé prvky, které lze replikovat a stát samostatně.
• Prvky jsou vždy součástí bloku
• Modifikátory vždy upravte blok nebo prvek, aby se jeho vzhled mírně změnil (zapnuto / vypnuto, aktivní / neaktivní, pevné, statické, zvýraznění / neutrální).

BEMIT je pojmenování přijaté ITCSS, , která si při implementaci nových nápadů s ITCSS půjčuje nápady od BEM.

Syntaxe BEM určuje velmi specifická pravidla. Níže je ukázka z webu BEM:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - zakázáno  

Bloky mají jména bez oddělení nebo jména oddělená jedním pomlčkou nebo jedním podtržítkem. Prvky používají dva podtržítka a popisují vnitřní prvky, které jsou v souladu s daným blokem. Modifikátory pracují stejným způsobem, ale pro identifikaci používají dvě pomlčky.

Harry se ponoří hlouběji do BEMITu v tomto blogu. Jeho popis je velmi stručný a ukazuje, že skutečnou podstatou ITCSS je hrát přátelské s ostatními metodikami CSS.

Harry definuje jmenné prostory pro objekty se objeví jako předpony pro každý hlavní název třídy. Rozpadají se jako Ó- pro objekty, C- pro komponenty a u- pro pomůcky (jako např. clearfix nebo centrování textu).

Zde je několik ukázkových kódů typických konvencí jmenování BEMIT.

  
… 
 
 

Doporučuje také používat @ přípona pro třídy založené na mediálních stylech. Takže .o-media může změnit .o-media @ lg pro velké obrazovky a .o-media @ md pro obrazovky střední velikosti.

Osobně si myslím, že další přípony jsou příliš složité pro základní webové projekty. Myslím, že většina vývojářů by raději použila běžné mediální dotazy a přepsala třídy v různých bodech přerušení. Ale nemohu říci, že žádná metoda je správná nebo špatná, a každý se může individuálně rozhodnout, zda chce BEMIT používat nebo ne.

Vřele doporučuji přečíst si tento článek BEMIT, abyste se dozvěděli více o tom, proč ITCSS rozšířil BEM, a jak byste mohli chtít pojmenovat třídy CSS.

ITCSS lze shrnout jako organizační metodou pro psaní opakovaně použitelné a škálovatelné CSS. BEM je preferovaná syntaxe pojmenování a BEMIT rozšiřuje tuto činnost na práci s obory názvů pro konkrétnější a rozpoznatelný kód.

Je toho hodně co se naučit, a pokud jste novým CSS, bude to těžké pojetí. Ale pokud jste ochotni se učit, zaručuji, že budete překvapeni elegantním charakterem kódu ITCSS.

Balení

Vývojáři frontendu se vždy snaží optimalizovat své pracovní postupy. ITCSS je jen další metoda, která může přispět ke zdokonalené metodě strukturování složitých webových stránek.

Potíž je naučit se, jak funguje v reálném projektu. Máte-li temerity, a řídit se učit, pak ITCSS může být něco, co stojí za to přidat do sady nástrojů. I když jsem nenašel žádnou oficiální dokumentaci, existuje stále mnoho zdrojů online, které se dozvíte o ITCSS.

• Správa rozsáhlých webových projektů s novou architekturou CSS ITCSS (creativebloq.com)
• Správa projektů CSS s ITCSS - Prezentační snímky (speakerdeck.com)
• Projekty CSS s ITCSS (1hodinová video prezentace)
• ITCSS - Zajímavý způsob organizace rozsáhlých projektů (css-tricks.com)

(Fotografie na obálce přes speakerdeck.com)