Не секрет, что для разработки, существует ряд замечательных методов структурирования CSS кода, и все они работают по-разному. Самые популярные OOCSS и SMACSS, но недавно «гуглив» решение какой-то проблемы я совершенно случайно столкнулся с ITCSS. Изучив ITCSS, я решил написать о нем этот пост, и поделиться с вами своими мыслями…
Вступление
ITCSS создал Harry Roberts и расшифровывается ITCSS как Inverted Triangle CSS (IT + CSS) и не имеет ничего общего с IT технологиями 🙂 . ITCSS – не библиотека или платформа, а масштабируемая методология записи кода, которой вдобавок легко управлять. Преимущества ITCSS заключаются в простой организации кода, уменьшенных размеров файлов на выходе, и большего понимания архитектуры CSS.
ITCSS подходит не для всех, но во время кодинга, он позволяет с профессиональной точки зрения, ясно взглянуть на получающиеся таблицы стилей и весь код в целом. Ладно, давайте не будем дальше копаться в сухих понятиях ITCSS и давайте посмотрим, как его можно применять в полноценных веб-проектах.
Что такое ITCSS?
Современные способы организовать лаконичный и красивый CSS код, частенько прибегают к так называемой модуляризации или CSS объектам для реализации какой-то идеи.
Новый метод перевернутого CSS треугольника представляет собой как бы многоуровневую и линейную иерархию CSS свойств на основе их уровня важности и специфичности. Другими словами ITCSS – не очень распространен как например OOCSS и SMACSS, но при объединении двух последних как раз и получится ITCSS.
На момент написания данного текста для ITCSS не существовало особо никакой подробной документации и правил, за исключением ряда определенных принципов о которых например вкратце можно прочитать тут.
По умолчанию ITCSS использует те же принципы что и OOCSS, но с большим разделением на основе специфики. Поэтому, если вы уже знакомы с OOCSS, то ITCSS не покажется вам чем-то особенно новым, с архитектурной точки зрения.
В списке ниже я решил вкратце описать некоторые самые большие преимущества ITCSS:
- Объекты на страницах могут быть разделены на свои собственные CSS/SCSS файлы для многократного использования. Согласитесь, намного просто «копипастить» одни объекты в другие тем самым расширяя их;
- Контроль глубины специфики кода;
- Отсутствие иерархии папок и не обязательное использование утилит для препроцессорной обработки кода;
- Возможность объединять понятия с другими методологиями, например с CSS modules для того что бы создавать свой собственный гибридный поток CSS операций.
Принцип работы
Предлагаю рассмотреть модель работы ITCSS на примере перевернутого треугольника.
Как вы можете видеть, начиная от основания треугольника (вверху) до его конца (внизу) идет постепенное увеличение специфики модели. Такая структура облегчает в большей или меньшей степени написание кода и делает акцент на удобное повторное использование классов, несколько и более раз.
Каждый «подраздел» треугольника может рассматриваться как отдельный файл или группа файлов, хотя вам, естественно не нужно писать код 1:1 таким образом. Такую структуру полезно использовать в SASS/LESS, где присутствует возможность импорта кода из файла. Если вам все еще не понятна структура этого треугольника, то вы можете представить, что каждый его «подраздел» – методология, которая служит для гибкого и повторного использования CSS кода.
Давайте теперь кратко и по пунктам разберем каждый «подраздел» перевернутого треугольника.
- Настройки – препроцессорные переменные и методы (естественно без CSS вывода);
- Инструменты – миксины и функции (без CSS вывода);
- Сбросы – CSS сбросы стилей, например Normalize.css или ваш собственный код;
- Элементы — единственные селекторы элемента HTML без классов;
- Объекты – классы для кастомной структуры страницы, написанные на основе OOCSS методологии;
- Компоненты – эстетические классы для укладки всех и любых элементов страницы (в сочетании со структурой объектных классов);
- Дополнения – наиболее специфические стили для переопределения чего либо в треугольнике.
Каждый «подраздел» треугольника можно настраивать в соответствии с вашими потребностями. Поэтому, например, если вы не используете CSS препроцессор, то вам не понадобятся «подразделы» настроек и инструментов.
Вообще, при разработке на ITCSS вы можете не ограничивать себя и интерпретировать каждый подраздел, так как вам нужно. Например, попробовав написать пару сайтов на ITCSS, я понял, что мне удобнее объединять структуру и эстетику в классы объектов, оставляя очень мало кода для раздела компонентов. В любом случае, ITCSS не имеет строгих правил, на которые необходимо ориентироваться при разработке. Вы также можете посмотреть примеры реализации проекта на ITCSS у самого автора данной методологии, в его открытом репозитории и позаимствовать оттуда какие-то полезные заготовки.
БЭМ+ITCSS
Одна из самых популярных методологий, на момент написания этого текста – БЭМ (BEM). Эта аббревиатура означает – блок, элемент, модификатор и использует очень специфический синтаксис.
Вся сущность БЭМ заключается в том, что он описывает каждый элемент с помощью специального наименования CSS классов.
- Блок – класс для какого-то одного отдельного элемента, который может повторяться или так и остаться одним единственным;
- Элемент – всегда является частью блока;
- Модификатор – описывает все состояния блока или элемента, т.е например (выделенный/не выделенный, активный/не активный элемент ит.п).
Возможно, из заголовка вы уже догадались, что дальше я рассмотрю вариант написания кода при объединении ITCSS c БЭМ (BEM) и по итогу получится BEMIT. В общем и целом BEMIT заимствует все самое лучшее из БЭМ и объединяет с новыми идеями ITCSS.
Давайте ниже, рассмотрим стандартный БЭМ синтаксис (взят с официального сайта):
.form { } .form--theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { }
Обратите внимание, что у блоков есть имена либо без разделения, либо с разделением на тире или с нижним подчеркиванием. Элементы используют два нижних подчеркивания, и они описывают внутренние элементы, соответствующие данному описываемому блоку. Модификаторы работают аналогично, но используют два тире для идентификации.
Давайте теперь добавим в БЭМ немного IT CSS в качестве дополнительных префиксов в начале. Каждый из префиксов будет иметь свое значение и уникальное имя. Для объектов будет использоваться префикс o-
, для компонентов с-
и для свойств u-
(например для центрирования текста, clearfix ит.п).
Давайте теперь посмотрим на отрывок HTML кода написанный с помощью BEMIT:
Для медиа-запросов можно добавлять префикс @
и название текущего разрешения. Например, .o-media
можно изменить на .o-media@lg
для большого разрешения и .o-media@md
для среднего.
С другой стороны, дополнительные суффиксы слишком усложняют читаемость кода и их не стоит использовать в серьезных проектах. Я думаю, что большинство разработчиков предпочитают использовать общие медиа-запросы и переписывать классы в различных точках изменения разрешения. Однако, я не могу сказать ,что любой метод является правильным или неправильным, но любой может самостоятельно решить использовать ему BEMIT в дальнейшем или нет. В заключении хочу сказать, что ITCSS стоит применять в основном там, где необходимо повторное использование масштабируемого CSS, а в остальных случаях я бы использовал чистый БЭМ без использования его вкупе с ITCSS.