Перечисление селекторов

Пишем сразу несколько селекторов, к которым будут применяться стили.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 9 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи перечисления нескольких селекторов через запятую можно избежать дублирования кода.

�� Если у нескольких элементов есть определённые повторяющиеся стили, то вполне допустимо вынести эти стили в отдельный блок и в качестве селектора указать несколько классов (или тегов, или идентификаторов), перечислив их через запятую.

Пример

Скопировать ссылку «Пример» Скопировано

Представим, что у всех заголовков на странице одинаковый цвет текста, высота строки и есть декоративный элемент в виде подчёркивания.

   
Только хорошие новости 
Учёные научились выращивать зубы 
Группа специалистов впервые сумела вырастить настоящий зуб .
   div class="wrapper"> h1 class="main-title">Только хорошие новостиh1> h2 class="title">Учёные научились выращивать зубыh2> p class="text">Группа специалистов впервые сумела вырастить настоящий зуб . p> div>    Скопировать Скопировано Не удалось скопировать   

Задаём общие стили для заголовков. Ниже создаём одинаковые декоративные подчёркивания при помощи псевдоэлементов.

 .main-title,.title  position: relative; display: inline-block; color: #ffffff; font-weight: 500;> .main-title::before,.title::before  content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #FFFFFF; z-index: -1;> .main-title, .title  position: relative; display: inline-block; color: #ffffff; font-weight: 500; > .main-title::before, .title::before  content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #FFFFFF; z-index: -1; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

�� Перечисляемые через запятую селекторы могут быть никак не связаны между собой родственными связями, могут находиться в разных частях разметки или вообще на разных страницах. Стили, описанные внутри фигурных скобок, будут в равной степени применены и к первому, и ко второму, и ко всем последующим селекторам.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Указывается один селектор, после него ставится запятая, через пробел указывается второй селектор и так далее.

Для удобства чтения можно переносить каждый новый селектор на новую строку, но технически это не обязательно.

Селекторами может быть не только селектор по классу, но и селектор по тегу или по идентификатору, или даже их комбинация.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если стили у перечисляемых блоков не отличаются ничем, то это причина пересмотреть разметку и задать одинаковым по стилям элементам одинаковый класс.

�� Если перечисляете через запятую составные селекторы, то нужно указывать их полностью.

На практике

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

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Начинающие разработчики часто допускают ошибку при перечислении селекторов: по их логике первая часть составного селектора не требует повторения и её можно указать один раз в начале, а затем перечислить через запятую несколько «вторых» частей составного селектора.

Вложенным селектор считается только в первой строке, остальные классы отдельные,
сами по себе.

Вот так неверно:

 .parent-class .child-class,.another-class,.one-another-class  /* Стили */> .parent-class .child-class, .another-class, .one-another-class  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

А вот так верно! Все три перечисленных селектора являются вложенными:

 .parent-class .child-class,.parent-class .another-class,.parent-class .one-another-class  /* Стили */> .parent-class .child-class, .parent-class .another-class, .parent-class .one-another-class  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

По факту, перечисление через запятую — просто удобный способ сокращения кода, что вписывается в рамки принципа DRY.

�� Не злоупотребляйте перечислением селекторов через запятую. Особенно составных. Если в стилях слишком много перечислений селекторов, присмотритесь к одной из методологий написания CSS — например, БЭМ ��

Часть 1. Селекторы CSS. Теги, классы, ID, группы

В предыдущей главе мы разбирали синтаксис CSS и упоминали о селекторах, с помощью которых мы указываем, какие элементы веб-страницы желаем изменить внешне. В этой части мы рассмотрим основные селекторы CSS:

1. Селекторы тегов.
2. Селекторы классов.
3. Селекторы ID.
4. Селекторы групп.

1. Селекторы тегов

Если вам необходимо изменить внешний вид содержимого, которое находится в каком-либо теге, используйте CSS селекторы тегов. Допустим, вам нужно изменить шрифт и цвет всех тегов , которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3 (обратите внимание: в CSS угловые скобки <> тега не записываются, а используется только его имя):

