Введение в CCSS (Компонентный CSS)

CCSS или компонентный CSS, это архитектура, которая упрощает составление CSS для крупных веб-приложений.

Большие веб-приложения, как правило, содержат много CSS файлов, над которыми работают разные разработчики.

С появлением такого большого количества фреймворков, руководств, инструментов и методологий (OOCSS, SMACSS, BEM и т.д.), разработчики нуждаются в CSS архитектуре, которая обеспечит простое сопровождение, управление и масштабирование проектов.

Как инженер интерфейсов, я считаю, что веб-разработка на основе компонентов, это именно то, что нужно. Веб-компоненты представляют собой набор стандартов, которые работают через W3C. Они позволяют нам обернуть разметку и стили в многократно используемые элементы HTML, действительно инкапсулированные.

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

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

Содержание

Элементы CCSS

Ниже приведены основные элементы, используемые либо полностью, либо в измененном виде, чтобы достичь оптимальной конфигурации архитектуры CCSS.

SMACSS

SMACSS, был создан Джонатаном Снуком, и расшифровывается, как Scalable and Modular Architecture for CSS (Масштабируемая и модулируемая архитектура для CSS). Это, скорее, руководство по стилям, чем фреймворк. Для получения более детальной информации о том, как он используется в структуре CCSS, прочитайте статью SMACSS.

Введение в CSS-фигуры

BEM

BEM был создан разработчиками Yandex, расшифровывается, как “Block”, “Element”, “Modifier” ("Блок", "Элемент", "Модификатор"). Эта методология предлагает новый подход при разработке веб-интерфейсов. Более подробную информацию по BEM вы можете найти в отличной статье Гарри Робертса.

Sass

Sass - это CSS с суперсилами. Я очень рекомендую именно его, но вы можете использовать также Less. Дополнительную информацию вы можете найти в документации Sass.

Compass

Compass не содержит определения классов; это расширение для Sass, предоставляющее много дополнительных утилит. Оно используется для создания примесей и компиляций Sass.

Примеси Compass практически всегда должны использоваться, когда нам нужны префиксы. Опять же, его применение весьма желательно, или по своему усмотрению вы можете использовать Bourbon.

Принципы CCSS

Теперь давайте рассмотрим основные принципы CCSS.

Компонентная основа

Создание малых и независимых компонентов, которые могут быть применены в разных местах. Многократно используемый компонент CSS может размещаться в различных частях дерева DOM и не требует использования только определенных типов элементов.

При необходимости нужно использовать дополнительные элементы HTML, чтобы сделать возможным многократное использование компонента.

Модульность и изолированность

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

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

Введение в CSS Scroll Snap Points

Возможность компоновки

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

Для всех разработчиков гораздо проще составлять CSS-код, похожий на блоки конструктора «Лего», чем участвовать в CSS войне. Классы CSS являются строительными блоками, которые используются для составления стилей.

Предсказуемость

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

Документирование

Большинство людей считают, что CSS не требует пояснений. На самом деле это, как правило, не так! Компоненты CSS должны быть четко задокументированы, с тем, чтобы в описаниях было подробно разъяснено, что они делают и как они должны использоваться.

Структура каталогов

Ниже для облегчения восприятия приводится пример структуры папок. Я также разместил пример настройки CCSS в хранилище на GitHub:

Структура каталогов

Нужно только отредактировать / составить файлы в папке scss/ дерева папок, приведенного выше. Это позволяет легко обновлять внешние библиотеки, расположенные в папке ext/.

Многие приложения поддерживаются внешними CSS-фреймворками, такими как Bootstrap или Foundation, поэтому я добавил их в этом примере в папку ext/. Хотя конечно здорово, если все CSS-коды пишутся с нуля; тем не менее, вы можете использовать описанный выше метод.

Папка components/ отлично подходит для применения AngularJS, но ее можно настроить под другие фреймворки или приложения. Более подробно я расскажу об этом в разделе «Архитектура».

На странице HTML, включающей в себя все файлы .css из папки style/, содержатся все скомпилированные CSS-коды (из Grunt, Compass и т.д.). Никогда не изменяйте их.

Конвенция имен - упрощенный BEM

  • u-className - глобальные базовые классы / классы утилит;
  • img-className - глобальные классы изображений;
  • animate-className - глобальные классы анимации;
  • ComponentName - стандартные компоненты (B);
  • ComponentName-elementName - элементы компонента (E);
  • ComponentName--modifierName - модификатор компонента (М).

