Кратко
СкопированоУниверсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в CSS и позволяет управлять стилями элемента. К тому же по имени класса удобно искать и манипулировать элементами на странице при помощи JavaScript.
Пример
СкопированоНа странице может быть множество одинаковых тегов. Например, несколько заголовков второго уровня.
...<!-- Первый заголовок --><h2>В Санкт-Петербурге</h2><p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p><!-- Второй заголовок --><h2>В России</h2><p>«Умом Россию не понять...»</p><!-- Третий заголовок --><h2>В мире</h2><p>На Брайтон Бич опять идут дожди.</p>...
... <!-- Первый заголовок --> <h2>В Санкт-Петербурге</h2> <p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p> <!-- Второй заголовок --> <h2>В России</h2> <p>«Умом Россию не понять...»</p> <!-- Третий заголовок --> <h2>В мире</h2> <p>На Брайтон Бич опять идут дожди.</p> ...
🤖 Как при текущей разметке можно изменить цвет текста первого заголовка? Можно обернуть все заголовки в разные дополнительные теги. И использовать их комбинации в качестве селекторов для написания стилей. Но это решение будет неверным. Разметка распухнет, её сложно будет читать. Так делать не нужно.
Чтобы выделить какой-то отдельный элемент или набор элементов и применить стили выборочно можно использовать атрибут class
.
...<!-- Первый заголовок --><h2 class="news__local">В Санкт-Петербурге</h2><p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p><!-- Второй заголовок --><h2 class="news__country">В России</h2><p>«Умом Россию не понять...»</p><!-- Третий заголовок --><h2 class="news__world">В мире</h2><p>На Брайтон Бич опять идут дожди.</p>...
... <!-- Первый заголовок --> <h2 class="news__local">В Санкт-Петербурге</h2> <p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p> <!-- Второй заголовок --> <h2 class="news__country">В России</h2> <p>«Умом Россию не понять...»</p> <!-- Третий заголовок --> <h2 class="news__world">В мире</h2> <p>На Брайтон Бич опять идут дожди.</p> ...
В коде выше каждому заголовку второго уровня заданы разные имена классов. Это позволит без особых проблем написать стили только для первого заголовка.
.news__local { color: #ed6742;}
.news__local { color: #ed6742; }
Цель достигнута, при этом стили остальных заголовков второго уровня остались прежними.
Как понять
СкопированоИмя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class
. Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.
Как пишется
СкопированоАтрибут класса можно задать любому тегу в HTML-разметке. Как и любой другой атрибут, класс прописывается внутри треугольных скобок открывающего тега.
<p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
При выборе имени класса следует придерживаться нескольких правил:
- В именах классов используй только английские слова.
<!-- Плохо --><p class="osnovnoy-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<!-- Плохо --> <p class="osnovnoy-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
- Имена классов пишутся маленькими буквами.
<!-- Плохо --><p class="Main-Text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<!-- Плохо --> <p class="Main-Text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
- Для разделения двух слов используются тире (
-
) или знак подчёркивания (_
). Не используй camelCase 🐫
<!-- Плохо --><p class="mainText"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main__text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<!-- Плохо --> <p class="mainText"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="main__text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
- Лучше не использовать больше трёх слов в имени класса.
<!-- Плохо --><p class="daily-news__main-alert-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="news__main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<!-- Плохо --> <p class="daily-news__main-alert-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="news__main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
- Не используй в названиях классов цифры или числительные. Завтра порядок блоков может измениться и нумерация будет сбивать с толку.
<!-- Плохо --><p class="text1"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><p class="text-two">Экзистенциализм сложен.</p><p class="text3">Художественное переживание последовательно.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><p class="sub-text">Экзистенциализм сложен.</p><p class="note-text">Художественное переживание последовательно.</p>
<!-- Плохо --> <p class="text1"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <p class="text-two">Экзистенциализм сложен.</p> <p class="text3">Художественное переживание последовательно.</p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <p class="sub-text">Экзистенциализм сложен.</p> <p class="note-text">Художественное переживание последовательно.</p>
- Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.
<!-- Плохо --><p class="p-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><p class="difficult">Экзистенциализм сложен.</p><p class="perezhivanie">Художественное переживание последовательно.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><p class="sub-text">Экзистенциализм сложен.</p><p class="note-text">Художественное переживание последовательно.</p>
<!-- Плохо --> <p class="p-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <p class="difficult">Экзистенциализм сложен.</p> <p class="perezhivanie">Художественное переживание последовательно.</p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <p class="sub-text">Экзистенциализм сложен.</p> <p class="note-text">Художественное переживание последовательно.</p>
- Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.
<!-- Плохо --><p class="green-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<!-- Плохо --> <p class="green-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p> <!-- Хорошо --> <p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
- Не используйте пробел для разделения слов внутри одного имени класса.
В примере ниже main
и text
будут восприниматься браузером как два отдельных класса, а не один, состоящий из двух слов.
<p class="main text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.</p>
<p class="main text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. </p>
Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.
Подсказки
Скопировано💡 У элемента может быть несколько классов. Перечисляй классы, разделяя их пробелом.
<p class="sub-text news-text">Экзистенциализм сложен.</p>
<p class="sub-text news-text">Экзистенциализм сложен.</p>
💡 Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.
На практике
Скопированосоветует Скопировано
🛠 Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id
. Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.
Причина в том, что идентификатор должен быть уникальным. В разметке может быть только один идентификатор с определённым именем. Это крайне неудобно для написания стилей, поскольку придётся многократно повторять одни и те же стили, но для разных идентификаторов. С классами эта проблема решается просто. Пропиши всем элементам, для которых нужно задать определённый внешний вид, один и тот же класс.
У многих начинающих разработчиков существует представление, что идентификаторы требуются для связи JavaScript и HTML, но это не так. В современном виде JavaScript предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!
🛠 После того, как разметка и стили написаны, посмотри на них внимательно. Высока вероятность, что написано несколько одинаковых блоков стилей для разных классов. Имеет смысл оптимизировать код и вынести повторяющиеся стили в отдельный блок и задать всем похожим элементам один класс.
🛠 Представляй каждый блок, из которого состоит страница, как самостоятельный элемент, который можно будет убрать с текущей страницы и перенести на другую. Задавай такие имена классов, которые не будут привязаны к странице. Думай компонентами 😉