Использование изолированного CSS в компонентах Blazor
При работе с Blazor меня всегда беспокоило то, насколько легко случайно нарушить стили разных компонентов. Вы добавляли класс в один компонент, и внезапно что-то еще на совершенно другой странице выглядело не так. Оказывается, у Blazor есть встроенное решение для этой проблемы: изоляция CSS.
Что такое изоляция CSS?
Изоляция CSS позволяет ограничить стили конкретным компонентом. Blazor делает это, генерируя уникальный атрибут для каждого компонента во время сборки и добавляя его к селекторам CSS. Таким образом, ваши стили применяются только к тому компоненту, которому они принадлежат.
Нет необходимости в БЭМ-именовании, нет необходимости в сумасшедших хаках со спецификой. Просто чистый CSS с ограниченной областью действия.
Как его использовать
Допустим, у вас есть компонент под названием Card.razor:
[[[ТОК_1]]]
Чтобы добавить изолированные стили, вы просто создаете файл с тем же именем, но с расширением .razor.css. В данном случае: Card.razor.css.
[[[ТОК_4]]]
И все! Blazor автоматически подберет его и распространит эти стили только на компонент Card. Если у вас есть другой класс .card где-то еще, это не повлияет.
Как это работает под капотом
Когда вы создаете свой проект, Blazor переписывает HTML и CSS. Ваш компонент получает уникальный атрибут, например b-3x8qz7k2f1, а селекторы CSS добавляют этот атрибут:
[[[ТОК_8]]]
Сгенерированный пакет CSS обслуживается как {ProjectName}.styles.css. Убедитесь, что это есть в вашем index.html или _Host.cshtml:
[[[ТОК_12]]]
Если вам не хватает этой ссылки, ваши изолированные стили не будут отображаться, и вы потратите 30 минут, задаваясь вопросом, что происходит. Поверьте мне, я был там.
Нацеливание на дочерние элементы
Следует иметь в виду, что по умолчанию изолированный CSS применяется только к элементам текущего компонента. Если вы хотите стилизовать элементы внутри дочернего компонента, вам понадобится комбинатор ::deep:
::deep .child-element {
color: red;
}
Это говорит Blazor применять стиль и к совпадающим элементам внутри дочерних компонентов. Очень удобно, когда у вас есть компонент-оболочка, которому нужно стилизовать своих дочерних элементов.
Когда его использовать
Сейчас я использую изоляцию CSS практически для каждого компонента. Это делает вещи чистыми и предсказуемыми. Единственный раз, когда я не использую его, — это для действительно глобальных стилей, таких как сброс, типографика или переменные темы — они хранятся в общем файле CSS.
Надеюсь, вам понравился пост! Не стесняйтесь обращаться ко мне в любой социальной сети по адресу @emimontesdeoca.