Написав один такой стиль, вы измените шрифт сразу для всех тегов на странице, сколько бы их ни было. Согласитесь, что это очень быстро и удобно. Аналогично можно создавать стили для других тегов, заменяя название селектора на нужное вам ( p , h1 , h2 , h3 и т. д.).

2. Селекторы классов

Классы CSS – это отличный инструмент, который расширяет возможности создания стилей в разы. Для лучшего понимания мы будем рассматривать всё на примерах.

Итак, чуть выше мы применили стиль для всех тегов на веб-странице – текст имеет шрифт Geneva и оранжевый цвет. Но что делать, если вам понадобилось изменить цвет одного из тегов на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext и запишем правило:

.greentext

Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов на странице, нужно отредактировать HTML-документ, применив класс greentext к необходимому нам тегу. Записывается это так:

Созданный класс можно применять к любым элементам веб-страницы. Вы можете придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например, словам (используя рассмотренный нами в первой и второй главе тег и присваивая ему класс).

Запомните несколько правил написания классов:

• в CSS перед названием селектора класса обязательно ставится точка (но при присвоении класса в HTML-документе эта точка не нужна);
• в названии классов можно использовать только буквы латинского алфавита, дефис, символ подчеркивания, цифры;
• название класса всегда должно начинаться с буквы (правильные варианты названий: .intro , .img-border , .nav_menu_01 ; неправильные: .2color , .-link , ._divider );
• названия классов CSS чувствительны к регистру, поэтому классы вроде .review и .Review будут восприниматься как два отдельных.

3. Селекторы ID

Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки # :

#footer

В HTML-документе идентификатор присваивается с помощью атрибута id :

Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:

• ID – это уникальное название элемента на веб-странице, которое должно встречаться на ней только один раз (например, шапка сайта и подвал: id=»header» и id=»footer» ), в то время как класс может присваиваться нескольким элементам с целью отличать их от остальных;
• идентификаторы удобны для JavaScript-разработчиков, поскольку позволяют получить быстрый доступ к элементу DOM из скриптов (во многом именно поэтому необходимо, чтобы ID встречался на странице лишь один раз);
• каждое правило CSS имеет свой так называемый вес (от веса зависит, какое из правил получит более высокий приоритет при выполнении). Идентификатор имеет больший вес, чем класс, поэтому, если элементу присвоен и ID, и класс, предпочтение отдается ID. Пример:

#text < color: yellow; >.content

4. Селекторы групп

Мы подошли к четвертому типу селекторов CSS – групповые селекторы. Представьте ситуацию, что вам необходимо сделать шрифт жирным для нескольких элементов веб-страницы – p , h1 , h2 , h3 . Можно было бы записать этот стиль отдельно для каждого элемента:

p < font-weight: bold; >h1 < font-weight: bold; >h2 < font-weight: bold; >h3

Но такой код занимает больше времени и места, чем это необходимо. Ведь всё можно записать намного проще и короче, перечислив имена через запятую и создав таким образом групповой селектор:

p, h1, h2, h3

Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.

А если по какой-то причине вам необходимо создать стиль абсолютно для всех элементов веб-страницы, можно воспользоваться универсальным селектором CSS, для обозначения которого используется символ звездочки * :

Выводы

В этой части главы вы познакомились с четырьмя основными типами CSS селекторов. Они просты в использовании, и вам будет очень легко запомнить их. Подытожим пройденный материал:

Для изменения стиля содержимого тегов используйте селекторы тегов.

Если вам нужен более гибкий инструмент, который позволит создать стиль для одного конкретного элемента либо определенной группы элементов, используйте классы CSS.

Если есть необходимость создать стиль с высоким приоритетом для уникального элемента веб-страницы, а также обращаться к нему через скрипты, используйте селекторы ID.

Чтобы применить одинаковый стиль сразу к нескольким элементам веб-страницы, используйте групповой селектор. Если нужно стилизовать абсолютно все элементы страницы, можно задействовать универсальный селектор.

Вторая часть третьей главы посвящена псевдоклассам и псевдоэлементам CSS, а также селекторам потомков.

HTML, CSS: важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов

У HTML-элементов на HTML-странице может быть необязательный глобальный атрибут class . Например:

 
Какой-то текст.
 

