Вложенные селекторы

Содержание

3. CSS — Селекторы: синтаксис, виды, правила и группировка

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

    Селектор — это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

или и т.д.
  • Свойство — это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение — задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
  • Синтаксис селекторов в CSS следующий:

    Пример. Вы можете задать границу таблицы следующим образом:

    Здесь синтаксис селектора такой: table — это селектор, а border — свойство, а 2px solid #FF8C00 — значение этого свойства.

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

    Содержание

    Стандартные селекторы

    Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:

    Универсальные селекторы

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

    Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

    Селекторы потомков или вложенные селекторы

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

      .

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

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

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

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

    ID селекторы

    Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

    Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом . Вы можете сделать id селектор немного более конкретным. Например:

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Истинная мощность id селекторов — это когда они используются в качестве основы для селекторов-потомков, например:

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

    Дочерние селекторы

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

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

    или

    Соседние селекторы

    HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

    Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

    Селекторы атрибутов

    Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

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

    Для селектора атрибутов применяются следующие правила:

    • p[lang] — выбирает все элементы абзаца с атрибутом lang.
    • p[lang=»ru»] — выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
    • p[lang

    =»ru»] — выбирает все элементы абзаца, где атрибут lang содержит слово «ru».

  • p[lang|=»ru»] — выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
  • Несколько правил стиля

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

    Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

    Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

    Группировка селекторов в CSS

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

    Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

    Вы можете группировать различные id селектора вместе, как показано ниже:

    Урок №5. Вложенные и сгруппированные селекторы, наследование

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

    В этой структуре самым главным родительским элементом будет

    > и еще глубже . Так же элемент

    будет дочерним для

    . Для тэга родительскими будут и

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

    Как правило наследуются не все свойства, например, могут наследоваться такие свойства, как цвета шрифта, размер шрифта и т.д. А не наследуются, например, ширина блока, отступы и т.д.

    В примере описанном выше, если тэгу

    — 14px , тогда тэг будет наследовать размер в 14px , от ближнего родственника.

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

    Допустим у нас есть HTML -структура:

    Задать стиль для

    можно следующим образом

    Оба этих варианта для данной структуры сделаю абсолютно одно и тоже — окрасят текст в красный цвет. Но вы заметили, что перед p , во втором случае появилось div . Это называется вложенные селекторы, они позволяют отделять стили друг от друга. Все в родительских и дочерних элементах. Вот эта запись:

    Будет применять стиль ко всем

    тэгам, у которых в родителях есть

    Отсюда вытекает еще одна особенность наследования. Допустим, у нас есть такая структура HTML :

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

    Вот как это будет выглядеть:

    Т.е. тут четко прослеживается наследование и использование этого в CSS .

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

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

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

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

    Дочерние и контекстные CSS селекторы

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

    В своих публикациях я довольно подробно останавливался на различных видах CSS селекторов: > онлайн с помощью встроенного инструмента Google Chrome (скачать бесплатно последнюю версию, установить и настроить самый быстрый браузер). Такие средства редактирования имеют новейшие модификации всех популярных браузеров, включая плагин Firebug для Firefox (как установить, скачать и пользоваться).

    Теоретический материал этого поста вы можете также изучать, делая редактирование любой страницы любого сайта! Для этого просто нажмите F12, если пользуетесь Google Chrome или Mozilla Firefox (скачать бесплатно Мазила Фаерфокс). А теперь представлю содержание тега p, на примере которого будем изучать дочерние и контекстные CSS селекторы:

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

    Эта HTML конструкция содержит тег абзаца p, теги форматирования текста em и strong. Этот параграф будет подопытным в сегодняшней публикации, на его примере я покажу, как меняется оформление его текста, в зависимости от того, какие селекторы — дочерние или контекстные — используются в правиле CSS.

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

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

    Дочерний CSS селектор

    Дочерний селектор в дереве элементов находится всегда непосредственно внутри родительского элемента, в этом случае синтаксис написания CSS селектора будет следующим:

    Стиль будет применен к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Разберем более подробно, используя приведенный выше скриншот с деревом элементов. Например, следуя синтаксису, можно установить такое правило:

    Это правило будет влиять на последнее слово абзаца “курсивом”, поскольку именно оно заключено между открывающим и закрывающим тегами em. Тег em является дочерним для p, потому что размещается непосредственно внутри него, следовательно текст содержания, а именно слово “курсивом” будет окрашено в зеленый цвет.

    Однако другое тег em не служит прямым потомком тега p, так как входит в состав тега strong, вследствии чего часть абзаца “теги форматирования em и strong” не будет окрашена.

    Контекстный CSS селектор

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

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

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

    Теперь содержание данного параграфа будет оформлено таким образом:

    Как видите, зеленым окрашен не только текст части содержания абзаца, который непосредственно заключен в тег форматирования em, то есть слово “курсивом”, но и участок текста другого тега em, который входит еще и в состав тега strong. Это случилось потому, что действует правило с контекстным селектором, для которого не важен уровень вложенности в отличие от дочернего селектора. В этом и есть принципиальная разница дочернего и контекстного селектора.

    Рассмотрим еще один пример взаимодействия контекстных и дочерних селекторов с нашим абзацем. Пропишем cледующие CSS правила для дочернего и контекстного селектора:

    После этого наш абзац приобретает такое оформление:

    Как видите, кусок текста, заключенный в теги em и strong, выкрашен в красный цвет, потому что для него справедливо правило контекстного селектора, то есть тег em заключен в контейнеры strong и div, а уровень вложенности, как уже было отмечено, не имеет значения.

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

    Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже. То есть в данном случае правило дочернего селектора находится в документе ниже, чем CSS стили, прописанные для контекстного селектора контейнера div. Поэтому слово “курсивом” стало зеленым. Если поменять их местами, то правило «p> em » перестает действовать и участок текста “курсивом” будет красным.

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

    CSS Урок 16 Сгруппированные и Вложенные Селекторы

    Группировка Селекторов

    В таблицах стилей обычно существуют элементы с одинаковым стилевым оформлением.

    , не будут иметь никакого эффекта этого правила.
    h1
    <
    color:green;
    >
    h2
    <
    color:green;
    >
    p
    <
    color:green;
    >

    Чтобы уменьшить объем кода, вы можете группировать селекторы.

    Отделяйте каждый селектор запятой.

    В примере ниже мы сгруппировали селекторы из кода выше:

    Пример

    h1,h2,p
    <
    color:green;
    >

    Попробуйте сами »
    Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

    Вложенные Селекторы

    Можно применить стиль для селектора внутри другого селекора.

    В примере ниже, один стиль указан для всех элементов p, другой стиль указан для всех элементов с :

    Основы Sass: Вложенность

    Когда вы только начинаете использовать Sass, первое, с чем вы сталкиваетесь — это вложенность (nesting). Одна из причин, по которой мы используем препроцессоры, заключается в том, что они помогают сократить количество кода. В частности, вложенность позволяет использовать сокращения при написании правил. Однако проблема всех отличных инструментов в том, что ими легко злоупотребить. Излишнее использование вложенности приводит к сложным, не поддающимся сопровождению стилям.

    Что такое вложенность

    Вложенность позволяет записывать селекторы, имитирующие структуру HTML. Это дает возможность использовать сокращения при написании стилей. Например:

    Это простейший пример вложенности, элемент div содержит элемент p. Скомпилированный результат:

    Элементу div мы можем задать собственные свойства:

    Этот пример скомпилируется в два разных правила, одно для элемента div, другое — для p.

    Как использовать вложенность

    Использовать вложенные стили достаточно просто: нужно всего лишь записать селектор (или селекторы) между фигурными скобками другого селектора.

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

    Ограничения на уровень вложенности действительно нет. Но если что-то можно сделать, это не значит, что это нужно делать. Хорошей практикой считается сохранение не более трех уровней вложенности. Большее число уровней влияет на читаемость кода. Sass призван помочь нам писать CSS быстрее, а не превратить его в кучу неподдерживаемых стилей. Например:

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

    Представьте, что мы изменим структуру страницы, например, поменяем .content на .article. Все вложенные стили должны быть переписаны, поскольку все они зависят от .content.

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

    Ссылки на родитеский селектор

    В страшном примере выше мы использовали &, который должен замещаться на родительский селектор. Символ : использовался для создания псевдо-классов для ссылок.

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

    Вложенность свойств

    Sass также позволяет использовать сокращения для свойств. Обычно для определения свойств из одного пространства имен, например border, мы должны каждое свойство записывать отдельно. В Sass мы можем задать пространство имен, а внутри перечислить свойства.

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

    Заключение

    Теперь, когда вы познакомились с вложенностью, пожалуйста, используйте ее ответственно. Очень просто с помощью вложенности превратить стили в ночной кошмар читаемости. Где и как использовать вложенность зависит от вас, если вы решите использовать 8 уровней вложенности, пожалуйста. Но будьте готовы к долгим ночным часам работы при рефакторинге проекта.

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

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

    Селекторы CSS

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

    В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

    Настройка

    Для примера нам нужен только один HTML-файл и таблица стилей CSS . Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

    Теперь создадим в той же папке файл styles.css . Это все, что понадобится для изучения CSS селекторов .

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

    Селекторы классов позволяют применять стили CSS к определенному элементу HTML . Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента

    • Указанный атрибут класса в элементе HTML ;
    • Соответствующий селектор классов CSS .

    Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:

    Теперь стилизуем абзац

    в файле CSS с помощью следующего кода:

    Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

    Конвенция имен классов

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

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

    Более полезные div

    Атрибут class применяется не только к элементам

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

    Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div . Добавьте следующий код в файл styles.css :

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

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

    Дивы контейнеров

    Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в

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

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

    Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы

    Повторное использование стилей классов

    Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа . Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

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

    Изменение стилей классов

    Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу . Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

    Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:

    Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action ( обязательно добавьте этот код после правила .button ):

    Порядок имеет значение

    Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

    • Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
    • Переопределение существующего в классе .button стиля — background-color .

    Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.

    Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются « одинаково », а приоритет определяется исключительно порядком размещения правил в файле styles.css .

    Другими словами, следующие элементы эквивалентны:

    Селектор потомков

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

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

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

    Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац

    . При этом остальных элементов , размещенных на странице это изменение не коснется:

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

    Не переусердствуйте

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

    Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML :

    Если захотите применить эти стили к заголовку

    , который не был обернут в тег

    Псевдоклассы для ссылок

    До сих пор все селекторы CSS , которые мы рассматривали, были связаны непосредственно с фрагментами HTML-разметки . Тем не менее, на отображаемой веб-странице происходит больше, чем задает HTML-контент . Существует « стандартный » перечень действий, которые может предпринять пользователь.

    Основные стили ссылок

    В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

    • :link — ссылка, по которой пользователь еще не переходил;
    • :visited — ссылка, по которой пользователь переходил раньше;
    • :hover — ссылка, на которую пользователь навел курсор мыши;
    • :active — ссылка, нажатая мышью (или пальцем).

    Рассмотрим эти псевдоклассы, добавив следующие правила в CSS ( также обратите внимание на то, что мы используем для обозначения цветов ключевые слова , а не шестнадцатеричные коды ):

    Состояние visited hover

    Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited , когда мы изменим атрибут href на URL-адрес , который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

    Добавьте это правило ниже предыдущего фрагмента кода:

    Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она « перекрашивается » в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS , о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

    Состояние visited active

    Можно исправить это с помощью CSS псевдоселектора a:visited:active . Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action , порядок, в котором правила определяются в файле styles.css , имеет значение:

    Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

    Псевдоклассы для кнопок

    Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button . Это позволит создавать кнопки, которые ведут куда-то.

    Элемент ссылки, а не элемент div

    Сначала нужно изменить кнопки, чтобы они стали элементами , а не просто элементами

    Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что является встроенным элементом, а также имеет значение цвета по умолчанию:

    Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

    Стили кнопок

    Начнем с :link и :visited . Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

    Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

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

    Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу , и вы превратите его в интерактивную кнопку.

    Другая кнопка

    Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более « специфичен », чем текущее правило .call-to-action , поэтому он имеет приоритет.

    Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим ( убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS ):

    Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов , поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

    Псевдоклассы для структуры

    Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов , которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

    Например, мы могли бы использовать :last-of-type , чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

    Это позволяет не затрагивать первые два элемента

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

    Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis . Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

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

    . Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов

    Предостережения

    Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент

    в каждом элементе контейнера.

    У нас есть один общий

    Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент

    здесь также будет соответствовать p:first-of-type , потому что область применения псевдокласса ограничена родительским элементом.

    Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый

    Различные разработчики придерживаются разных « школ ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента .

    Селекторы идентификаторов

    CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

    Вместо атрибута class для любого элемента HTML , используется атрибут id . Попробуйте добавить идентификатор ко второй кнопке:

    Соответствующий селектор CSS должен начинаться с символа хэша ( # ). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

    Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id . Довольно скоро наш CSS начнет выглядеть довольно « грязно »:

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

    Фрагменты URL-адресов

    Атрибуты id должны быть уникальными, поскольку на них указывают « фрагменты URL-адресов ». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса :

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

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

    Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS . Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов , так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес , то сломаете свой сайт.

    Специфичность CSS

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

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

    Если вы добавите следующий код после существующих правил .call-to-action , он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

    Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action :

    CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция « порядок имеет значение » работает только тогда, когда все правила имеют одинаковую специфичность:

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

    Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием « BEM ». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

    Заключение

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

    Данная публикация представляет собой перевод статьи « css selectors » , подготовленной дружной командой проекта Интернет-технологии.ру

    Методология

    Инструментарий

    Учебные материалы

    В БЭМ-методологии CSS используется для оформления страниц и является одной из технологий реализации блока.

    Основные принципы работы с CSS рассматриваются в следующих разделах:

    Селекторы

    В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.

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

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

    Значением атрибута class может быть разделенный пробелами список слов. Это позволяет использовать разные БЭМ-сущности на одном DOM-узле.

    Совмещение тега и класса в селекторе

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

    CSS-правила заданы в селекторе button.button .

    Допустим, блоку добавили модификатор active со значением true :

    Селектор .button_active не переопределит свойства блока, записанные как button.button , так как специфичность button.button выше чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с тегом button.button_active .

    В результате развития проекта могут, например, появиться блоки с селекторами input.button , span.button и a.button . В таком случае все модификаторы блока button и вложенные в него элементы потребуют четыре разные декларации для каждого случая.

    Нужно стараться использовать простые селекторы классов:

    Вложенные селекторы

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

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

    Вложенность уместна, если необходимо изменить стили элементов в зависимости от модификатора (например, состояния блока или заданной темы):

    Комбинированные селекторы

    Методология БЭМ не рекомендует использовать комбинированные селекторы. Комбинированные селекторы (например, .button.button_theme_islands ) имеют более высокую специфичность, чем одиночные селекторы, что усложняет задачу их переопределения.

    CSS-правила заданы в селекторе .button.button_theme_islands .

    Допустим, блоку добавили модификатор active с значением true :

    Селектор .button_active не переопределит свойства блока, записанные как .button.button_theme_islands , так как специфичность .button.button_theme_islands выше, чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с селектором .button и объявлен ниже .button.button_theme_islands , так как специфичность обоих селекторов одинакова:

    Нужно стараться использовать простые селекторы классов:

    Именование

    Имя селектора должно полно и точно описывать представляемую им БЭМ-сущность.

    В качестве примера рассмотрим следующие четыре строки CSS-кода:

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

    Сложнее сделать подобное предположение с такой группой селекторов:

    Имена icon , text , theme_islands не так информативны.

    сделать имена CSS-селекторов максимально информативными и понятными;

    решить проблему коллизии имен;

    независимо описывать стили блоков и их опциональных элементов.

    Модификаторы

    Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение. Изменение оформления блока производится при помощи установки/снятия модификатора.

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

    Это избавляет от ненужного «Copy-Paste».

    Миксы

    совмещать поведение и стили нескольких сущностей без дублирования кода;

    одинаково форматировать разные HTML-элементы.

    Внешняя геометрия и позиционирование

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

    В данном примере внешняя геометрия и позиционирование блока button задана через элемент header__button . Блок button не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

    Стилизация групп блоков

    Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы. Обычно для решения подобных задач применяют групповые селекторы.

    В данном примере текст внутри блоков article и copyright имеет один и тот же цвет и шрифт.

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

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

    Разделение кода на части

    К CSS по БЭМ применяются основные принципы организации и хранения кода:

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

    CSS-файлы для каждого компонента хранятся в соответствии с правилами организации файловой структуры БЭМ-проекта.

    Разделение кода на части и строгая организация файловой структуры проекта позволяет:

    облегчить навигацию по проекту;

    повторно использовать и переносить компоненты;

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

    Блок button в файловой структуре проекта:

    Такое разделение позволяет быстро находить нужные файлы.

    Принцип единственной ответственности

    Как и в объектно-ориентированном программировании, принцип единственной ответственности (англ. Single responsibility principle) в CSS по БЭМ означает, что каждая CSS-реализация должна иметь одну ответственность.

    Ответственность: внешняя геометрия и позиционирование (зададим внешнюю геометрию и позиционирование для блока button через элемент header__button ).

    Селекторы с одиночной ответственностью придают коду больше гибкости.

    Принцип открытости/закрытости

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

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

    Существующая функциональность кнопки расширена при помощи класса button_size_s (переопределены свойства font-size и line-height ). Теперь на странице есть две кнопки разного размера.

    Нарушение принципа открытости/закрытости

    Изменение существующей CSS-реализации

    Текущая CSS-реализация кнопки должна быть закрыта для редактирования. Изменения коснутся всех блоков button .

    Оформление кнопки стало зависеть от ее расположения. Изменения коснутся всех блоков button внутри блока content .

    Принцип разработки программного обеспечения, нацеленный на снижение повторений в коде.

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

    Как видно из примера, в селекторе btn повторена существующая реализация блока button .

    Перепишем пример в соответствии с принципом DRY:

    Благодаря добавлению модификаторов, мы избавились от блока btn .

    Важно! Принцип DRY имеет отношение только к функционально однотипным компонентам страницы, например, кнопки.

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

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

    Композиция вместо наследования

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

    Новые CSS-реализации в БЭМ собирают из уже существующих, путем их объединения. Это сохраняет код несвязным и гибким.

    Допустим, есть три готовые реализации:

    кнопка — блок button ;

    меню — блок menu ;

    всплывающее окно — блок popup .

    Реализовать раскрывающийся список (блок select ).

    Разработать раскрывающийся список с произвольным внешним видом — весьма непростая задача. Однако, если есть готовые компоненты (кнопка, всплывающее окно и меню), остается только правильно описать их взаимодействие.

    Работа с уровнями переопределения

    Применение принципов БЭМ-методологии к CSS позволяет разделять представление блоков по разным уровням.

    Разделение по уровням позволяет:

    реализовывать новый внешний вид блока на другом уровне переопределения, сохраняя предыдущий, наследовать и дополнять его;

    полностью перекрывать внешний вид блока (переопределять);

    добавлять блоки с новым представлением.

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

    При сборке в файл desktop.css попадут все базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня desktop .

    Файл mobile.css будет включать базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня mobile .

    Разделение представления блока button по разным уровням позволяет:

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

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

    Как перейти на CSS по БЭМ

    Чтобы реализовать принципы БЭМ в проекте, необходимо:

    абстрагироваться от DOM-модели и научиться создавать блоки;

    не использовать ID-селекторы и селекторы тегов;

    минимизировать количество вложенных селекторов;

    использовать соглашение по именованию CSS-классов, чтобы избежать коллизии имен и сделать имена селекторов максимально информативными и понятными;

    работать в единых терминах блоков, элементов и модификаторов;

    выносить в модификаторы CSS-свойства блока, изменение которых кажется вероятным;

    разделять код на мелкие независимые части для удобства работы с отдельными блоками;

    повторно использовать блоки.

    Как начать реализовывать идеи БЭМ в существующем проекте

    Создавайте новые компоненты по БЭМ, а старые изменяйте по мере необходимости.

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

    Используйте префиксы в именах CSS-классов (например, bem- ), чтобы отличить новый код от старого.

    После знакомства с CSS по БЭМ переходите к рассмотрению особенностей реализации JavaScript по БЭМ-методологии.

    Вложенные селекторы

    Рекомендованные сообщения

    Создайте аккаунт или войдите в него для комментирования

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

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Войти

    Уже зарегистрированы? Войдите здесь.

    Статистика пользователей

    Сейчас на странице 0 пользователей

    Нет пользователей, просматривающих эту страницу.

    Спрашивают сейчас

    Автор: npofopr
    Создана 18 октября

    Автор: digenis
    Создана 18 часов назад

    Автор: envoleon
    Создана Суббота в 14:42

    Знаете ли вы селекторы?

    CSS3-селекторы – фундаментально полезная вещь.

    Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

    Поэтому эти селекторы необходимо знать.

    Основные виды селекторов

    Основных видов селекторов всего несколько:

    • * – любые элементы.
    • div – элементы с таким тегом.
    • #id – элемент с данным id .
    • .class – элементы с таким классом.
    • [name=»value»] – селекторы на атрибут (см. далее).
    • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

    Селекторы можно комбинировать, записывая последовательно, без пробела:

    • .c1.c2 – элементы одновременно с двумя классами c1 и c2
    • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

    Отношения

    В CSS3 предусмотрено четыре вида отношений между элементами.

    Самые известные вы наверняка знаете:

    • div p – элементы p , являющиеся потомками div .
    • div > p – только непосредственные потомки

    Есть и два более редких:

    p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Как работать с CSS-препроцессорами и БЭМ

    Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

    Содержание

    Sass, LESS, stylus, PostCSS.

    Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub или форкните репозиторий и пришлите pull request.

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

    Золотые правила

    Cоблюдайте предложенные здесь или свои собственные соглашения.

    Есть ситуации, когда правила нужно нарушить. Причина должна быть действительно серьезной, не предположительной.

    1. Весь код проекта должен выглядеть так, словно он написан одним человеком, вне зависимости от количества разработчиков.
    2. Делать нужно настолько просто, насколько возможно. Но не проще.
    3. Любой инструмент при бездумном использовании может выстрелить в ногу.

    БЭМ (как метод именования селекторов)

    Зачем

    • Самодокументируемость.
    • Имитация пространства имён (простота и безопасность модификации).
    • Отсутствие зависимости от DOM-структуры.
    • Проектное реиспользование блоков.
    • Кросспроектное реиспользование блоков.

    Само понятие БЭМ — не только метод именования селекторов, но парадигма восприятия проекта как набора сущностей (блоки, элементы, модификаторы). Полный стек БЭМ подразумевает двойную шаблонизацию и имеет относительно высокий порог входа. Используйте БЭМ хотя бы как способ именования селекторов.

    Блок — это самостоятельная часть страницы

    • Название класса должно быть простым и коротким.
    • Название класса должно отвечать на вопрос «Что это?»
    • Не используйте сокращения кроме наиболее частых
    • Название не должно отвечать на вопрос «Как выглядит?»

    Блоки можно и нужно вкладывать друг в друга

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

    Элемент — часть БЭМ-блока

    • Название класса формируется из названия блока с добавлением __ и названия элемента.
    • Название класса должно быть простым и коротким.
    • Название класса должно отвечать на вопрос «Что это?»
    • Избегайте сокращений, кроме наиболее частых.
    • Название не должно отвечать на вопрос «Как выглядит?»

    Элемент можно использовать вне его блока только в исключительных случаях

    Элемент — часть блока, но, поскольку, БЭМ-дерево независимо от HTML-дерева, элемент можно использовать и вне его блока в некоторых исключительных условиях (сам блок должен быть на странице).

    Пример: расположение попапа-элемента не внутри блока-родителя, а в самом конце DOM (дабы показывать попап независимо от ограничения видимости родителей).

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

    Почему нельзя просто так располагать элемент вне блока:

    • теряется логика разметки,
    • сложно стилизовать элементы, которые могут оказаться где угодно (float, абс. позиционирование и некоторые другие стили такого элемента могут «сломать» верстку).

    Элементов может не быть

    Не у всех блоков должны быть элементы: кнопка — всегда БЭМ-блок, но БЭМ-элементы у неё внутри встречаются относительно редко.

    Как отличить БЭМ-блок и БЭМ-элемент

    Просто задайте себе вопрос: «Эта сущность может потребоваться мне отдельно, сама по себе? Или она нужна только внутри её родителя?» Если нужна отдельно — это БЭМ-блок, если мыслима только внутри родителя — это БЭМ-элемент.

    В действительно сомнительных случаях делайте выбор в пользу БЭМ-блока.

    Не забывайте о миксовании (возможности иметь на одном теге и класс уровня БЭМ-элемента какого-то родительского блока, и свой класс уровня БЭМ-блока).

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

    Некоторые фрагменты дизайна — всегда БЭМ-блоки

    • Кнопка (любые кнопки)
    • Блоки внутри форм (блок для текстового поля, блок для радиокнопки и т.п.)
    • Пагинация
    • Табы
    • Лейблы (метки)
    • Социальные ссылки
    • «Лайк» со счётчиком

    Модификатор — дополнительный класс для смены оформления или поведения

    • Название класса формируется из названия блока/элемента с добавлением — и названия модификатора.
    • Название должно быть простым и коротким.
    • Название класса может отвечать на вопросы «Что это?», «Что меняется?», «Чем отличается от прочих?»
    • Избегайте сокращений, кроме наиболее частых.

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

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

    Миксование — комбинирование на одном теге классов БЭМ-блока и БЭМ-элемента

    Комбинация возможна в любом сочетании: БЭМ-блок + БЭМ-элемент, БЭМ-блок + БЭМ-блок, БЭМ-элемент + БЭМ-элемент. Этот подход позволяет:

    • Добавить некоторые стилевые свойства, необходимые только в месте добавления (использование модификатора нерационально). Пример: для .btn внутри .page-header необходим внешний левый отступ в 37 пикс. Можно дописать для тега с .btn дополнительный класс .page-header__btn и дать отступ с помощью этого селектора. Это нормальная практика, её можно спокойно использовать.
    • Объединить стилизацию 2-х и более блоков. Пример: для .article и для .page-footer__section шрифтовые свойства одинаковы. Можно вынести определение шрифтовых свойств в новый блок .text и дописать этот класс на .article и .page-footer__section . Этот подход излишне связывет части страницы (напоминает OOCSS и класс-хелпер), не делайте так.
    • Обойтись без тега-обёртки с добавляемым селектором. Пример: страница каталога, 7+ товаров в потоке, каждый товар — .product , но каждому элементу потока нужны стилевые свойства ячеек модульной сетки (по которой выстроен потоковый вывод). Можно добавить для .product класс ячейки модульной сетки, что бы не делать обертку с этим классом. Это чревато конфликтом отступов/размеров, не смешивайте на одном теге классы обёртки и содержимого.

    Классы БЭМ-блоков следует писать первыми.

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

    Один БЭМ-блок = один файл

    В файловой системе при работе с CSS-препроцессорами каждый БЭМ-блок должен быть описан в своём отдельном файле.

    БЭМ-дерево плоское, в отличие от DOM

    В классах БЭМ-элементов нельзя прописывать иерархию (два и более сегмента __ недопустимы).

    Sass, LESS, Stylus, PostCSS.

    Файловая организация

    • Один БЭМ-блок = один препроцессорный файл. Всегда.
    • Файл со стилизацией БЭМ-блока должен называться так же, как сам блок.
    • Используйте «генераторы блоков» (простой пример, пример посложнее) для ускорения работы.

    @import

    • Компилируйте один файл (диспетчер подключений), в котором подключаются все прочие.
    • Импортируйте файлы только в диспетчере подключений (допустимо импортировать примеси внутри отдельного файла, например, mixins.scss ).
    • Не пишите никаких селекторов в диспетчере подключений.
    • Не импортируйте файлы внутри медиа-условий.
    • Один БЭМ-блок = один препроцессорный файл. Всегда.

    Вложения селекторов

    • Чем меньше уровней вложенности, тем лучше.
    • Не допускайте более 3-х уровней вложенности (псевдоэлемены, псевдоселекторы и медиа-условия не считаются увеличивающими вложенность).
    • Осторожно используйте жесткое наследование.
    • Всегда оставляйте пустую строку перед вложенным селектором или @media .
    • Всегда делайте дополнительный отступ для вложений.

    @media

    • Вкладывайте @media в селекторы, а не наоборот.
    • Не вкладывайте @media друг в друга.
    • Предпочтите путь mobile-first, избегайте указания @media -условия max-width в пользу min-width.
    • Пишите @media рядом, не пишите селекторы между ними.
    • Пишите условия для @media там, где используете @media , не пишите условия в переменных.

    Амперсанд

    • Используйте амперсанд только перед:
      • разделителем БЭМ-элемента,
      • разделителем БЭМ-модификатора,
      • псевдоэлементом или псевдоселектором.
    • Никогда не используйте амперсанд в местах разделения словосочетаний имён блоков, элементов или модификаторов (см. пример).
    • Никогда не повторяйте написанный с амперсандом селектор внутри одного контекста.

    Очередность написания в контексте селектора

    В контексте селектора используйте следующую очередность:

    1. Стилевые правила для этого селектора.
    2. @media этого контекста.
    3. Псевдоселекторы и псевдоэлементы.
    4. Вложенные сторонние селекторы.
    5. БЭМ-элементы.
    6. БЭМ-модификаторы.
    Илон Маск рекомендует:  Что такое код dlgdirselect

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL