Классы и ID в CSS

Структура CSS

Внешний вид тега должен полностью определять его класс. Это означает, что если я присвою этот же класс тегу в другой части страницы, он будет выглядеть точно так же. Это обеспечивает такие удобства, как:
- Создание независимых компонентов, что и предполагает философия различных фреймворков, например React.
- Простота изменения - если нужно внести какие-то правки, то просто изменив CSS свойства в классе, вы обеспечите их применение для всех компонентов.
- Понятная для нового человека структура страницы.
Второе правило следует из первого - нужно стараться не использовать наследование свойств. Часто для экономии места родительскому тегу прописывают такие свойства, которые распространяются на вложенные теги: font-size, color, text-align. То есть если вы хотите задать цвет шрифта для главного текстового блока – вы задаете его именно для класса, который присвоен самому абзацу текста, а не для класса, присвоенного общему блоку. Пример:
```
<div class=”content”>
  <h2 class=”content-title”>Название поста в блоге</h2>
  <p class=”content-text”>Текст про то, как правильно сортировать мусор и чем это поможет стране в долгосрочной перспективе</p>
</div>
```
Неправильный CSS код:
```
.content {
  color: grey;
}

.content-title {
  font-size: 22px;
}

.content-text {
  font-size: 16px;
}
```
Казалось бы – сэкономили немного места, не став дублировать color: grey; для классов content-title и content-text. Но нет, нужно было дублировать, потому что если я в другом месте страницы захочу использовать похожий заголовок, мне нужно будет не просто присвоить тегу h2 класс content-title, но и скопировать div с классом content, что не всегда возможно и вообще нужно.
Не использовать вложенные селекторы вида .class-name .class-name2 .class-name3, потому что из-за этого:
- Нельзя использовать компоненты повторно.
- Очень сложно редактировать код, чтобы что-то не сломать / что-то точно заработало.
- Для изменения свойств нескольких в общем-то похожих элементов нужно исправлять CSS свойства в разных местах сайта.
Использовать говорящие названия классов - они обеспечивают более быстрое вхождение в проект нового человека, и с их помощью проще создавать независимые компоненты, которые не перекрывают стили друг друга.

Как правильно называть классы

