Использование амперсанда для классов CSS, псевдоклассов, псевдоэлементов и элементов

styled-components — популярная библиотека для оформления приложений React. Мы представили что это такое и как это использовать и предоставили 7 способов наследования стилей с помощью стилизованных компонентов.

В этой статье мы поговорим об использовании амперсанда. В styled-components & (амперсанд) используется для ссылки на все экземпляры компонента. Поддерживаемый препроцессором stylis, & используется для написания чистого кода для вложенности. & происходит от Sass и Less, которые являются расширениями CSS.

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

  • styled-components

Вот список примеров:

CSS-классы

В HTML атрибут class используется для указания класса(ов) элемента. Он может быть установлен для любого типа элемента и может принимать несколько имен классов, разделенных пробелом. Класс может использоваться несколькими элементами, а имя класса чувствительно к регистру.

Пример селектора .green

В CSS имена классов обычно используются для стилизации элементов.

Мы создаем элемент, для которого className установлено значение container. Далее src/App.js:

В строке 1 импортируется ./App.css.

В строке 4 элемент div устанавливает className в container.

Вот правило CSS, определенное селектором класса container в src/App.css:

Выполните npm start, и мы увидим следующий пользовательский интерфейс с синим фоном:

Вот окно проверки:

Он показывает, что div применяется с правилом CSS .container, определенным в App.css.

Пример компонента «Контейнер»

Селекторы, связанные с классом, можно заменить styled-components — пользовательскими компонентами React. Легко отследить, какие компоненты не используются или не определены во время компиляции. Это улучшает управляемость кода, сравнивая имена классов или другими способами. Поскольку это CSS в JavaScript, он обеспечивает динамическое моделирование с возможностью программирования.

Мы создаем стилизованный компонент Container. Ниже приведен пример компонента Container в src/App.js:

В строке 1 импортируется styled вместо ./App.css.

В строках 3–8 стилизованный компонент Container расширяет стили div. Он содержит свойства CSS, определенные в src/App.css.

Выполните npm start, и все заработает.

Вот окно проверки:

Внутри styled-components генерирует два класса для каждого компонента — один статический, а другой динамический. Имя класса генерируется алгоритмом MurmurHash. Он генерирует уникальный идентификатор на основе идентификатора компонента и оцененных строк стиля, а затем хеш-номер преобразуется в буквенное имя класса.

Имя статического класса — sc-<hashedStringName>. Он используется для идентификации стилизованного компонента, и к нему не привязаны стили. Имя будет одинаковым для всех экземпляров. В примере статический класс — sc-gsnTZi.

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

Пример селектора &.green

Для всех преимуществ styled-components рекомендуется использовать styled-components для стиля. Однако мы не можем избежать использования классов. Например, если мы используем стороннюю библиотеку, такую ​​как Система проектирования Ant, будут классы, определенные библиотекой.

& эффективен для обработки нескольких/вложенных классов. Селектор CSS, .class1.class2, выбирает все элементы с классом, установленным как class1, так и class2. Аналогично, &.class выбирает сам стилизованный компонент с классом, установленным на class.

Вот пример &.green в src/App.js:

В строках 8–10 селектор &.green устанавливает для свойства CSS зеленый фон. Этот селектор соответствует элементу в строке 14.

Выполняем npm start, и видим зеленый фон.

Вот окно проверки:

Внутри styled-components генерирует классы sc-eCYdqJ и gdGwCe для Container. .gdGwCe.green и .gdGwCe — это сгенерированные правила CSS.

Пример селектора & .green

Селектор CSS .class1 .class2 (с пробелом посередине) выбирает все элементы class2, которые являются потомками элемента class1. Аналогично, &. class выбирает все class элементы внутри определенного компонента стиля.

Вот пример &. green в src/App.js:

В строках 8–10 селектор &. green устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.

Выполните npm start, и мы увидим зеленый фон для P2.

Вот окно проверки:

Внутри styled-components генерирует классы sc-hKMtZM и jekZWP для Container. .jekZWP .green и .jekZWP — это сгенерированные правила CSS.

Пример селектора &&&&& .green

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

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

Вот пример &&&&& .green в src/App.js:

В строках 8–10 селектор &&&&&. green устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.

Выполните npm start, и мы увидим зеленый фон для P2. Пользовательский интерфейс выглядит так же, как и селектор, &. green.

Однако окно проверки показывает разницу:

Внутри styled-components генерирует классы sc-gsnTZi и hFatIX для Container. .hFatIX.hFatIX.hFatIX.hFatIX.hFatIX .green и .hFatIX — это сгенерированные правила CSS.

Это достаточная конкретика?

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

Псевдокласс — это ключевое слово, добавляемое к селектору, которое указывает особое состояние выбранного элемента (элементов). Например, :hover обычно используется для выбора элемента при наведении на него указателя пользователя. Ниже приведен список псевдоклассов: :active, :any-link, :autofill, :blank (экспериментальный), :checked, :current(экспериментальный), :default, :defined, :dir() (экспериментальный), :disabled, :empty, :enabled, :first, :first-child, _109 _, :fullscreen, :future (опытный), :focus, :focus-visible, :focus-within, :has() (опытный), :host, :host(), :host-context (опытный), :hover, :indeterminate, :in-range, :invalid, :is(), :lang(), :last-child, _ 126_, :left, :link, :local-link (экспериментальные), :not(), :nth-child(), :nth-col() (опытный), :nth-last-child(), :nth-last-col() (опытный), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :optional, :out-of-range, :past (опытный), :picture-in-picture, :placeholder-shown, :paused, _ 145_, :read-only, :read-write, :required, :right, :root , :scope, :state() (опытный), :target, :target-within (опытный), :user-invalid (опытный), :valid, :visited, and :where().

