Главная » Статьи » Понимание CSS-in-JS

Понимание CSS-in-JS

Понимание CSS-in-JS

От автора: я собираюсь рассказать о CSS-in-JS, возможностях этой техники и о том, как мы можем создавать лучшие приложения, написав код CSS с помощью JavaScript.

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

В этой статье большинство примеров будут относиться к приложениям React, но CSS-in-JS не является чем-то специфичным для React — это техника для оформления стилей приложений и может применяться в любой другой среде или библиотеке. Чтобы понять CSS-in-JS, сначала мы собираемся немного узнать о CSS в React в целом и о том, как мы стилизовали приложения до появления CSS-in-JS. Затем мы познакомимся с модулями CSS, еще одной техникой для стилизации приложений React, которая в течение некоторого времени широко использовались многими разработчиками. После этого мы рассмотрим CSS-in-JS, почему он так часто используется разработчиками, его преимущества и т. д.

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

Техника CSS-in-JS в основном пришла для решения этой конкретной проблемы, у вас не будет тонны .css файлов, и вам не придется иметь дело с кодом CSS, как мы привыкли, когда в некоторых ситуациях приходится применять такие методы, как BEM, OOCSS и т. д., чтобы получить лучший код и улучшить приложение.

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

CSS в React

В React до появления CSS-in-JS наиболее распространенным способом работы с CSS было использование CSS-модулей. Но что такое CSS-модули?

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

Давайте представим, что у нас есть простой .css файл с именем menu.css. Внутри этого файла у нас есть некоторый код CSS, например:

