Архитектура CSS и три столпа поддерживаемого CSS

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

Возможно, самый известный пример применения принципов разработки программного обеспечения к коду CSS — это контраст между DRY и WET CSS. DRY акроним расшифровывается как «Не повторяйся», а WET — «Нам нравится печатать».

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

Когда ваш CSS является WET, вы можете СУШИТЬ его, идентифицируя общие части вашего кода и абстрагируя эту общую функциональность в базовый класс (или миксин, если используется препроцессор).

Использование базовых классов и дочерних классов в вашем коде называется наследованием и выполняется с помощью @extend в Sass . Когда мы используем mixins или директиву @mixin, используя термины Sass, мы используем состав . Наследование, состав и использование констант Sass являются отличными инструментами для выполнения абстракции.

Экспериментируя с композицией в CSS

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

Мы могли бы разметить каждый компонент прямоугольника следующим образом, используя соглашение об именах БЭМ:

<div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div>

Давайте определим эти четыре класса в Sass, используя наследование. Мы начнем с базового класса .rectangle@extend

 .rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}

Структура понятна, и мы не повторяем себя в модифицированных классах. Тем не менее, создание иерархии из пяти модификаторов даст 31 определение класса, где большинство наших определений будет содержать не что иное, как набор директив @extend

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

 @mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}

Предположим, у нас есть поле для специальных функций.

 <div class="feature-box"></div>

Если окно объекта округлено, но не зелено, все, что нам нужно сделать, это расширить класс прямоугольника и включить миксин, который делает прямоугольник округленным:

 .my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}

Структура остается гибкой, без затрат на определение классов для каждой комбинации.

На пути к лучшей архитектуре CSS

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

Чтобы помочь объяснить и продемонстрировать практическое применение каждого из этих принципов, я создал курс по архитектуре CSS безупречной работы; Принципы CSS Архитектуры

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

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

Я посвятил полный раздел применению трех принципов архитектуры CSS на практике, создав небольшую библиотеку компонентов с использованием архитектуры ITCSS и Sass. Если вы хотите узнать больше об CSS-архитектуре, запишитесь на курс и увидимся внутри!