Въведение в ITCSS за уеб разработчици

Има няколко големи метода за структуриране на CSS код, и всички те работят по различни начини. Най-популярните от тях са OOCSS и SMACSS, но има и по-малко познат метод ITCSS (CSS с обърнат триъгълник) създаден от Хари Робъртс.

Това не е библиотека или рамка, а методология за писане на код това е мащабируемо и лесно за манипулиране. Ползите от ITCSS варират от проста организация на кода по-малки размери на файловете и по-добро разбиране на CSS архитектурата.

ITCSS не е за всеки, но осигурява професионален начин да се гледат стилове с яснота по време на процеса на кодиране. Нека да се вникнем в концепциите на ITCSS и да видим как те могат да бъдат приложени към уеб проекти.

Какво е ITCSS?

Модерните начини за организиране на CSS често се връщат обратно модуларизация или CSS обекти да се конструират абстрактни идеи.

Новата идея на CSS с обърнат триъгълник е a наслоен начин за разделяне на CSS свойства основани на тяхното ниво на специфичност и значение. Това е по-малко известен метод в сравнение със SMACSS и OOCSS - въпреки че и двете могат да бъдат комбинирани с ITCSS.

Тъй като ITCSS е най-вече собственост, не съществува подробна книга за нейното използване. Само a набор от специфични принципи е на разположение. Авторът говори за тях във видеото по-долу.

По подразбиране ITCSS използва същите принципи като OOCSS, но с по-голямо разделяне основани на специфичност. Така че, ако вече сте запознати с OOCSS, помислете за това уникално алтернативна CSS архитектура да пробвам.

Ето някои от най-големите ползи от използването на ITCSS:

• Обектите на страниците могат да бъдат разделени на техните собствени CSS / SCSS файлове за повторна употреба. Лесно е да копирате / поставяте и разширявате всеки обект в други проекти.
• Дълбочината на специфичност е зависи от теб.
• Има няма структура на папка, и не се изисква използване на инструменти за предварителна обработка.
• Можете да обедините концепции от други методологии като CSS модули създайте свой собствен хибриден работен процес.

Системата ITCSS

Нека да разгледаме как работи обратната триъгълна модел, използвайки следната илюстрация от публикацията на Lubos Kmetko.

Посоченият поток от плоския връх на обърнат триъгълник до върха на дъното символизира един повишаване на специфичността. Това фокусиране върху по-малко специфичност улеснява многократното използване на класове в даден сайт.

Всеки подраздел на триъгълника може да се разглежда като отделен файл или група файлове, въпреки че не е необходимо да пишете код по този начин. За Sass / Less потребителите има повече смисъл поради функцията за импортиране. Помислете за всеки подраздел като методология разделяне и организиране на повторно използван CSS код.

Нека погледнем бързо всяка секция на обърната триъгълник движейки се от върха надолу до върха.

• Настройки - Променливи и методи на предпроцесора (няма действителен изход на CSS)
• Инструменти - Mixins и функции (няма действителен CSS изход)
• родов - CSS се рестартира, което може да включва нулиране на Eric Meyer, Normalize.css или ваша собствена партида код
• елементи - Селектори за единични HTML елементи без класове
• обекти - Класовете за структурата на страниците обикновено следват методологията OOCSS
• елементи - Естетични класове за оформяне на всички & всички елементи на страницата (често комбинирани със структурата на класовете обекти)
• Козовете - Най-специфичните стилове за преодоляване на всичко друго в триъгълника

Всеки слой на обърнат триъгълник може да бъде коригирани според вашите нужди. Така че, ако не използвате CSS препроцесор, няма да имате нужда от слоевете Настройки или Инструменти.

Трябва да се чувствате свободни да интерпретирате всеки подраздел, както смятате за подходящ. Например, Jordan Koschei обяснява как той комбинира структурата и естетиката заедно в обектни класове, оставяйки много малко в раздел Компоненти..

ITCSS има няма твърди и бързи правила които трябва да следвате. Няма проверка за съответствие на ITCSS и никой няма да ви крещи за леко променяне на този модел.