Пример селектора &:hover

& можно использовать для псевдоклассов. &:hover выбирает сам стилизованный компонент с состоянием :hover.

Вот пример &:hover в src/App.js:

В строках 8–10 селектор &:hover устанавливает для свойства CSS зеленый фон. Этот селектор будет совпадать, когда указатель наводится на любой контент в Container.

Выполните npm start, и мы увидим зеленый фон, когда указатель наведется на Container.

Вот окно проверки:

Внутри styled-components генерирует классы sc-eCYdqJ и zjyfz для Container. Когда выбрано состояние наведения, .zjyfz:hover и .zjyfz генерируются правила CSS.

Пример селектора & :hover

&: hover выбирает стилизованный компонент-потомок с состоянием :hover.

Вот пример & :hover в src/App.js:

В строках 8–10 селектор & :hover устанавливает для свойства CSS зеленый фон. Этот селектор сработает, когда указатель наведется на дочернее содержимое Container.

Выполните npm start, и мы увидим зеленый фон, когда указатель наведется на P2.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и iLhEec для Container. Когда выбрано состояние наведения, .iLhEec :hover и .iLhEec генерируются правила CSS.

Пример селектора & :is(div):hover

В любом месте селекторов можно использовать несколько псевдоклассов. & :is(div):hover выбирает потомок стилизованного компонента, который является div со состоянием :hover.

Вот пример & :is(div):hover в src/App.js:

В строках 8–10 селектор & :is(div):hover устанавливает для свойства CSS зеленый фон. Этот селектор будет сопоставлен, когда указатель наведется на потомка Container div.

Выполните npm start, и мы увидим зеленый фон, когда указатель наведется на P1.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и iQEDuO для Container. Когда выбрано состояние наведения div, .iQEDuO is(div):hover и .iQEDuO генерируются правила CSS.

Псевдоэлементы

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

Как правило, следует использовать двойное двоеточие (::) вместо одинарного двоеточия (:). Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку в старых версиях спецификации W3C этого различия не было, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.

Ниже приведен список псевдоэлементов: ::after (:after), ::backdrop, ::before (:before), ::cue, ::cue-region, ::first-letter (:first-letter), ::first-line (:first-line), ::file-selector-button, ::grammar-error (экспериментальный), ::marker, ::part(), ::placeholder, ::selection, ::slotted(), ::spelling-error (экспериментальный) и ::target-text (экспериментальный).

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

Пример селектора &::first-line

Псевдоэлемент ::first-line применяет стили к первой строке блочного элемента.

Вот пример &::first-line в src/App.js:

В строках 8–10 селектор &::first-line устанавливает для свойства CSS зеленый фон. Этот селектор применяется к первой строке Container.

Выполняем npm start, и видим зеленый фон первой строки.

Вот окно проверки:

Внутри styled-components генерирует классы sc-gsnTZi и jmHpQT для Container. .jmHpQT::first-line и .jmHpQT — это сгенерированные правила CSS.

Пример селекторов &::before и &::first-line

Псевдоэлемент ::before создает первый дочерний элемент выбранного элемента. Он часто используется для добавления косметического содержимого к элементу со свойством content. Он встроен по умолчанию.

Вот пример & ::before и &::first-line в src/App.js:

В строках 8–10 селектор & ::before создает первого потомка Container, который будет отображаться как * . Этот селектор применяется к элементам div в строках 18–23 и 24–28.

В строках 11–13 селектор & ::first-line устанавливает для свойства CSS зеленый фон. Этот селектор применяется к тексту первой строки потомков Container — элементы div в строках 18–23 и 24–28.

Выполняем npm start, и мы видим содержимое before и зеленый фон первой строки.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и bvMpeg для Container. .bvMpeg, .bvMpeg ::before и .bvMpeg ::first-line — это сгенерированные правила CSS.

Элементы

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

Пример селектора & div

Селектор CSS element1 element2 выбирает все element2 внутри element1. Аналогично, & div выбирает всех потомков компонента стиля div.

Вот пример & div в src/App.js:

В строках 8–10 селектор & div устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.

Выполните npm start, и мы увидим зеленый фон для P2.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и fdLUHb для Container. .fdLUHb div и .fdLUHb — это сгенерированные правила CSS.

Пример диапазона и селектора

span &выбирает компоненты стиля, которые являются потомками span.

Вот пример span & in src/App.js:

В строках 8–10 селектор span & устанавливает для свойства CSS зеленый фон. Этому селектору будет соответствовать элемент в строках 27–29.

Выполняем npm start, и видим зеленый фон для первого абзаца.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и cqdwhw для Container. span .sc-bczRLJ и .cqdwhw — это сгенерированные правила CSS.

Пример селектора & + &

Селектор CSS, element1 + element2, выбирает первое element2, расположенное сразу после element1. Аналогично, & + & выбирает стилизованный компонент, который размещается сразу после того же стилизованного компонента.

Вот пример & + & в src/App.js:

В строках 8–10 селектор & + & устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу Paragraph в строке 28.

Выполняем npm start, и видим зеленый фон для второго абзаца.

Вот окно проверки:

Внутри styled-components генерирует классы sc-bczRLJ и himWHV для Container. .sc-bczRLJ .sc-bczRLJ и .himWHV — это сгенерированные правила CSS.

Заключение

styled-components — популярная библиотека для оформления приложений React. Он широко используется проектами React. Мы показали 12 примеров использования амперсанда. Надеюсь, это сделает ваш код чистым и эффективным.

Спасибо за прочтение.

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