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

    HTML

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

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

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

    Читайте также