Атрибут class

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

2. Имена классов пишутся маленькими буквами.

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

4. Лучше не использовать больше трёх слов в имени класса.

        
          
          <!-- Плохо --><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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

5. Не используй в названиях классов цифры или числительные. Завтра порядок блоков может измениться и нумерация будет сбивать с толку.

        
          
          <!-- Плохо --><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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

6. Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.

        
          
          <!-- Плохо --><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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

7. Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

+ Развернуть