Распространенные способы подключения 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.jsimport 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.jsimport 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. Но у каждого из них есть ваши достоинства и ваши недостатки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *