Селекторы по классу
В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.
Синтаксис
.classname
Это эквивалентно следующему селектор по атрибуту :
[class~=classname]
Пример
CSS
span.classy background-color: DodgerBlue; >
HTML
span class="classy">Здесь span с каким-то текстом.span> span>А тут другой span.span>
Спецификации
| Specification |
|---|
| Selectors Level 4 # class-html |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS по БЭМ
В БЭМ-методологии CSS используется для оформления страниц и является одной из технологий реализации блока.
Основные принципы работы с CSS рассматриваются в следующих разделах:
- Селекторы
- Селекторы классов
- Совмещение тега и класса в селекторе
- Вложенные селекторы
- Комбинированные селекторы
- Именование
- Внешняя геометрия и позиционирование
- Стилизация групп блоков
- Принцип единственной ответственности
- Принцип открытости/закрытости
- DRY
- Композиция вместо наследования
Селекторы
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.
Селекторы классов
Позволяют указать конкретный HTML-элемент страницы, независимо от тега. Обращение к селектору класса происходит через атрибут class , который должен иметь каждый HTML-элемент.
Значением атрибута class может быть разделенный пробелами список слов. Это позволяет использовать разные БЭМ-сущности на одном DOM-узле.
Пример
header class="header"> button class="header__button button button_theme_islands">. button> header>
Совмещение тега и класса в селекторе
Методология БЭМ не рекомендует совмещать теги и классы в селекторе. Объединение тега и класса (например, button.button ) повышает специфичность CSS-правил, что усложняет задачу их переопределения. Это приводит к войнам значимости, при которых таблицы стилей загружаются излишне сложными селекторами.
Пример
button class="button">. button>
CSS-правила заданы в селекторе button.button .
Допустим, блоку добавили модификатор active со значением true :
button class="button button_active">. button>
Селектор .button_active не переопределит свойства блока, записанные как button.button , так как специфичность button.button выше чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с тегом button.button_active .
В результате развития проекта могут, например, появиться блоки с селекторами input.button , span.button и a.button . В таком случае все модификаторы блока button и вложенные в него элементы потребуют четыре разные декларации для каждого случая.
Нужно стараться использовать простые селекторы классов:
.button <> .button_active <>
Вложенные селекторы
Методология БЭМ допускает использование вложенных селекторов, но рекомендует свести их применение к минимуму. Вложенные селекторы увеличивают связность кода и делают его повторное использование невозможным.
При использовании вложенных селекторов важно соблюдать принцип инкапсуляции: правила одного блока не должны влиять на внутренний мир другого блока. Элементы — это внутренняя реализация блока. Таким образом, блок влияет только на свои элементы и не может воздействовать на элементы другого блока.
Вложенность уместна, если необходимо изменить стили элементов в зависимости от модификатора (например, состояния блока или заданной темы):
Пример
.button_hovered .button__text < text-decoration: underline; > .button_theme_islands .button__text < line-height: 1.5; >
Комбинированные селекторы
Методология БЭМ не рекомендует использовать комбинированные селекторы. Комбинированные селекторы (например, .button.button_theme_islands ) имеют более высокую специфичность, чем одиночные селекторы, что усложняет задачу их переопределения.
Пример
button class="button button_theme_islands">. button>
CSS-правила заданы в селекторе .button.button_theme_islands .
Допустим, блоку добавили модификатор active с значением true :
button class="button button_theme_islands button_active">. button>
Селектор .button_active не переопределит свойства блока, записанные как .button.button_theme_islands , так как специфичность .button.button_theme_islands выше, чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с селектором .button и объявлен ниже .button.button_theme_islands , так как специфичность обоих селекторов одинакова:
.button.button_theme_islands <> .button.button_active <>
Нужно стараться использовать простые селекторы классов:
.button_theme_islands <> .button_active <>
Именование
Имя селектора должно полно и точно описывать представляемую им БЭМ-сущность.
В качестве примера рассмотрим следующие четыре строки CSS-кода:
.button <> .button__icon <> .button__text <> .button_theme_islands <>
С определенной долей вероятности можно предположить, что мы имеем дело с одним блоком и его HTML-реализация выглядит следующим образом:
button class="button button_theme_islands"> span class="button__icon"> span> span class="button__text">. span> button>
Сложнее сделать подобное предположение с такой группой селекторов:
.button <> .icon <> .text <> .theme_islands <>
Имена icon , text , theme_islands не так информативны.
- сделать имена CSS-селекторов максимально информативными и понятными;
- решить проблему коллизии имен;
- независимо описывать стили блоков и их опциональных элементов.
Пример
div class="logo logo_theme_islands"> img src="URL" alt="logo" class="logo__img"> div> div class="user user_theme_islands"> img src="URL" alt="user-logo" class="user__img"> . div>
.logo <> /* CSS-класс блока `logo` */ .logo__img <> /* CSS-класс элемента `logo__img` */ .logo_theme_islands <> /* CSS-класс модификатора `logo_theme_islands` */ .user <> /* CSS-класс блока `user` */ .user__img <> /* CSS-класс элемента `user__img` */ .user_theme_islands <> /* CSS-класс модификатора `user_theme_islands` */
Модификаторы
Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение. Изменение оформления блока производится при помощи установки/снятия модификатора.
Пример
button class="button button_size_s">. button>
.button < font-family: Arial, sans-serif; text-align: center; > .button_size_s < font-size: 13px; line-height: 24px; > .button_size_m < font-size: 15px; line-height: 28px; >
Используя модификаторы, можно изменять представление блока, точечно переопределяя необходимые для этого CSS-свойства.
button class="button button_size_s">. button> button class="button button_size_m">. button>
Это избавляет от ненужного «Copy-Paste».
Миксы
- совмещать поведение и стили нескольких сущностей без дублирования кода;
- одинаково форматировать разные HTML-элементы.
Внешняя геометрия и позиционирование
В CSS по БЭМ стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок.
Пример
header class="header"> button class="button header__button">. button> header>
.button < font-family: Arial, sans-serif; text-align: center; border: 1px solid black; /* Рамка */ > .header__button < margin: 30px; /* Отступ */ position: relative; >
В данном примере внешняя геометрия и позиционирование блока button задана через элемент header__button . Блок button не специфицирует никакие отступы и может быть легко переиспользован в любом месте.
footer class="footer"> button class="button">. button> footer>
Стилизация групп блоков
Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы. Обычно для решения подобных задач применяют групповые селекторы.
Пример
article class="article">. article> footer class="footer"> div class="copyright">. div> footer>
.article, .footer div < font-family: Arial, sans-serif; font-size: 14px; color: #000; >
В данном примере текст внутри блоков article и copyright имеет один и тот же цвет и шрифт.
Несмотря на то, что групповые селекторы позволяют быстро изменить дизайн страницы, такой подход увеличивает связанность кода.
Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют миксы.
Пример
article class="article text">. article> footer class="footer"> div class="copyright text">. div> footer>
.text < font-family: Arial, sans-serif; font-size: 14px; color: #000; >
Разделение кода на части
К CSS по БЭМ применяются основные принципы организации и хранения кода:
- разделение кода на отдельные части — логика работы каждого блока, его опциональных элементов и модификаторов описывается в отдельных файлах;
- CSS-файлы для каждого компонента хранятся в соответствии с правилами организации файловой структуры БЭМ-проекта.
Разделение кода на части и строгая организация файловой структуры проекта позволяет:
- облегчить навигацию по проекту;
- повторно использовать и переносить компоненты;
- работать с уровнями переопределения и использовать сборку.
Пример
Блок button в файловой структуре проекта:
button/ # Директория блока button _size button_size_s.css # Реализация модификатора в технологии CSS button.css # Реализация блока button в технологии CSS
Такое разделение позволяет быстро находить нужные файлы.
Принцип единственной ответственности
Как и в объектно-ориентированном программировании, принцип единственной ответственности (англ. Single responsibility principle) в CSS по БЭМ означает, что каждая CSS-реализация должна иметь одну ответственность.
Пример
header class="header"> button class="button header__button">. button> header>
.button < font-family: Arial, sans-serif; border: 1px solid black; background: #fff; >
Ответственность: внешняя геометрия и позиционирование (зададим внешнюю геометрию и позиционирование для блока button через элемент header__button ).
.header__button < margin: 30px; position: relative; >
.header__button < font-family: Arial, sans-serif; position: relative; border: 1px solid black; margin: 30px; >
Селекторы с одиночной ответственностью придают коду больше гибкости.
Принцип открытости/закрытости
Любой HTML-элемент страницы должен быть открыт для модификации, но закрыт для изменения. Разрабатывать новые CSS-реализации следует так, чтобы не пришлось менять уже существующие.
Пример
button class="button">. button> button class="button">. button>
.button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; >
Предположим, что появилась необходимость изменить размер одной из кнопок. Следуя принципу открытости/закрытости, модифицируем кнопку.
button class="button">. button> button class="button button_size_s">. button>
.button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; > .button_size_s < font-size: 13px; line-height: 24px; >
Существующая функциональность кнопки расширена при помощи класса button_size_s (переопределены свойства font-size и line-height ). Теперь на странице есть две кнопки разного размера.
Нарушение принципа открытости/закрытости
-
Изменение существующей CSS-реализации
.button < font-family: Arial, sans-serif; text-align: center; font-size: 13px; line-height: 24px; >
.button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; > .content .button < font-size: 13px; line-height: 24px; >
Оформление кнопки стало зависеть от ее расположения. Изменения коснутся всех блоков button внутри блока content .
DRY
Принцип разработки программного обеспечения, нацеленный на снижение повторений в коде.
Применительно к методологии БЭМ суть данного принципа заключается в том, что каждая БЭМ-сущность должна иметь единственное, однозначное представление в рамках системы.
Пример
button class="button">. button> button class="btn">. button>
.button < font-family: Arial, sans-serif; text-align: center; color: #000; background: #fff; > .btn < font-family: Arial, sans-serif; text-align: center; color: #000; background: rgba(255, 0, 0, 0.4); >
Как видно из примера, в селекторе btn повторена существующая реализация блока button .
Перепишем пример в соответствии с принципом DRY:
button class="button button_theme_islands">. button> button class="button button_theme_simple">. button>
.button < font-family: Arial, sans-serif; text-align: center; > .button_theme_islands < color: #000; background: #fff; > .button_theme_simple < color: #000; background: rgba(255, 0, 0, 0.4); >
Благодаря добавлению модификаторов, мы избавились от блока btn .
Важно! Принцип DRY имеет отношение только к функционально однотипным компонентам страницы, например, кнопки.
Пример
Как видно, между кнопками есть небольшие внешние отличия. Принцип DRY касается именно таких сущностей — функционально однотипных, но разных по оформлению.
Не имеет смысла объединять разные по типу блоки, только потому что у них, например, одинаковый цвет или размер.
Пример
Композиция вместо наследования
Наследование — это механизм, позволяющий описать новый CSS-класс на основе существующего (родительского, базового). Класс-потомок может добавить собственные свойства, а также пользоваться родительскими.
Новые CSS-реализации в БЭМ собирают из уже существующих, путем их объединения. Это сохраняет код несвязным и гибким.
Пример
Допустим, есть три готовые реализации:
- кнопка — блок button ;
- меню — блок menu ;
- всплывающее окно — блок popup .
Задача
Реализовать раскрывающийся список (блок select ).
Разработать раскрывающийся список с произвольным внешним видом — весьма непростая задача. Однако, если есть готовые компоненты (кнопка, всплывающее окно и меню), остается только правильно описать их взаимодействие.
Пример
div class="select"> button class="button select__button"> span class="button__text">Блок span> button> div> div class="popup"> div class="menu"> div class="menu__item">Блок div> div class="menu__item">Элемент div> div class="menu__item">Модификатор div> div> div>
Работа с уровнями переопределения
Применение принципов БЭМ-методологии к CSS позволяет разделять представление блоков по разным уровням.
Разделение по уровням позволяет:
- реализовывать новый внешний вид блока на другом уровне переопределения, сохраняя предыдущий, наследовать и дополнять его;
- полностью перекрывать внешний вид блока (переопределять);
- добавлять блоки с новым представлением.
С помощью уровней переопределения можно создать универсальную CSS-библиотеку блоков и изменять ее на проектном уровне. Затем использовать сборку и включать в проект только необходимое представление блоков.
Пример
common.blocks/ button/ button.css # Базовая CSS-реализация кнопки desktop.blocks/ button/ button.css # Особенности кнопки для desktop mobile.blocks/ button/ button.css # Особенности кнопки для mobile
При сборке в файл desktop.css попадут все базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня desktop .
@import "common.blocks/button/button.css"; /* Базовые CSS-правила */ @import "desktop.blocks/button/button.css"; /* Особенности desktop */
Файл mobile.css будет включать базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня mobile .
@import "common.blocks/button/button.css"; /* Базовые CSS-правила */ @import "mobile.blocks/button/button.css"; /* Особенности mobile */
Разделение представления блока button по разным уровням позволяет:
-
Полностью перекрыть внешний вид блока на другом уровне переопределения. common.blocks/button/button.css
.button < font-family: Arial, sans-serif; font-size: 11px; line-height: 24px; background: #fff; >
desktop.blocks/button/button.css
.button < font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 28px; background: yellow; >
.button < font-family: Arial, sans-serif; font-size: 11px; line-height: 24px; background: #fff; >
desktop.blocks/button/button.css
.button < background: #fff; color: rgb(255, 0, 0); box-shadow: 0 0 10px rgba(0,0,0,0.5); >
Как перейти на CSS по БЭМ
Чтобы реализовать принципы БЭМ в проекте, необходимо:
- абстрагироваться от DOM-модели и научиться создавать блоки;
- не использовать ID-селекторы и селекторы тегов;
- минимизировать количество вложенных селекторов;
- использовать соглашение по именованию CSS-классов, чтобы избежать коллизии имен и сделать имена селекторов максимально информативными и понятными;
- работать в единых терминах блоков, элементов и модификаторов;
- выносить в модификаторы CSS-свойства блока, изменение которых кажется вероятным;
- использовать миксы;
- разделять код на мелкие независимые части для удобства работы с отдельными блоками;
- повторно использовать блоки.
Как начать реализовывать идеи БЭМ в существующем проекте
- Создавайте новые компоненты по БЭМ, а старые изменяйте по мере необходимости.
- Проектируйте блоки, руководствуясь принципами, описанными выше.
- Используйте префиксы в именах CSS-классов (например, bem- ), чтобы отличить новый код от старого.
После знакомства с CSS по БЭМ переходите к рассмотрению особенностей реализации JavaScript по БЭМ-методологии.
Block css class name что это
25 ФЕВРАЛЯ 2022
CSS-класс для блоковВ настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.
Примеры и пошаговая инструкция, как применить новую функцию.
Градиент на текстовом блоке
Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.
Как сделать
1 шаг
Добавьте блок с большим текстом, например, AB501.- Откройте настройки блока, нажмите Добавить CSS Class Name;
- Задайте название класса, например, uc-about.
- Добавьте блок T123 HTML-код;
- Скопируйте код ниже и вставьте его в блок T123.
.uc-about .t-title→ Сохраните изменения и опубликуйте страницу
Скруглённые фотографии
Some Words About UsWe are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.
Разметка и содержащий блок
На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.
Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:
- Content область или область контента (content area).
- Padding область или область внутреннего поля (padding area).
- Border область или область границы (border area).
- Margin область или область внешнего поля (margin area).
Многие разработчики верят, что содержащий блок элемента — это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.
Эффекты содержащего блока
Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.
На размер и положение элемента часто влияет его содержащий блок.
Значения заданные в процентах для свойств width , height , padding , margin , и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство position имеет значение absolute или fixed ) рассчитываются исходя из его содержащего блока.
Определение содержащего блока
Определение содержащего блока элемента полностью зависит от значения свойства position :
- Если свойство position имеет значение static , relative , или sticky , то содержащий блок задаётся краем content бокса ближайшего предка, который:
- либо является блочным контейнером (block container), например, если его свойство display имеет значение inline-block, block или list-item.
- либо устанавливает контекст форматирования (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
- Если свойство position имеет значение absolute , то содержащий блок задаётся краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static ( fixed , absolute , relative или sticky ).
- Если свойство position имеет значение fixed , то содержащий блок задаётся:
- в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт — viewport);
- в случае страничного медиа (paged media) областью страницы.
- Если свойство position имеет значение absolute или fixed , то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
- Свойство transform или perspective имеет значение отличное от none .
- Свойство will-change имеет значение transform или perspective .
- Свойство filter имеет значение отличное от none или will-change value of filter (работает только в Firefox).
- Свойство contain (en-US) имеет значение paint (например, contain: paint; ).
Calculating percentage values from the containing block
As noted above, when certain properties are given a percentage value, the computed value depends on the element’s containing block. The properties that work this way are box model properties and offset properties:
- The height , top , and bottom properties compute percentage values from the height of the containing block.
- The width , left (en-US), right , padding , and margin properties compute percentage values from the width of the containing block.
Some examples
The HTML code for all our examples is:
body> section> p>This is a paragraph!p> section> body>
Only the CSS is altered in each instance below.
Example 1
In this example, the paragraph is statically positioned, so its containing block is because it’s the nearest ancestor that is a block container.
body> section> p>This is a paragraph!p> section> body>
body background: beige; > section display: block; width: 400px; height: 160px; background: lightgray; > p width: 50%; /* == 400px * .5 = 200px */ height: 25%; /* == 160px * .25 = 40px */ margin: 5%; /* == 400px * .05 = 20px */ padding: 5%; /* == 400px * .05 = 20px */ background: cyan; >Example 2
body> section> p>This is a paragraph!p> section> body>
body background: beige; > section display: inline; background: lightgray; > p width: 50%; /* == half the body's width */ height: 200px; /* Note: a percentage would be 0 */ background: cyan; >Example 3
In this example, the paragraph’s containing block is because the latter’s position is absolute . The paragraph’s percentage values are affected by the padding of its containing block, though if the containing block’s box-sizing value were border-box this would not be the case.
body> section> p>This is a paragraph!p> section> body>
body background: beige; > section position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px; background: lightgray; > p position: absolute; width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; >Example 4
In this example, the paragraph’s position is fixed , so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph’s dimensions change based on the size of the browser window.
body> section> p>This is a paragraph!p> section> body>
body background: beige; > section width: 400px; height: 480px; margin: 30px; padding: 15px; background: lightgray; > p position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; >Example 5
In this example, the paragraph’s position is absolute , so its containing block is , which is the nearest ancestor with a transform property that isn’t none .
body> section> p>This is a paragraph!p> section> body>
body background: beige; > section transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; > p position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; >Смотрите также
- Ключевые концепции CSS
- Синтаксис CSS
- @-правила
- комментарии
- специфичность
- наследование
- блочная модель
- режимы компоновки
- модели визуального форматирования
- Схлопывание отступов
- Значения
- начальные
- вычисленные
- используемые
- действительные
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.