.menu { width: 200px; height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .item { font-size: 16px; font-weight: 600; }

Затем, чтобы использовать его, мы импортируем этот модуль в компонент, например, так:

import styles from "./menu.css"

Например, давайте представим, что у нас есть простой элемент ul с тремя элементами li внутри, например:

<ul className="menu"> <li className="item">CSS</li> <li className="item">CSS-in-JS</li> <li className="item">CSS Modules</li> </ul>

Чтобы использовать классы, которые мы определили в модуле, все, что нам нужно сделать, это передать className каждого элемента внутри объекта, например, так:

<ul className={styles.menu}> <li className={styles.menu}>CSS</li> <li className={styles.menu}>CSS-in-JS</li> <li className={styles.menu}>CSS Modules</li> </ul>

Теперь, когда приложение запускается, имена классов будут преобразованы в новые имена классов, чтобы избежать конфликтов между глобальными стилями. Мы немного рассказали о модулях CSS, просто чтобы понять, как они работают. Теперь мы можем узнать больше о CSS-in-JS и его преимуществах.

CSS-в-JS

Возможно, вы уже знаете это, но есть небольшая разница между CSS-in-JS и встроенными стилями. Со встроенными стилями вы пишете код в объекте JavaScript, а затем присоединяете его к атрибуту style. При использовании встроенных стилей у вас есть некоторые ограничения — вы не можете использовать псевдо-селекторы, медиа-запросы, ключевые кадры и т. д.

CSS-in-JS отличается от встроенных стилей. Мы по-прежнему пишем весь CSS в JavaScript, но вместо того, чтобы передавать его в атрибут style, мы берем эти стили и вставляем фактическую строку CSS в теге style в DOM. Вставляя весь CSS в JavaScript и используя CSS-in-JS, вы можете получить отдельные папки, чтобы лучше организовать стили и иметь файлы для различных компонентов React, устраняя весь этот беспорядок, который есть у вас в одном .css файле.

Например, чтобы начать работать со встроенными стилями, все, что вам нужно сделать, это создать объект JavaScript и передать параметры для стилизации элемента, например:

const styles = { background: "#FE0000", color: "#FFFFFF" };

Затем, в элементе, вы передаете его в атрибут style, например, так:

<div style={styles}> <h1>CSS-in-JS</h1> </div>

Но использование встроенных стилей имеет свои ограничения, потому что у нас нет всех возможностей CSS в простых объектах, подобных этому. Таким образом, чтобы получить лучшее оформление в приложении, мы должны прибегнуть к библиотеке; в этом случае я собираюсь использовать Styled Components. Все, что вам нужно сделать, это установить Styled Components:

yarn add styled-components

Затем импортируйте его в компонент React:

import styled from "styled-components";

Чтобы начать использовать Styled Components, все, что вам нужно сделать, это создать объект с помощью литералов шаблона, например, так:

const StyledButton = styled.button` width: 120px; height: 42px; background: #FE0000; color: #FFFFFF; `;

Затем, чтобы использовать этот «компонент», который мы создали, все, что нам нужно сделать, это передать его. Вместо нативного элемента кнопки мы передаем созданную нами кнопку, например:

import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` width: 120px; height: 42px; background: #FE0000; color: #FFFFFF; `; const Button = () => ( <StyledButton> My Styled Button </StyledButton> ); export default Button;

Мы также можем выполнить рендеринг на основе условных значений, например, таких как свойство. Давайте представим, что наша кнопка получает свойство, с именем active, и мы хотим изменить цвет кнопки в зависимости от свойства. Вот как мы это сделаем:

const StyledButton = styled.button` width: 120px; height: 42px; background: ${props => props.active ? "#FE0000" : "#FE2012}; color: #FFFFFF; `;

Используя CSS-in-JS в приложениях, вы получаете огромное преимущество. Вам не придется иметь дело с болезненным обслуживанием в приложении. Вы можете проще организовать код, поскольку можете организовать все стили по компонентам или контейнерам. И вы можете очень легко использовать условный рендеринг (если используете какую-то библиотеку, например Styled Components) и отобразить то, что вам нужно, на основе свойства.

Библиотеки

CSS-in-JS в приложениях React особенно часто используется для стилизации приложений, и, конечно же, для этого есть множество библиотек. Вот список трех лучших библиотек CSS-in-JS и их функций.

Styled Components

Самая известная и распространенная библиотека CSS-in-JS — это Styled Components. Мы в этой статье рассмотрели ее кратко, но стоит упомянуть еще раз, что у нее есть некоторые полезные функции. Когда мы говорим о CSS-in-JS, первое, что приходит на ум многим разработчикам, это Styled Components. Это потому, что почти каждый разработчик, который в последнее время работал с React, когда-то работал со Styled Components. Это мощный способ определения стилей с помощью функции ES6 template literals, и идея использовать компоненты в качестве низкоуровневого стиля очень помогает при разработке приложений.

Простая кнопка с использованием Styled Component будет выглядеть так:

import React from "react"; import styled from "styled-components"; const ButtonStyled = styled.button` width: 120px; height: 40px; background: #FE0000; color: #FFFFFF; `; const Button = (props) => ( <ButtonStyled {...props}>My Styled Component Button</ButtonStyled> ); export default Button;

Очень просто и мощно! Styled Component имеют множество других функций, таких как рендеринг на стороне сервера, создание тем, ссылки, объекты стилей и утилиты тестирования. Если вы собираетесь создать сложное приложение, которое потребует большого количества CSS, я действительно рекомендую вам использовать Styled Components.

Emotion

Если вы работаете с приложением CSS Modules и никогда не работали с CSS-in-JS в приложениях React, библиотека, которая может упростить процесс — это Emotion. Вся идея Emotion заключается в том, чтобы синтаксис был максимально приближен к CSS. Таким образом, новичкам будет легче работать, и это делает принятие намного проще. Эта библиотека имеет много продвинутых функций, таких как карты источников, поставщики кэша, утилиты тестирования, и еще один приятный момент, о котором следует упомянуть, это то, что Emotion не зависит от фреймворка.

Если вы планируете использовать Emotion с React, вам необходимо установить пакет @emotion/core.

yarn add @emotion/core

Простой компонент кнопки, стилизованный с Emotion, будет выглядеть так:

import { css, jsx } from '@emotion/core' const color = 'white' render( <button css={css` background-color: #FE0000; font-size: 24px; border-radius: 6px; color: #FFFFFF; `} > My Emotion Button </button> )

Radium

Немного отличающийся от первых двух библиотек, Radium использует другой подход к CSS. Вместо того чтобы генерировать уникальное имя класса для каждого компонента, он добавляет встроенные стили прямо в HTML, поэтому каждый элемент приложения, использующий Radium, будет напрямую стилизован с помощью глобального атрибута style. Здесь следует упомянуть следующее: Radium можно использовать только в приложениях React, он не зависит от фреймворка.

Простой элемент кнопки, использующий Radium, будет выглядеть так:

import React from "react"; import Radium from "radium"; const styles = { base: { width: 120px, height: 40px }, warning: { background: "#FFB200" }, success: { background: "#169EFF" } }; const Button = ({ kind }) => ( <button style={[styles.base, styles[this.props.kind]]}>My Radium Button</button> ); // You need to wrap your component with Radium. export default Radium(Button);

Это одна из трех наиболее часто используемых библиотек в приложениях React. Но, конечно, у нас есть много других библиотек, таких как Aphrodite, JSS и Styletron. Весь смысл в том, чтобы показать вам, какие преимущества дает использование CSS-in-JS в разработке, предоставляя более сжатый, лучше написанный, повторно используемый код CSS во всем приложении. Используя CSS-in-JS, у вас не будет проблем, которые были связаны с модулями CSS, таких как мертвый код, конфликты между глобальными классами, минимизация и т. д.

Заключение

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

Автор: Leonardo Maldonado

Источник: https://www.telerik.com

Редакция: Команда webformyself.