Два листа бумаги. На левом картинка с жуком, текст, заголовок и оценка 2 (рядом грустный смайл). На правом картинка с жуком, текст, заголовок и оценка 5+ (рядом весёлый смайл).

Атрибут class

Самый частый атрибут, который вы будете использовать. Задаёт класс элементу.

Время чтения: 6 мин

Кратко

Секция статьи "Кратко"

Универсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в 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>

        
        
          
        
      

При выборе имени класса следует придерживаться нескольких правил:

  1. В именах классов используй только английские слова.
        
          
          <!-- Плохо --><p class="osnovnoy-text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p class="osnovnoy-text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

<!-- Хорошо -->
<p class="main-text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

        
        
          
        
      
  1. Имена классов пишутся маленькими буквами.
        
          
          <!-- Плохо --><p class="Main-Text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p class="Main-Text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

<!-- Хорошо -->
<p class="main-text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

        
        
          
        
      
  1. Для разделения двух слов используются тире (-) или знак подчёркивания (_). Не используй 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>

        
        
          
        
      
  1. Лучше не использовать больше трёх слов в имени класса.
        
          
          <!-- Плохо --><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>

        
        
          
        
      
  1. Не используй в названиях классов цифры или числительные. Завтра порядок блоков может измениться и нумерация будет сбивать с толку.
        
          
          <!-- Плохо --><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>

        
        
          
        
      
  1. Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.
        
          
          <!-- Плохо --><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>

        
        
          
        
      
  1. Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.
        
          
          <!-- Плохо --><p class="green-text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p class="main-text">  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p class="green-text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

<!-- Хорошо -->
<p class="main-text">
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

        
        
          
        
      
  1. Не используйте пробел для разделения слов внутри одного имени класса.

В примере ниже 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 предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!

🛠 После того, как разметка и стили написаны, посмотри на них внимательно. Высока вероятность, что написано несколько одинаковых блоков стилей для разных классов. Имеет смысл оптимизировать код и вынести повторяющиеся стили в отдельный блок и задать всем похожим элементам один класс.

🛠 Представляй каждый блок, из которого состоит страница, как самостоятельный элемент, который можно будет убрать с текущей страницы и перенести на другую. Задавай такие имена классов, которые не будут привязаны к странице. Думай компонентами 😉