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

Есть несколько отличных методов для структурирование кода CSS, и все они работают по-разному. Наиболее популярными являются OOCSS и SMACSS, но есть и менее известный метод, называемый ITCSS (Перевернутый Треугольник CSS) созданный Гарри Робертсом.

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

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

Что такое ITCSS?

Современные способы организации CSS часто прибегают к модульность или же CSS объекты строить абстрактные идеи.

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

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

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

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

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

Система ITCSS

Давайте посмотрим, как работает модель перевернутого треугольника, используя следующую иллюстрацию из поста Любоса Кметко.

Направленный поток от плоской вершины перевернутого треугольника до кончика внизу символизирует увеличение специфичности. это сосредоточиться на меньшей специфичности облегчает повторное использование классов на сайте несколько раз.

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

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

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

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

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

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

Хотя создатель ITCSS Гарри Робертс был заинтересован в том, чтобы сохранить свои методы закрытыми для внутреннего использования, вы можете найти пример открытого кода ITCSS в этом репозитории GitHub. Он размещен в учетной записи CSS Wizardry, которая является персональным сайтом Гарри Робертса..

BEM + IT = BEMIT Именование

Одна из самых популярных схем именования CSS - BEM. Это расшифровывается как Block-Element-Modifier и соответствует очень особому синтаксису..

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

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

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

Синтаксис БЭМ диктует очень конкретные правила. Ниже приведен пример с сайта БЭМ:

.form  .form - theme-xmas  .form - просто  .form__input  .form__submit  .form__submit - отключено

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

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

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

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

...

Он также рекомендует использовать @ суффикс для классов, основанных на стилях медиа. Итак .Уплотнительные СМИ класс может измениться на .о-медиа @ Л.Г. для больших экранов и .о-медиа @ мкр для экранов среднего размера.

Лично я думаю, что дополнительные суффиксы слишком сложен для базовых веб-проектов. Я думаю, что большинство разработчиков предпочли бы использовать обычные медиазапросы и переписывать классы в разных точках останова. Но я не могу сказать, является ли метод правильным или неправильным, и каждый может индивидуально решить, хотят ли они использовать 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)