Здесь у HTML-элемента div есть интересующий нас атрибут class .

С точки зрения стандарта языка HTML

По действующему стандарту языка HTML атрибут class HTML-элементов должен содержать значение, состоящее из набора (множества) названий (токенов) классов CSS, разделенных пробельными символами (символ пробела, символ горизонтальной табуляции, символы новой строки). В примере выше атрибут class содержит значение-строку имя-класса1 имя-класса2 имя-класса3 , представляющее собой набор из трех названий классов CSS, разделенных символом пробела.

Понятие, о котором тут идет речь — набор из слов (токенов), разделенных пробельными символами (по-английски «set of space-separated tokens»). Само это понятие определено в стандарте языка HTML отдельно от определения атрибута class .

В определении понятия «set of space-separated tokens» сказано, что это строка, содержащая ноль или более слов (токенов), разделенных пробельными символами. Из этого я сделал вывод, что атрибут class по действующему стандарту HTML может не содержать ничего (содержать пустую строку). Также не будет нарушением действующего стандарта HTML, если этот атрибут будет содержать только пробельные символы (символ пробела, символ горизонтальной табуляции, символы новой строки).

Действующий стандарт HTML вообще практически не накладывает на набор названий классов CSS в атрибуте class HTML-элементов каких-либо ограничений. Не накладывается ограничение на дублирование названий классов CSS внутри атрибута class . Не накладывается каких-либо ограничений, касающихся порядка перечисления названий классов CSS внутри атрибута class .

То есть с точки зрения действующего стандарта HTML (в отличие от стандарта CSS, о чем речь пойдет далее) название класса, перечисленное в наборе названий классов внутри атрибута class HTML-элемента раньше (левее, выше), ничем не отличается от названия класса, перечисленного в том же наборе названий классов внутри атрибута class HTML-элемента позже (правее, ниже).

В примере выше с точки зрения действующего стандарта HTML названия классов имя-класса1 , имя-класса2 и имя-класса3 в наборе названий имя-класса1 имя-класса2 имя-класса3 полностью равноправны, несмотря на то, что, к примеру, название имя-класса1 перечислено раньше (левее), чем имя-класса2 или имя-класса3 . То же самое касается названия имя-класса2 по сравнению с названием имя-класса3 .

Во что это выливается на практике?

Рассмотрим такой код на языке HTML (многоточием заменен неинтересный для предмета этой статьи код):

. . .имя-класса1 < color: green; >.имя-класса2 < color: red; >.имя-класса3  
Какой-то текст1.
 
Какой-то текст2.
  . 

В теле этой HTML-страницы есть два параграфа (HTML-элемент p ). Каждый из этих параграфов содержит атрибут class с набором из одних и тех же трех названий классов CSS, только перечисленных в разном порядке.

Описание стилей в классе имя-класса3 не конфликтует с другими классами. А вот описания стилей в классах имя-класса1 и имя-класса2 конфликтуют друг с другом (приписывают разные значения одному и тому же свойству HTML-элемента).

В итоге при любой перестановке названий классов CSS в атрибуте class HTML-элементов p браузер отобразит параграфы одинаково, в данном случае — с синей границей и текстом красного цвета. Это подтверждает наши выводы, сделанные выше из определений действующего стандарта HTML.

Почему же в данном случае в конфликте описаний стилей в классах имя-класса1 и имя-класса2 «победил» класс имя-класса2 (текст в параграфах отразился красным цветом)? Потому что при определении классов CSS внутри HTML-элемента style класс имя-класса2 описан позже (ниже), чем класс имя-класса1 . Внутри HTML-элемента style действуют правила (стандарт) языка CSS. Это действие того самого «каскада», давшего первую букву аббревиатуре CSS (Cascading Style Sheets). Если менять местами определения классов CSS внутри HTML-элемента style (или внутри файла с кодом на языке CSS, если определения стилей вынесены в отдельный файл или файлы), то отображение HTML-страницы в браузере будет изменяться.

Влияние правил языка CSS

Всегда ли порядок названий классов в атрибуте «class» HTML-элемента не влияет на отображение HTML-страницы?

