Распространенные способы подключения CSS в JavaScript-приложения
Каждый способ подключения CSS в приложениях React, Vue или Angular имеет свои преимущества и недостатки. Рассмотрим каждый из них более подробно.
Доступные варианты подключения
Рассмотрим некоторые из наиболее часто используемых методов подключения CSS в JavaScript.
Вариант 1: таблица стилей
Мы начнем с привычного подхода – ссылка на один общий файл CSS.
<link rel="stylesheet" href="styles.css">Но по мере того, как приложение становится больше и сложнее, поддерживать единую таблицу стилей будет все труднее. Sass и PostCSS помогут справиться с подобными проблемами.
В зависимости от сложности приложения этот файл CCS будет загружаться асинхронно и блокировать рендеринг остальной части приложения. Поэтому данный метод для небольших приложений.
Тем не менее, общая таблица стилей обеспечивает четкое разделение между бизнес-логикой и стилями приложения. Кроме этого отдельный файл CSS легко кэшируется браузерами.
Вариант 2: Модули CSS
Стили с областями видимости позволяют программно генерировать имена классов, специфичные для конкретного компонента. Область действия CSS определяется конкретным компонентом. Это гарантирует, что имена используемых классов будут уникальными.
Подобная автоматизация приводит к появлению автоматически сгенерированных имен классов, таких как header__2lexd. Часть в конце имени - это хешированный селектор, который является уникальным.
Модули CSS предлагают различные способы управления сгенерированными именами классов. Более подробно об этом можно узнать из документации по модулям .
Представьте, что вы хотите использовать глобальный класс .screen-reader-text, который можно применить к любому компоненту приложения. При использовании CSS-модулей вам придется обратиться к псевдоселектору :global, который определяет размещенные внутри него стили как глобально доступные.
Пока вы импортируете файл CSS, который включает в себя блок объявления :global, в таблицу стилей компонента, вы будете использовать этот глобальный селектор.
Вот пример псевдоселектора :global в действии.
// typography.css
:global {
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
}А с помощью таких инструментов, как PostCSS Nested или Sass, вы можете импортировать шаблоны непосредственно в селектор.
// main.scss
:global {
@import "typography";
@import "forms";
}Также обратите внимание на то, как мы ссылаемся на имена классов в узлах DOM. Нужно, чтобы имена отдельных документов для Vue, React и Angular говорили сами за себя. Вот небольшой пример того, как ссылки на классы используются в компоненте React.
// ./css/Button.css
.btn {
background-color: blanchedalmond;
font-size: 1.4rem;
padding: 1rem 2rem;
text-transform: uppercase;
transition: background-color ease 300ms, border-color ease 300ms;
&:hover {
background-color: #000;
color: #fff;
}
}
// ./Button.js
import styles from "./css/Button.css";
const Button = () => (
<button className={styles.btn}>
Click me!
</button>
);
export default Button;Модули CSS позволяют воспользоваться преимуществами стилей с заданной областью видимости без ущерба для производительности приложения.
Также модули CSS можно комбинировать с препроцессорами. Sass, Less, PostCSS могут быть интегрированы в процесс сборки с использованием модулей CSS.
Вариант 3: CSS in JS
Есть несколько пакетов, которые делают создание кода CSS-in-JS максимально безболезненным. JSS, Emotion и Styled Components - это лишь некоторые из них.
CSS-in-JS работает следующим образом. Вы пишете CSS-код, связанный с отдельным компонентом. Во время компиляции приложения используемая платформа выводит CSS-код только тех компонентов, которые постоянно отображаются на веб-странице.
Фреймворки CSS-in-JS выводят связанный CSS-код в теге <style> раздела <head>. Это позволяет оперативно загружать критический CSS. При этом стили имеют ограниченную область действия, а имена классов хэшируются.
При навигации пользователя по приложению стили невостребованных компонентов будут удалены из раздела <head>. На их место будут добавлены стили входящих компонентов. Это повышает производительность приложения, позволяет обойтись без HTTP- запроса и не блокирует рендеринг. Также CSS-in-JS позволяет ссылаться на состояния компонентов и функции для рендеринга стилей CSS.
Основные аспекты использования данного подхода:
- Некоторые решения CSS-in-JS требуют, чтобы стили были встроены в элемент, который вы пытаетесь стилизовать. Для этого используется очень сложный синтаксис.
- CSS-in-JS предоставляет мощные инструменты, которые сложно реализовать с помощью модулей CSS или простой таблицы стилей.
- Нужно уметь использовать новейшие функции CSS, такие как вложенность и переменные.
Пример компонента React с использованием библиотеки Styled Components:
// ./Button.js
import styled from 'styled-components';
const StyledButton= styled.button`
background-color: blanchedalmond;
font-size: 1.4rem;
padding: 1rem 2rem;
text-transform: uppercase;
transition: background-color ease 300ms, border-color ease 300ms;
&:hover {
background-color: #000;
color: #fff;
}
`;
const Button = () => (
<StyledButton>
Click Me!
</StyledButton>
);
export default Button;Заключение
Есть несколько различных способов, позволяющих справиться с CSS-архитектурой в приложениях JavaScript. Но у каждого из них есть свои достоинства и свои недостатки.