Как прописать класс в css

Селекторы по классу

В 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 7 авг. 2023 г. 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– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

98. Несколько классов

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

абзац

Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.

абзац 1

И CSS код для примера 2.

.bold font-weight: bold;
>
.color_red color: red;
>

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

Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red , мы комбинировали красный цвет и полужирное начертание.

CSS-селекторы: Способы задавать CSS-стили для HTML-элементов

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

На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.

Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов

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

Универсальный CSS-селектор * (звездочка)

С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.

Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.

В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.

Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.

И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.

При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.

CSS-селекторы по классу (Class selectors)

С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.

Простой пример CSS-селектора по классу:

Запись CSS-стилей через точку «.» и без пробелов

Когда вы задаете CSS-стили через точку «.» и без пробелов (как в примере ниже) — это обозначает, что CSS-стили применятся ко всем тегам , у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является , стили к данному элементу не применятся и элемент с классом color не будет выделятся красным цветом.

А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к который имеет сразу два класса .color и .color-text и не применятся стили к к которому присвоен только один class с именем .color.

Запись CSS-стилей через запятую «,»

Запись CSS-стилей через пробел (space)

А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.

всем тегам , независимо на каком уровне вложенности находится , фоновый цвет «gray»:

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

Запись CSS-стилей через знак больше «>»

При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.

Лучше понять как работает комбинатор “>” вам поможет пример.

Этот стиль применится только для первого потомка (child), но не будет работать для последующих:

А эти стили применятся для strong, потому-что strong — это прямой потомок :

Запись CSS-стилей через знак “~»

С помощью знака “~» можно выбирать все HTML-элементы, которые являются потомками указанного элемента.

Запись CSS-стилей через знак плюс «+»

Если c помощью записи CSS-стилей со знаком “~» можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент.

И вот простой пример:

Запись CSS-стилей для HTML-элемента по атрибуту

Имея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить и мы можем задавать CSS-стили исходя из атрибута.

Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для с разными type: text и password. Когда мы будем печатать текст в с типом text мы хотим задать цвет текста «green», а для с типом password мы хотим задать цвет текста «magenta». И с помощью CSS-селекторов по атрибуту мы можем это сделать:

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

Вывод

Пользоваться CSS-селекторами достаточно просто и самое главное — это практика, тогда вы все очень быстро запомните! Курс HTML/CSS Advanced содержит в себе большое количество интерактивных упражнений, выполняя которые, вы будете быстрее запоминать пройденный материал.

Также рекомендуем подписаться на наш YouTube канал FructCode, где переодически появляются полезные материалы для обучения верстке сайтов и программированию.

С вами был Сергей Никонов, успехов в обучении!

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

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 по БЭМ-методологии.

  Читать:

  Как сделать выгрузку из 1с