Главное правило - название класса должно работать так: прочитав название класса в CSS файле любой человек, глядя на страницу в браузере, точно скажет, какой элемент / элементы на странице этот класс определяет. Пример - у вас есть верхнее меню:
```
<header class=”header”>
  <menu>
    <a href="">Item 1</a>
    <a href="">Item 2</a>
    <a href="">Item 3</a>
    <a href="">Item 4</a>
  </menu>
</header>
```
Вы хотите задать какие-то свойства (например, display: flex;) для тега menu. Для этого вам нужно присвоить ему класс. Как же правильно его назвать, чтобы соблюсти правило выше?
Во-первых, задайте себе вопрос: "Какой смысловой элемент/блок на странице создает этот тег?". Очевидно, что это - меню. После чего посмотрите, как это слово пишется на английском языке или посмотрите список распространенных названий внизу данной статьи. Самый простой и логичный вариант названия класса - <menu class="menu">. Но это не значит, что вы его должны сразу же писать. Задайте себе вопрос выше: "Увидев название этого класса в CSS, и глядя на страницу в браузере, могу ли я точно сказать, какой элемент / блок на странице он определяет? И могу ли я быть уверен, что это не изменится при добавлении похожих элементов на страницу?". Если на странице есть 2 разных меню, например, вверху и внизу, то, прочитав название класса .menu в CSS файле, вы не скажете точно, это класс для какого меню - верхнего или нижнего, особенно если они по-разному выглядят. В этом вам поможет следующий пункт.
Если просто названия, отвечающего на вопрос "Что это?" недостаточно, добавьте к нему вторым словом его местоположение. Чаще всего это имя тега, в который этот элемент вложен. В примере выше верхнее меню вложено в тег header, который означает "шапка сайта". Если выбрать для меню класс menu-header, то простым языком это можно прочитать как "меню в шапке сайта". Можно ли, прочитав название этого класса в CSS и взглянув на страницу в браузере сразу понять, что он определяет внешний вид и размещение верхнего меню? Вероятнее всего да.
Вложенным тегам часто добавляют, полностью или частично, название классов родителей, чтобы глядя в CSS и на страницу в браузере, вы могли точно сказать, какой элемент на странице этот класс определяет. Например, нам нужен класс для ссылок в верхнем меню. Вы задаете себе вопрос – "Что это?". И отвечаете "Ссылка в верхнем меню". Ссылка на английском - link. Класс для верхнего меню у вас есть. Следовательно, класс для ссылки будет menu-header-link.
Значит код нашего верхнего меню будет выглядеть так:
```
<div class=”header”>
  <menu class=”menu-header”>
    <a class=”menu-header-link” href="">Item 1</a>
    <a class=”menu-header-link” href="">Item 2</a>
    <a class=”menu-header-link” href="">Item 3</a>
    <a class=”menu-header-link” href="">Item 4</a>
  </menu>
</div>
```
Универсальные повторяющиеся классы. Бывают ситуации, когда элементы с одинаковым внешним видом периодически повторяются на странице. Например, чаще всего это заголовки смысловых блоков, кнопки и декоративные (подчеркивания, кавычки, выделения одного-двух слов в предложении другим цветом) элементы. Дизайнеры стараются сделать такие элементы повторяющимися, это красиво и логично с точки зрения удобства использования страницы. Поэтому перед тем, как назвать какой-то элемент с привязкой к месту его позиционирования, пролистайте макет и посмотрите – есть ли в макете еще элементы с таким же внешним видом? Если есть – то подумайте, что этот элемент представляет собой с точки зрения структуры и как его лучше назвать так, чтобы было понятно, что он определяет внешний вид всех таких элементов. Например, у вас есть кнопка с надписью Buy now - кнопка красного цвета, с белой надписью и закругленными краями. Дальше на странице есть кнопка с таким же стилистическим оформлением, но с надписью Call us. Значит, вы можете создать универсальный класс .btn или .btn-action (кнопка, призывающая сделать какое-то действие), тем самым значительно облегчив себе жизнь:
- во-первых, вы уменьшите размер css-файла;
- во-вторых, если вам потом нужно будет немного изменить внешний вид этих кнопок (например, поменять цвет фона, изменить отступы или размер шрифта), вы сделаете это очень быстро, поменять CSS свойства в одном классе, вместо нескольких разных.
Правило: перед тем, как называть класс, сначала проверьте - повторяется ли или может повторяться данный элемент на странице. Если да - придумайте ему универсальное название класса. Универсальные классы более важны, чем привязанные к конкретному месту на странице.

Стандартные названия классов для разных элементов

navbar - верхнее меню навигации, которое может включать в себя не только меню, но и логотип, а также часто кнопки и поле поиска.
название-родительского-класса-item - элемент какого-то списка, например - перечень работ в портфолио. Обратите внимание, что он обязательно включает в себя название класса родительского тега (например - portfolio-list-item).
название-родительского-класса-link - ссылка в меню (например, menu-footer-link).
название-родительского-класса-description - если у вас под названием какого-то элемента (например, преимущества компании) есть краткое описание (preference-description);
название-элемента-list - перечень чего-то, например - постов из блога (blog-post-list).
название-родительского-класса-title, название-родительского-класса-heading - названия, заголовки каких-то блоков. Их лучше оформлять тегом h (например - portfolio-item-title, our-team-item-heading);
section-title - заголовок для секции (смыслового блока, выделенного как правило фоном, отличным от соседних смысловых блоков).
btn, button - название класса для кнопки. Модификаторы (цвет, размер) пишутся через дефис (например, btn-large или button-selected)
модификаторы - используются если вы видите два очень похожих элемента, например - у кнопок одинаковый шрифт, радиус закругления, и padding. Если две кнопки отличаются в дизайне только характеристиками одного свойства (например, цвета или padding), то логично не создавать два разных класса с повторяющимися наборами свойств, а сделать один класс btn и класс-модификатор, который добавляет кнопке дополнительные свойства или изменяет их (например btn-primary или btn-red).
Правило: название модификатора должно отвечать на на вопрос "Какое свойство он меняет?" или "Какая смысловая нагрузка элемента с этим модификатором?". Например, btn-large - большая кнопка, font-medium - средний шрифт, btn-success - кнопка успешного выполнения действия.

