Введение в ITCSS для веб-разработчиков

Существует несколько отличных методов для структурирования кода CSS, и все они работают по-разному. Самые популярные из них OOCSS и SMACSS, но есть также менее известный метод ITCSS (Inverted Triangle CSS), созданный Гарри Робертс,

Это не библиотека или фреймворк, а методология написания кода, который можно масштабировать и которым легко манипулировать. Преимущества ITCSS варьируются от простой организации кода до меньшие размеры файлови лучшее понимание архитектуры CSS.

ITCSS не для всех, но предоставляет профессиональный способ ясного взгляда на таблицы стилей в процессе кодирования. Давайте углубимся в концепции ITCSS и посмотрим, как их можно применить к веб-проектам.
Что такое ITCSS?
Современные способы организации CSS часто прибегают к модульности или CSS-объектам для конструирования абстрактных идей.

Новая идея Перевернутый треугольник CSS это многослойный способ разделения CSS-свойств на основе их уровня специфичности и важности. Это менее известный метод по сравнению с SMACSS и OOCSS – хотя оба они могут быть объединены с ITCSS.

Поскольку ITCSS в основном является частной собственностью, не существует подробного руководства по его использованию. В нашем распоряжении только набор конкретных принципов. Автор говорит о них в видео ниже.

По умолчанию ITCSS использует те же принципы, что и OOCSS но с большим разделением на основе специфики. Так что, если вы уже знакомы с OOCSS, попробуйте эту уникальную альтернативную архитектуру CSS.

Вот некоторые из самых больших преимуществ использования ITCSS:

• Объекты страницы могут быть разделены на свои собственные файлы CSS / SCSS для повторного использования. Это просто скопировать / вставить и расширить каждый объект в другие проекты.
• Глубина специфичности зависит от вас.
• Здесь нет заданной структуры папок и не требуется использование инструментов предварительной обработки.
• Вы можете объединить понятия из других методологий, таких как Модули CSS создать свой собственный гибридный рабочий процесс.

Система ITCSS
Давайте посмотрим, как работает модель перевернутого треугольника, используя следующую иллюстрацию из Почта Любоса Кметко,
ИЗОБРАЖЕНИЕ: XFive.comНаправленный поток от плоской вершины перевернутого треугольника до кончика внизу символизирует увеличение специфичности. Этот фокус на меньшую специфичность упрощает многократное использование классов на сайте.

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

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

• Настройки – переменные и методы препроцессора (без фактического вывода CSS)
• Инструменты – Миксины и функции (без фактического вывода CSS)
• Generic – CSS сбрасывает, что может включать Эрик Мейер сброс, Normalize.css или ваш собственный пакет кода
• Элементы – Селекторы одного HTML-элемента без классов
• Объекты – классы для структуры страницы, обычно следующие по методологии OOCSS
• Компоненты – эстетические классы для стилизации любых и всех элементов страницы (часто в сочетании со структурой классов объектов)
• Козыри – самые специфические стили для переопределения всего остального в треугольнике

Каждый слой перевернутого треугольника можно настроить в соответствии с вашими потребностями. Поэтому, если вы не используете препроцессор CSS, вам не понадобятся слои «Настройки» или «Инструменты».

Вы должны свободно интерпретировать каждый подраздел по своему усмотрению. Например, Джордан Кощей объясняет, как он объединил структуру и эстетику в классы объектов, оставив очень мало в разделе «Компоненты».

В ITCSS нет жестких правил, которым вы должны следовать. Там нет проверки соответствия ITCSS, и никто не будет кричать на вас за небольшие изменения этой модели.

Хотя создатель ITCSS Гарри Робертс был заинтересован в том, чтобы сохранить свои методы проприетарными для внутреннего использования, вы можете найти пример ITCSS с открытым исходным кодом в это GitHub репо, Он размещен в учетной записи CSS Wizardry, которая является персональным сайтом Гарри Робертса.
BEM + IT = BEMIT Именование
Одна из самых популярных схем именования CSS BEM, Это расшифровывается как Block-Element-Modifier и имеет очень специфический синтаксис.

Каждый элемент в БЭМ описывает соглашение об именах для классов CSS:

• Блоки – это классы для отдельных элементов, которые могут быть реплицированы и автономны.
• Элементы всегда являются частью блока
• Модификаторы всегда модифицируют блок или элемент, чтобы немного изменить его внешний вид (вкл / выкл, активный / неактивный, фиксированный, статический, выделение / нейтральный).

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

Синтаксис БЭМ диктует очень конкретные правила. Ниже приведен образец из Сайт БЭМ:
.form {}
.form – theme-xmas {}
.form – simple {}
.form__input {}
.form__submit {}
.form__submit – отключено {}

У блоков есть имена без разделения, или имена, разделенные одной чертой или одним подчеркиванием. Элементы используют два подчеркивания, и они описывают внутренние элементы в соответствии с этим конкретным блоком. Модификаторы работают так же, но используют две черты для идентификации.

Гарри углубляется в BEMIT в этот блог, Его описание очень краткое и показывает, что истинная природа ITCSS заключается в том, чтобы дружить с другими методологиями CSS.

«Я решил расширить BEM, чтобы стать BEMIT. BEMIT не добавляет никаких других типов классов – у нас все еще есть только блоки, элементы или модификаторы – но он добавляет информацию об использовании и состоянии ».

Гарри определяет пространства имен для объектов, появляющихся как префиксы для каждого основного имени класса. Они разбиваются как o- для объектов, c- для компонентов и u- для утилит (например, clearfix или центрирование текста).

Вот пример кода, представляющего типичные соглашения о присвоении имен BEMIT.

…

Он также рекомендует использовать суффикс @ для классов, основанных на стилях мультимедиа. Таким образом, класс .o-media может измениться на .o-media @ lg для больших экранов и .o-media @ md для экранов среднего размера.

Лично я думаю, что дополнительные суффиксы слишком сложны для базовых веб-проектов. Я думаю, что большинство разработчиков предпочли бы использовать обычные медиазапросы и переписывать классы в разных точках останова. Но я не могу сказать, является ли метод правильным или неправильным, и каждый может индивидуально решить, хотят ли они использовать BEMIT или нет.

Я настоятельно рекомендую прочитать это вступление BEMIT статья чтобы узнать больше о том, почему ITCSS расширил BEM, и как вы можете назвать свои CSS-классы.

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

Нам нужно многому научиться, и если вы новичок в CSS, это будет непростая идея. Но если вы хотите учиться, я гарантирую, что вы будете удивлены гладкой природой кода ITCSS.
Завершение
Фронтальные разработчики всегда стремятся оптимизировать свой рабочий процесс. ITCSS – это просто еще один метод, который может способствовать усовершенствованию метода структурирования сложных веб-сайтов.

Трудность состоит в том, чтобы узнать, как это работает в реальной работе проекта. Если у вас есть смелость и желание учиться, ITCSS может быть чем-то, что стоит добавить в ваш инструментарий. Несмотря на то, что я не нашел никакой официальной документации, в Интернете все еще есть много ресурсов, чтобы узнать об ITCSS.

(Фото на обложке через speakerdeck.com)