Обратите внимание на название стиля компонентов UpperCamelCase, это основной элемент; это означает, что он является верхним элементом компонента. Имена элементов и модификаторов - elementName и modifierName, соответственно. Не используйте дефис (-), чтобы разделять имена компонентов, так как он означает начало элемента / имени элементов.

Анимация SVG с помощью CSS

Архитектура и дизайн

Давайте рассмотрим архитектуру, построенную согласно принципам CCSS.

Grunt

Grunt является отличным элементом для запуска задач, который автоматизирует многие рутинные действия (например, компиляцию CSS или проверку HTML).

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

Организация файлов

Посмотрите еще раз на структуру папок, которая является производной от SMACSS. Обратите внимание на папку ext/, которая содержит все внешние фреймворки (такие как Bootstrap). Для более простого внесения изменений изменения и расширения должны вноситься не в нее, а в папку base/.

base/ - это место, где хранятся глобальные базовые стили, используемые приложением в целом.
_base.scss - базовые стили только для селекторов элементов. Они являются своего рода "CSS-переключателями".
_base-classes.scss - все классы утилит, используемые по всему приложению в разных представлениях, компонентах и на страницах. Используется префикс имени класса u-.
images.scss используется в качестве источника компиляции SCSS. Должен определять и встраивать все изображения сайта, как Data URI. /app/styles/images.css генерируется из этого файла.
_animate.scss содержит все классы анимации всего приложения.
_bootstrap-overrides.scss содержит только файлы, измененные фреймворком. Иногда уровень, назначенный селекторам фреймворка, настолько высок, что их переопределение требует дополнительных селекторов. Изменение на глобальном уровне не может быть осуществлено в контексте компонента SCSS. Вместо этого все глобальные изменения собираются здесь.

Компоненты

Любой блок многоразово используемого CSS-кода, не упомянутого выше, считается "компонентом". Мы используем AngularJS, поэтому я разделяю их на три основные категории: представления / страницы, директивы и стандарты; следовательно, структура этих папок опирается на SMACSS.

В примере настроек, размещенном на GitHub, я, чтобы было понятнее, создал отдельные папки.

Если ваше приложение невелико, вы можете собрать их все в одну папку. Все компоненты, созданные в соответствии с модифицированной конвенцией имен BEM, используются в сочетании с CamelCase.

Это дало мне огромный плюс, так как стимулировало остальных членов команды следовать синтаксису BEM. Это также позволило избежать путаницы при отходе от использования типичного стиля BEM с его символами -, -- и __, которые генерируют такие имена классов, как module-name__child-name--modifier-name!

Также важно, что порядок определения классов CSS в компоненте отражает представление HTML. Это облегчает сканирование, назначение стилей, редактирование и применение классов.

Наконец, хорошо иметь для веб-приложения обширное руководство по стилям и следовать гайдлайнам по CSS и Sass (например, избавиться от необходимости использования @extend).

Пример CCSS

Смотрите код примера настроек CSS.

Вот пример компонента на Sass:

.ProductRating {
  // вложенный элемент
  @include e(title) {
    ...
  }
  // вложенный элемент
  @include e(star) {
    ...
    // модификатор вложенного элемента
    @include m(active) {
      ...
    }
  }
}

Это код компилируется в следующий CSS:

.ProductRating {
  ...
}
// вложенный элемент
.ProductRating-title {
  ...
}
// вложенный элемент
.ProductRating-star {
  ...
}
// модификатор вложенного элемента
.ProductRating-star--active {
  ...
}

И ваш HTML-код может выглядеть приблизительно следующим образом:

<div class="ProductRating">
  <img alt="Company logo" class="img-logo">
  <h3 class="ProductRating-title">Title</h3>
  <div class="u-starHolder">
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star"></span>
  </div>
</div>

Вы можете задействовать упрощенную BEM-примесь, которая для достижения этой цели использует эталонный селектор, и является более простой, чем @at-root.

В Sass 3.3+ работать с BEM стало намного проще, что дает нам возможность поддерживать и сопровождать код, который легко понять.

Ваше участие

Ваше участие в развитии материалов, размещенных на GitHub, в виде просьб добавить больше примеров, разъяснений и т.д., будет очень полезным.

И обязательно ознакомьтесь с самими материалами, в которых вы также сможете найти дополнительную информацию и ссылки на полезные источники, связанные с CCSS. Если у вас есть вопросы или замечания, напишите о них в комментариях к этой статье или к хранилищу GitHub.