О чем еще стоит думать на будущее в контексте вертки

Что случится, если в данный элемент добавить еще немного текста?
Предположим, на странице есть кнопка. И вы зафиксировали ей ширину (написали в CSS - width: 150px). А если сайт будет на нескольких языках, не повлечет ли это за собой то, что добавив в кнопку еще текста - весь дизайн полетит к чертям? Потому в данном случае, например, лучше применять паддинги, а не фиксированную ширину, чтобы кнопка могла изменять размер и подстраиваться под содержимое.
Что случится, если в данный проект будет добавлена еще одна страница?
Предположим, у нас есть одна страница - лендинг. И для удобства на тег body были повешены какие-то свойства - например фон и какие-то отступы. Что если заказчик скажет - добавь в этот проект еще одну страницу, отдельную, нам нужно там разместить информацию, чтобы было удобно давать ссылку именно на эту страницу? Вы создадите новый HTML файл, в котором тоже будет тег body. Для двух разных страниц часто подключают одну и ту же таблицу стилей, в результате чего может быть использован тот CSS файл, где для body прописан фон и другие специфические стили. Придется переделывать первую страницу, потому что, скорее всего, на второй странице такие стили нужны не будут.
Соответственно, все стили лучше всего прописывать в классах, чтобы эти классы потом можн обыло использовать на любых страницах, к которым будет подключен данный файл стилей.
Понятны ли названия классов другому человеку? Быстро ли другой человек разберется в структуре проекта и поймет что за что отвечает и как тут что работает?
Рано или поздно в проект нужно будет вносить изменения. И не факт, что это будет его создатель. Скорее всего, к этому делу будет подключен совсем другой разработчик. Или, возможно, ваш проект будет разрастаться, и у вас появится коллега. Ваша задача - максимально быстро ввести его в курс дела, чтобы он мог быстро приступить к работе. Чем более логично выстроена структура проекта и максимально понятно названы классы и написан сам код - тем быстрее он может это сделать. Или вы, например, через год захотите этот проект актуализировать. Вам самим придется потратить намного меньше времени на то, чтобы вспомнить как тут все устроено, если названия классов и структура были выбраны правильно.
Не много ли я дублировал кода, можно ли его оптимизировать?
Если видно, что в нескольких местах одни и те же свойства дублируются, есть смысл создать для них общий класс или придумать другой способ, чтобы не повторяться в нескольких местах. Одно из главных правил программиста - don’t repeat yourself (принцип DRY).
Надо ли создавать класс на этом элементе? Буду ли я для него применять CSS свойства?
Не нужно создавать классы для элементов, если у этих классов нет функционального назначения. Это только затрудняет ориентацию в проекте. Видишь класс - сразу кажется, что он был создан для стилизации данного элемента. Потом не находишь его в таблице стилей или в джаваскрипте - и сразу вопрос: "А смысл было его создавать?". Когда понадобится - тогда и создадим. Если же сразу прописывать массу классов, которые ничего не делают, это засоряет код и усложняет ориентацию в проекте.

PreviousКонтейнер в верстке NextПопулярные названия классов HTML/CSS

Last updated 4 months ago