Вступ до 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

Давайте подивимося, як працює модель "Перевернутий трикутник", використовуючи наступну ілюстрацію з листа Любоша Кетєко.

Направлений потік від плоскої вершини перевернутого трикутника до кінця внизу символізує підвищення специфічності. Це зосередитися на меншій специфіці полегшує повторне використання класів на сайті.

Кожен підрозділ трикутника може вважатися окремим файлом або групою файлів, хоча вам не потрібно писати код таким чином. Для користувачів Sass / Less більше сенсу внаслідок функції імпорту. Подумайте про кожний підрозділ як методологію розбиття та організація повторно використовуваного CSS-коду.

Давайте швидко подивимося кожен розділ перевернутого трикутника рухаючись зверху вниз до кінчика.

Налаштування - Змінні та методи препроцесора (немає фактичного виводу CSS)
Інструменти - Mixins та функції (немає фактичного виводу CSS)
Загальний - CSS скидає, що може включати скидання Еріка Мейєра, Normalize.css або вашу власну партію коду
Елементи - Одиночні HTML-селектори елементів без класів
Об'єкти - Класи для структури сторінки зазвичай використовують методологію OOCSS
Компоненти - Естетичні класи для стилізації будь-яких & всіх елементів сторінки (часто поєднуються зі структурою класів об'єктів)
Козирі - Найбільш специфічні стилі для перевизначення будь-якого іншого в трикутнику

Кожен шар інвертованого трикутника може бути налаштовані відповідно до ваших потреб. Тому, якщо ви не використовуєте препроцесор CSS, то вам не знадобляться шари Параметри або Інструменти.

Ви повинні вільно інтерпретувати кожен підрозділ, як ви вважаєте за потрібне. Наприклад, Jordan Koschei пояснює, як він об'єднав структуру та естетику в об'єктні класи, залишивши дуже мало в розділі Компоненти..

ITCSS має немає жорстких правил що ви повинні слідувати. Існує не перевірка відповідності ITCSS, і ніхто не буде кричати на вас, щоб трохи змінити цю модель.

Хоча творець ITCSS Гаррі Робертс був зацікавлений у збереженні власних методів для внутрішнього використання, ви можете знайти його приклад відкритого джерела ITCSS у цьому репо GitHub. Він розміщується на сайті CSS Wizardry, який є персональним веб-сайтом Гаррі Робертса.

BEM + IT = BEMIT Призначення

Однією з найпопулярніших схем іменування CSS є BEM. Це означає "блок-елемент-модифікатор" і слідує за особливим синтаксисом.

Кожен елемент у BEM описує правила іменування для класів CSS:

Блоки є класами для окремих елементів, які можна реплікувати і самостійно.
Елементи завжди є частиною блоку
Модифікатори завжди змінювати блок або елемент, щоб злегка змінити його вигляд (увімк. / вимк., активний / неактивний, фіксований, статичний, виділити / нейтральний).

BEMIT є угода про найменування прийнятий ITCSS, яка запозичує ідеї від BEM, впроваджуючи нові ідеї з ITCSS.

Синтаксис БЕМ диктує дуже специфічні правила. Нижче наведено зразок з веб-сайту БЕМ:

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

Блоки мають імена, які не мають поділу, або імена, розділені однією тире чи однією підкресленням. Елементи використовують дві підкреслення, і вони описують внутрішні елементи, що відповідають конкретному блоку. Модифікатори працюють однаково, але використовують дві тире для ідентифікації.

Гаррі глибше заглиблюється в BEMIT в цьому блозі. Його опис є дуже коротким, і це показує, що справжня природа ITCSS - це грати дружньо з іншими методологіями CSS.

Гаррі визначає просторів імен для об'єктів з'являються як префікси для кожного основного імені класу. Вони розпадаються як o- для об'єктів, c- для компонентів, і u- для комунальних служб (наприклад, читання чи центрування тексту).

Ось деякі зразки коду, що представляють типові угоди про найменування BEMIT.

…

Він також рекомендує використовувати @ суфікс для класів на основі стилів медіа. Отже .o-медіа клас може змінитися на .o-media @ lg для великих екранів і .o-media @ 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)