С учетом вышеизложенного хочется ответить на этот вопрос утвердительно, но утвердительный ответ тут будет неправильным.

Дело в том, что в языке CSS можно определить селектор (отборщик) HTML-элементов так, что отбор HTML-элементов селектором будет зависеть от порядка перечисления названий классов CSS в атрибуте class HTML-элементов. Это сделает порядок перечисления названий классов в атрибуте class HTML-элементов значимым для отображения HTML-страницы в браузере.

Это не будет противоречить вышеописанным выводам, сделанным из определений в стандарте языка HTML, потому что в данном случае это будет действие стандарта CSS.

В качестве примера рассмотрим такой код на языке HTML:

. . [class^="имя-класса1 имя-класса2"] < color: green; >[class^="имя-класса2 имя-класса1"] < color: red; >.имя-класса3  
Какой-то текст1.
 
Какой-то текст2.
  . 

Это тот же код HTML, что и в первом примере, только здесь изменены два первых селектора внутри HTML-элемента style . Даже описания стилей остались нетронутыми. Однако, теперь браузер отображает в первом параграфе текст зеленым цветом, а во втором параграфе — красным цветом.

В этом примере порядок названий классов внутри атрибута class HTML-элементов стал значимым для отображения HTML-страницы в браузере, но это действие не правил языка HTML, а правил языка CSS.

Заключение

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

Порядок названий классов CSS в атрибуте class HTML-элементов на HTML-странице может влиять (может быть важным) на отображение этой HTML-страницы в браузере. Но следует понимать, что это влияние определяется не правилами (стандартом) языка HTML, а тем, как описаны стили для данной HTML-страницы с помощью языка CSS (они могут быть описаны в разных местах — внутри HTML-элемента style , внутри внешнего файла (нескольких файлов) и так далее).

Атрибут class

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

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

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 23 марта 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Универсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в CSS и позволяет управлять стилями элемента. К тому же по имени класса удобно искать и манипулировать элементами на странице при помощи JavaScript.

Пример

Скопировать ссылку «Пример» Скопировано

На странице может быть множество одинаковых тегов. Например, несколько заголовков второго уровня.

 . 
В Санкт-Петербурге
Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон. 
В России
«Умом Россию не понять. » 
В мире
На Брайтон Бич опять идут дожди..  . 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> .   Скопировать Скопировано Не удалось скопировать   

В коде выше каждому заголовку второго уровня заданы разные имена классов. Это позволит без особых проблем написать стили только для первого заголовка.

 .news__local  color: #ed6742;> .news__local  color: #ed6742; >    Скопировать Скопировано Не удалось скопировать   

Цель достигнута, при этом стили остальных заголовков второго уровня остались прежними.

Как понять

Скопировать ссылку «Как понять» Скопировано

Имя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class . Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Атрибут класса можно задать любому тегу в HTML-разметке. Как и любой другой атрибут, класс прописывается внутри треугольных скобок открывающего тега.

   Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.  p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>    Скопировать Скопировано Не удалось скопировать   

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

1. В именах классов используй только английские слова.

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

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

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   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>    Скопировать Скопировано Не удалось скопировать   

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

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   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>    Скопировать Скопировано Не удалось скопировать   

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>    Скопировать Скопировано Не удалось скопировать   

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

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

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

В примере ниже main и text будут восприниматься браузером как два отдельных класса, а не один, состоящий из двух слов.

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

Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� У элемента может быть несколько классов. Перечисляй классы, разделяя их пробелом.

 
Экзистенциализм сложен. p class="sub-text news-text">Экзистенциализм сложен.p>    Скопировать Скопировано Не удалось скопировать   

�� Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.

На практике

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

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id . Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.

Причина в том, что идентификатор должен быть уникальным. В разметке может быть только один идентификатор с определённым именем. Это крайне неудобно для написания стилей, поскольку придётся многократно повторять одни и те же стили, но для разных идентификаторов. С классами эта проблема решается просто. Пропиши всем элементам, для которых нужно задать определённый внешний вид, один и тот же класс.

У многих начинающих разработчиков существует представление, что идентификаторы требуются для связи JavaScript и HTML, но это не так. В современном виде JavaScript предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!

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

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