Урок 8. Селекторы CSS. Задаем CSS-правила

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

Селекторы по тегу, классу и id

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

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

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

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

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

Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков

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

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

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

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

Источник

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

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

При написании тегов HTML часто бывает необходимо вкладывать теги друг в друга, но огромное дерево DOM очень плохо влияет на оптимизацию страницы. Чтобы «приблизиться» к желаемому тегу класса, может быть полезно использовать вложенные селекторы.

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

Cинтаксис

Заголовок

Минусы использования вложенности

Вы знаете как осуществляется работа подключения стилей? При загрузке html разметки, css свойства по порядку проходят по DOM – дереву разметки, периодически добавляя им стили. Сейчас представьте, если вложенность в DOM больше 10 и стили имея вложенность, каждый раз, когда сравнивают порядок тегов, классов, id. Какая большая нагрузка идёт. По итогу получается большое время ожидание при загрузке сайта.

Разберем на примере комбинированных селекторов:

CSS код:
.search.search_theme_light <
Color:blue;
>

Если добавить модификатор к элементу описанному выше, то он не перепишет стиль из-за вложенности в css.
.search_active

Данный модификатор сработает лишь, в том случае, если описать его так:
.search.search_disabled <>

Верное использование классов в css. Нужно стремиться к простому виду селекторов классов:
.body_position_fixed <>
.body_scroll-active <>

А при большом наименовании классов к примеру: main-blog-item__description-img.
При таких классах с использованием вложенности, вы зайдя в проект через неделю забудете где, что и как лежит/работает.

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

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

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

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

В чём отличие class от id?

Основное отличие, один и тот же Class можно использовать повторно и применять в любом месте. Id – это уникальное имя, которое будет использовано один раз.

Свойства описанные в css через id буду иметь больший вес, чем свойство имея class. Веса селекторов вы могли видеть выше.

.class <свойства>/*этот класс будет работать в любом теге*/
p#id <свойства>/*id применится ко всем p, но если будут дубликаты этого id*/

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

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

Как правильно писать вложенность в SCSS?

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

Представим ситуацию, у вас большой проект и в нём нужно использовать несколько вложенности. Не используя препроцессор будет полная каша в коде, особенно, если классы будут состоять из 2-3 слов. Как не нужно писать вложенность (данный способ можно использовать, если вы не знаете препроцессоры less/sass/scss)

На изображении показана верная вложенность в препроцессоре scss. Согласитесь, что это более структурировано и понятно?!

Как сократить код CSS

Сокращение лишнего и удаление не используемого/дублирующего код приведет к повышенной производительности проекта. Для этого можно использовать несколько вариантов сборщиков проектов.

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

Позволяют соединять действия и состояния нескольких блоков без дублирования

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

Компоненты в коде

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

Пример компоненты – card

Название элементов

Каждый компонент может содержать элементы. Они описываются классами в их именах словом.

Избегайте селекторов по тегу

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

Заключение

Вложение необходимо в элементы, где оно не может существовать отдельно. Кроме того, вложение идеально подходит для псевдоэлементов и псевдоклассов: before, after, hover, focus, visited и тд. Надеемся, что теперь ваш код станет понятным и комфортным в использование другим разработчикам. Повышайте свои скиллы и пишите красивый код. Желаем успехов!

Источник

Расширение CSS — SASS: Основы

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

Вложенность

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

Можно увидеть, что селекторы .logo и .company-name находятся внутри селектора .header. Что же это будет обозначать и во что скомпилируется данный код? Препроцессор SASS возьмёт правила селектора .header и оставит их без изменений, а вот для .logo и .company-name будет подставлен родительский селектор, то есть .header. На выходе мы получим следующий CSS:

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

Но будьте аккуратны. Использование селекторов повышает специфичность, так как теперь стили для класса .company-name выполнятся только при наличии родительского блока с классом .header. Такая специфичность зачастую вредит нормальному использованию CSS, поэтому всегда необходимо отдавать себе отчёт в том, нужно ли вводить такую вложенность.

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

Суффиксы

Не менее полезная возможность — суффиксы. Возьмём простой пример: мы пишем небольшой CSS-файл с модулем flex. Стили можно обозначить следующим образом:

Эти стили позволяют нам установить свойства display, justify-content и align-items. Причём последние два свойства зависят от свойства display. Если не указан класс flex, то выравнивание по осям не будет работать.

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

SASS позволяет вкладывать такие свойства внутрь друг друга. Так как главным классом здесь является flex, то все остальные можно расположить внутри него. Чтобы проверять наличие именно двух классов, используется суффикс &.

Другим удобным примером использования суффиксов является наличие псевдоклассов, например :hover.

SCSS

Комбинирование

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

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

Открыть доступ

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

Наши выпускники работают в компаниях:

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Источник

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

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

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

Синтаксис

Обозначения

Пример

Одновременно жирное начертание текста и выделенное цветом

Источник

Каскад и наследование

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

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

Конфликтующие правила

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово «каскадные» является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

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

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

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

Каскад

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

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

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

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1 <. >, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

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

Наследование

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

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

Некоторые свойства не наследуются — например, если вы установили для элемента width равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

Примечание: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.

Понимание взаимодействия этих концепций

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

Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:

Понимание наследования

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

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

Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

Примечание: Смотрите Origin of CSS declarations в [Page not yet written] для более подробной информации о каждом из них, и о том, как они работают.

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

Возврат всех исходных значений свойств

В примере ниже имеются два блока

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

Понимание каскада

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

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

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

Порядок следования

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

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

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

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

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

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

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

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

Примечание: Универсальный селектор (*), комбинаторы (+, >,

, ») и псевдокласс отрицания (:not) не влияют на специфичность.

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

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

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

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

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

!important

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

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.

Влияние расположения CSS

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

Подведение итогов

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними :

Проверьте ваши навыки

Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.

Что дальше?

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

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

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

Источник