Как сделать модификатор в css

Обновлено: 07.07.2024

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

Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

Содержание

Что такое CSS-селекторы (CSS Selectors)

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

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

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

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

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

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

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

See the Pen BaWqwVm by Sergey Nikonov (@sergey-nikonov) on CodePen.

В итоге, ко всем 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 не будет выделятся красным цветом.

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

Введение

Способ организации стилей на одностраничных сайтах обычно не имеет большого значения. Вы пишите один стилевой файл, либо компилируете несколько секций при помощи sass или less. Все получается хорошо и красиво. Когда дело доходит до более крупных и сложных проектов, ситуация меняется. Именование селекторов при верстке влияет на время написания кода, на его читаемость и даже на скорость загрузки сайта. Это становится особенно важным, когда вы работаете в команде, и от вас требуется высокая производительность. Для удобства работы со стилями используются специальные методологии именования классов и идентификаторов.

Методологии

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

Наиболее известны среди них следующие:

Руководство по стилю написания CSS с пятью категориями правил.

Структурированные имена классов и значимые дефисы.

Разбиение стилей на атомарные или неделимые части.

Независимо от того, какую методологию вы выберете для использования в проектах, вы получите выгоду от более структурированного CSS. В статье речь пойдет о наиболее популярной среди них методологии БЭМ, созданной специалистами Яндекса. Причина, по которой я предпочитаю ее прочим вариантам: меньшая запутанность по сравнению с той же SMACSS при возможности обеспечить хорошую архитектуру с узнаваемой терминологией. Гибкость методологии БЭМ позволяет настраивать рутинные повседневные процессы и делает работу над проектом, приятным делом.

До БЭМа в каждом проекте, я придумывал что-то новенькое, а потом открывал код годичной давности и удивлялся – какой идиот это написал?

Методология БЭМ

БЭМ – это сокращение от составляющих методологии: блока, элемента и модификатора.

Примеры названий блоков:

Правила БЭМ не позволяют задавать позиционирование блока или его внешнюю геометрию в виде отступов и влияющих на размеры границ. Также не рекомендуется использовать селекторы по тегам или id . Необходимо обеспечить возможность повторного использования блока или его переноса с места на место. Допускается любая вложенность, включая вложенность блоков друг в друга.

Элемент – не имеющая отдельного значения и семантически привязанная к своему родителю часть блока. К нему применимы те же правила именования, при этом н азвание элемента отделяется от названия блока двумя подчеркиваниями ( __ ).

Здесь также можно использовать любую вложенность, но надо помнить, что элемент всегда является частью блока и не может быть частью другого элемента:

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

Модификатор – маркер, который отделяется от имени блока или элемента двойным дефисом (--), либо одним нижним подчеркиванием (_).

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

Согласно методологии БЭМ, модификатор нельзя использовать самостоятельно в отрыве от выделяемого блока или элемента. Он должен изменять вид, поведение или состояние компонента, а не заменять его.

Можно сделать микс: метод, позволяющий использовать различные компоненты БЭМ на одном DOM-узле. Таким способом можно соединить поведение и стилевое оформление нескольких сущностей без повторения кода, а также сделать семантически новые компоненты веб-страницы на основе уже имеющихся.

Здесь мы сгруппировали поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Его можно использовать в любом другом окружении, потому что у блока нет никаких специфических отступов и границ. Составление независимых блоков разными способами и их разумное повторное использование сокращает объем кода CSS, который вам придется поддерживать.

Заключение

Созданная в Яндекс методология БЭМ помогает решать проблемы веб-разработки, отвечая на следующие вопросы:

· Как облегчить рефакторинг?

· Как сделать ваш код самодокументируемым и информативным?

· Как повторно использовать участки вашего кода и не допустить влияния его компонентов друг на друга?

Имея набор методов по именованию стилей, вы можете создать свою библиотеку блоков, что сделает ваш CSS суперэффективным. Методология БЭМ дает вашему коду прочную структуру, которая еще долгое время, останется простой и понятной. Важно также понимать, что это не просто набор правил, но и набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Их также придется изучить.

БЭМ: Как сделать жизнь разработчика чуть лучше

БЭМ компонентный подход (Блок - Элемент - Модификатор), ставший мировым стандартом в CSS, позволяет разрабатывать масштабируемые интерфейсы легкие в чтении и понимании

время чтения 3 мин.

В основе подхода БЭМ лежит принцип разделения компонента на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, не прибегая к ненужному копированию.

Почему БЭМ?

У данного подхода есть, как минимум два преимущества:

использование БЭМ не вызывает затруднений,
созданные масштабируемые структуры легки в понимании.

Что такое БЭМ?

Имена классов при использовании БЭМ состоят из трех частей (Блок - Элемент - Модификатор):

Блок: самый внешний родительский элемент, в HTML это класс, определяющий основные функции компонента. Название блока должно определять смысл, а не состояние.
Элемент: в компоненте может быть определен один или несколько элементов. Элементы добавляют блоку новые функции и не используются в отрыве от него. Свойства элемента не заменяют все свойства блока.
Модификатор: блок или элементы может иметь различные варианты, определяемые модификаторами. Модификатор определяет внешний вид, состояние или поведение блока или элемента.

Примеры

Блок без элементов и модификаторов

Самые простые компоненты включают в себя только один класс, который и будет являться блоком

Компонент с простым модификатором

Как мы уже знаем, компонент может иметь различные варианты. Вариант может определяться классом модификатора. Модификатор не может существовать сам по себе, без блока. Классы модификаторов предназначены для расширения базовых классов, а не для их замещения.

Вот пример правильного использования класса модификатора:

А так делать нельзя:

Компоненты с элементами

Более сложные компоненты имеют вложенные элементы. Название класса каждого дочернего элемента в составе компонента должно начинаться с имени блока. Одной из основных задач БЭМ является сохранение последовательностей. Поэтому корректно именуйте классы элементов. Для вложенных элементов, имеющих CSS свойства, необходимо создавать классы с корректными именами.

Вот пример правильного именования элементов:

А такой подход будет неверным:

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

Такой подход будет верным:

Элементы с модификаторами

Иногда необходимо изменить только один элемент в компоненте. В таком случае модификатор необходимо добавить к элементу, а не к блоку:

Изменения элементов модифицированных блоков

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

Так будет правильно:

А так неправильно:

Как быть с именами, состоящими из нескольких слов?

Двойное подчеркивание и двойной дефис в БЭМ созданы как раз для этого: они разделяют смысловые структуры компонента:

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

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

Дополнительная информация

(язык: русский и английский), (язык: английский), (язык: русский)

Спасибо за внимание.

У любой веб страницы есть начало и конец, они обозначаются парным тегом .

HTML документ начинается с - каждая веб страница должна начинаться именно с него. Раньше было огромное количество вариантов тега DOCTYPE, но в соответствии с новой версией (HTML5), нужен только этот. Что такое DOCTYPE? Это тег , который сообщает браузеру версию HTML. Этот тег должен быть написан на первой строчке HTML документа.

Пример версии HTML 4.01
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

CSS (Cascading Style Sheets) – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML).

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

CSS. Структура языка

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

Правило состоит из селектора и блока объявлений.

Подключение CSS

CSS можно связать с HTML несколькими способами:

внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
добавить тег с атрибутом;
подключить внешнюю таблицу стилей:
.

CSS. Селекторы

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

CSS. Блок объявлений

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

В следующем списке типы селекторов расположены по возрастанию специфичности:

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри:not(), влияют)

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Когда при объявлении стиля используется модификатор !important , это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important , то применен будет стиль с большей специфичностью.

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