Как решить, стоит ли цепить или расширять классы CSS

1656612130 kak reshit stoit li czepit ili rasshiryat klassy css

автор Сара Даян

DiJbWWgVzuJr0Rmgm4B1vUIHQPSQfewbwNji
Фото Александру Тугуи на Unsplash

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

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

В этой статье мы сравним две методики: цепь и расширение. Мы посмотрим, что они предлагают и каковы их недостатки, чтобы вы могли сделать более обоснованный выбор.

Цепь

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

Давайте возьмем следующий код OOCSS для кнопки:

.btn {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);}.btn-default {  border: 3px solid grey;}.btn-primary {  background: purple; color: white;}

Если бы вы имели цепочку модификаторов, ваш HTML выглядел бы так:

<button class="btn btn-primary">Primary button</button><button class="btn btn-default">Default button</button>

Теперь давайте сделаем нечто более сложное, на этот раз из BEM (блок, элемент, модификатор):

<div class="media-object media-object--reverse media-object--outlined">  <div class="media-object__media">    <img class="media-object__img media-object__img--faded img img--square" src=" alt=">  </div>  <div class="media-object__body">...</div></div>

Здесь у нас есть гораздо больше взаимодействующих классов:

  • The .media-object блок имеет несколько модификаторов (.media-object--reverse и .media-object--outlined).
  • The .media-object__img элемент имеет один модификатор (.media-object__img--faded).
  • The .media-object__img элемент также есть .img блок с собственным модификатором (.img--square).

Плюсы

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

Это также предотвращает мертвый код: поскольку вы имеете дело со строительными блоками, все потенциально полезно. При удалении компонента необходимо удалить только HTML.

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

На больших проектах, этот метод может сэкономить много времени.

Минусы

Одной из самых распространенных проблем, возникающих у людей с модульным CSS, является то, что он создает «классовое безумие» в HTML. Собственно говоря, это правда.

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

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

Расширение

Если вы не хотите объединять классы в цепочку, вы можете расширить их. У нас все еще есть те же отдельные блоки, но вместо того, чтобы объединять их в HTML, мы наследуем свойства базового класса его модификаторам. Таким образом мы можем использовать их все одновременно.

Давайте воспользуемся @extend функция в Sass для этого:

.btn {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);  &-default {    @extend .btn;    border: 3px solid grey;  }  &-primary {    @extend .btn;    background: purple;    color: white;  }}

Это превратится в такой фрагмент CSS:

.btn,.btn-default,.btn-primary {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);}.btn-default {  border: 3px solid grey;}.btn-primary {  background: purple; color: white;}

С приведенным выше CSS наш HTML будет выглядеть так:

<button class="btn-primary">Primary button</button><button class="btn-default">Default button</button>

Вместо того чтобы иметь множество, казалось бы, повторяющихся классов, у нас есть только один. Он носит явное имя и позволяет читать код. Мы еще можем использовать .btn отдельно, но если нам нужна его вариация, нам нужно только добавить в него часть модификатора вместо того, чтобы связывать новый класс.

Плюсы

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

Минусы

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

Существует также случай желания использовать несколько модификаторов вместе. С методом extend вы больше не пишете в HTML. Если вы собираетесь создавать новые комбинации, у вас остается одно решение: создать еще больше классов, расширив модификаторы. Это трудно поддерживать и приводит к увеличению кода. Каждый раз, когда вам нужно смешивать классы, вам нужно будет отредактировать CSS и создать новое правило, которое потенциально нельзя использовать повторно. Если вы удалите HTML, который его использует, вам также придется удалить класс CSS.

После мысли

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

«Раздутие» HTML не так уж страшно, если взглянуть на его реальное влияние. Модульность неизбежно создает больше кода – только выбранный вами метод определяет где это идет. С точки зрения производительности, больше HTML гораздо лучше, чем больше CSS.

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

Первоначально опубликовано на frontstuff.io.

Добавить комментарий

Ваш адрес email не будет опубликован.