Маркировка блоков декларации

Трюк для организации кода CSS

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

Повторное использование кода в CSS

Позвольте мне кратко рассказать о повторном использовании кода в CSS.

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

Вот пример, взятый из реального проекта. Допустим, у нас есть кнопка, которая имеет определенный внешний вид.

#storage-operations button {
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  cursor: pointer;
}

Позже мы узнаем, что нам нужно, чтобы некоторые другие элементы имели такой же стиль. Вместо того чтобы преобразовывать селектор кнопки #storage-operations в класс и распылять этот класс по всей разметке, мы просто добавим несколько селекторов в тот же блок объявления, как показано ниже:

#storage-operations button,
.conflict-status,
#add-task,
#tab-list a,
:is(
  fieldset[name=task],
  #add-project-form,
  #project-import-conflict,
  #login,
  #basic-settings,
  #collab-form
) :where(label, button, summary) {
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  cursor: pointer;
}

Часть кода, которая используется повторно, - это сам блок объявления:

{
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  cursor: pointer;
}

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

Проблема разметки

Но теперь у нас есть еще одна проблема.

Со всеми селекторами, расположенными над блоком объявления, мы не совсем понимаем, чего должен достичь блок объявления. Даже если мы внимательно прочитаем код, мы не поймем, что он собой представляет. Мы можем или не можем представить, как это выглядит, но не что это такое.

В CSS нет (пока) универсального способа обозначения блоков декларации. Что же мы можем сделать?

Комментарии

Конечно, мы можем использовать комментарии.

#storage-operations button,
.conflict-status,
#add-task,
#tab-list a,
:is(
  fieldset[name=task],
  #add-project-form,
  #project-import-conflict,
  #login,
  #basic-settings,
  #collab-form
) :where(label, button, summary) {
  /* Form control label */
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  cursor: pointer;
}

Проблема в том, что они не отображаются в инструментах разработчика. Если мы проверим элемент, к которому применяется этот блок объявления, мы увидим следующее:

Теперь, если мы проверим

Поддельный селектор

Вместо комментариев мы можем использовать поддельный селектор, например, так:

#--FORM-CONTROL-LABEL {
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  cursor: pointer;
}

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

Теперь, если мы проверим

Это позволяет нам давать осмысленные имена блокам декларации и быстро находить их в коде без необходимости искать их по номеру строки. (Можно возразить, что нет ничего плохого в использовании номеров строк и что набрать несколько цифр физически быстрее, чем серию букв, и это вполне обоснованно. Разработчики иногда придумывают глупые оправдания, чтобы делать странные вещи.😅)

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

Настройки форматирования кода

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

Я попробовал перенести фигурную строку на следующую строку, и, похоже, это работает лучше:

#storage-operations button,
.conflict-status,
#add-task,
#tab-list a,
:is(
  fieldset[name=task],
  #add-project-form,
  #project-import-conflict,
  #login,
  #basic-settings,
  #collab-form
) :where(label, button, summary),
#--FORM-CONTROL-LABEL
{
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
}

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

Другой вариант - оставить поддельный селектор в верхней части списка:

#--FORM-CONTROL-LABEL,
#storage-operations button,
.conflict-status,
#add-task,
#tab-list a,
:is(
  fieldset[name=task],
  #add-project-form,
  #project-import-conflict,
  #login,
  #basic-settings,
  #collab-form
) :where(label, button, summary) {
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
}

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