Въпреки че създателят на ITCSS Хари Робъртс е бил заинтересован да запази собствените си методи за вътрешна употреба, можете да намерите пример с ITCSS с отворен код в това GitHub репо. Тя се хоства от CSS Wizardry акаунта, който е личен уебсайт на Хари Робъртс.

BEM + IT = BEMIT Именуване

Една от най-популярните схеми за именуване на CSS е BEM. Това означава Block-Element-Modifier и следва много специфичен синтаксис.

Всеки елемент в BEM описва конвенция за именуване за CSS класове:

• блокове са класове за отделни елементи, които могат да бъдат възпроизведени и самостоятелни.
• елементи винаги са част от блок
• Модификатори винаги променяйте блок или елемент, за да промените леко неговия външен вид (включване / изключване, активен / неактивен, фиксиран, статичен, подчертан / неутрален).

BEMIT е конвенцията за именуване приети от ITCSS, която заема идеи от BEM, като прилага нови идеи с ITCSS.

Синтаксисът на BEM диктува много специфични правила. По-долу е представен пример от уебсайта на BEM:

.form  .form - theme-xmas  .form - прост  .form__input  .form__submit  .form__submit - деактивиран  

Блоковете имат имена, които нямат разделение, или имена, разделени с едно тире или с една долна черта. Елементите използват две подчертавания и описват вътрешни елементи, съответстващи на този конкретен блок. Модификаторите работят по същия начин, но използват две тирета за идентификация.

Хари потъва по-дълбоко в BEMIT в този блог. Неговото описание е много кратко и показва, че истинската същност на ITCSS е да играйте приятелски с други методологии на CSS.

Хари определя пространства за имена на обекти като префикси за всяко основно име на клас. Те се разпадат като о- за обекти, ° С- за компоненти и. \ t ф- за комунални услуги (като clearfix или центриране на текст).

Ето някои примерни кодове типични правила за именуване на BEMIT.

  
... 
 
 

Той също така препоръчва използването на @ суфикс за класове, базирани на медийни стилове. Така че .о-медии клас може да се промени .о-носители @ LG за големи екрани и .о-носители @ MD за средни по размер екрани.

Лично аз мисля, че допълнителните суфикси са твърде сложен за основни уеб проекти. Мисля, че повечето разработчици предпочитат да използват обикновени медийни запитвания и да пренаписват класовете на различни точки на прекъсване. Но не мога да кажа, че или методът е правилен, или не, и всеки може индивидуално да реши дали иска да използва BEMIT или не.

Силно препоръчвам да прочетете тази статия BEMIT, за да научите повече за това защо ITCSS разширява BEM и как бихте искали да назовете CSS класовете си.

ITCSS може да се обобщи като организационен метод за писане CSS за многократна употреба и мащабируемост. BEM е предпочитаният синтаксис за именуване и BEMIT разширява тази работа с пространства от имена за по-конкретен и разпознаваем код.

Има много неща за научаване и ако сте нов в CSS, това ще бъде трудна концепция за прекъсване. Но ако сте готови да научите, гарантирам, че ще бъдете изненадани от лъскавия характер на кода на ITCSS.

Обобщавайки

Предприемачите винаги търсят да оптимизират работния си поток. ITCSS е просто още един метод, който може да допринесе за подобрен метод за структуриране на сложни уебсайтове.

Трудността е да се научи как работи в реална проектна работа. Ако имате смелост и шофиране, за да научите тогава ITCSS може да бъде нещо, което си струва да добавите към вашия набор от инструменти. Въпреки че не съм намерил официална документация, все още има много онлайн ресурси, за да науча за ITCSS.

• Управление на мащабни уеб проекти с нова CSS архитектура ITCSS (Creativebloq.com)
• Управление на CSS проекти с ITCSS - презентационни слайдове (Speakerdeck.com)
• CSS Проекти с ITCSS (1 ч. Видео презентация)
• ITCSS - Интересен начин за организиране на мащабни проекти (Css-tricks.com)

(Снимка на корицата чрез speakerdeck.com)