Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3393

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

Всё, что вам нужно знать о CSS-in-JS

CSS-LIVE 25.11.2017 в 17:57

Жизнь во фронтенде

Всё, что вам нужно знать о CSS-in-JS

Перевод статьи All You Need To Know About CSS-in-JS с сайта hackernoon.com для CSS-live.ru, автор — Индрек Ласн

Прекрасная иллюстрация Анны Дадей

Краткая выжимка статьи — поговорим о компонентном подходе к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности).

Пример со стилизованным React-компонентом

Предположу, что вы слышали термины «CSS-in-JS», «стилизованные компоненты», «Radium», «Aphrodite», но не стали в них вникать, думая: «Ну и зачем это всё нужно? Мне вполне хватает CSS-in-CSS (обычного кода CSS в .css-файлах).»

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

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

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

Дадим ей шанс показать себя в деле.

CSS проекта, размер которого уже ближе к среднему

Что такое CSS-in-JS?

JSS — более мощная абстракция над CSS. Он использует Javascript в качестве языка для описания стилей в декларативном и удобном в поддержке виде. Это высокопроизводительный компилятор из JS в CSS, который работает и на стороне сервера, и на стороне клиента в реальном времени. Это низкоуровневая и не привязанная к какому-либо фреймворку библиотека. Она весит около 6KB (миницифированная и сжатая gzip). Ее можно расширить при помощи API для плагинов. — источник

Имейте ввиду, что inline-стили и CSS-in-JS — не одно и тоже! Это две разные вещи. Сейчас продемонстрирую.

Как работают inline-стили

В браузере это добавится к DOM-узлу таким образом:

Как работает CSS-in-JS

В браузере это добавится к DOM-узлу таким образом:

Разница

Видите эту небольшую разницу? CSS-in-JS добавился в виде тега вверху дерева DOM, тогда как inline-стили добавились к DOM-узлу в виде свойств (в атрибут style — прим. переводчика).

Какое это имеет значение?

Не все возможности CSS могут быть реализованы при помощи обработчиков событий JavaScript, невозможно использовать многие из псевдоселекторов (типа :disabled, :before, :nth-child), нельзя назначить стили тегам html и body и так далее.

С CSS-in-JS вся мощь CSS всегда под рукой. Поскольку генерируется настоящий CSS-код (в отличие от inline-стилей, где свойства прописаны в атрибуте style — прим. переводчика), вы можете использовать любые медиавыражения и псевдоселекторы, какие только захотите. Некоторые библиотеки (типа jss, styled-components) даже добавляют поддержку изящных возможностей, не нативных для CSS, типа вложенности.

Блестящая статья, в деталях рассматривающая разницу между этими двумя подходами.

«Да просто пишите CSS-in-CSS и забудьте об этой ерунде.»

Всё верно, мы так и делали с незапамятных времен. Но проблема в том, что современный веб строится не страницами, а компонентами.

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

Для сброса напряжения посмотрите, как Боб Росс рисует камушки :)

(по ссылке откроется анимация, 15 MB — прим. переводчика)

В чем плюсы использования CSS-in-JS? Компонентный подход к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности). CSS-in-JS использует всю мощь JavaScript для расширения возможностей CSS. «Настоящая изоляция CSS-правил». Ограничения видимости селекторов недостаточно. В CSS есть свойства, которые, если не заданы явно, автоматически наследуются от родительских элементов. Но, благодаря плагину jss-isolate, JSS-правила не наследуют свойств. Селекторы с ограниченной областью видимости. В CSS есть только одно глобальное пространство имен. Невозможно избежать коллизий селекторов, если только речь идет не об элементарном проекте. Соглашения о наименованиях, вроде БЭМ, могут помочь в рамках одного проекта, но не тогда, когда мы включаем в него сторонний код. JSS генерирует уникальные имена классов по умолчанию при компиляции JSON-представления в CSS. Браузерные префиксы автоматически проставляются в CSS-правила, так что вам не нужно вообще о них думать. Совместное использование кода. JS и CSS легко используют одни и те же константы и функции. В DOM находятся только те стили, которые на данный момент используются для отображения элементов на экране (react-jss). Удаление мертвого кода. Модульное тестирование CSS. В чем минусы использования CSS-in-JS? Сначала надо научиться пользоваться. Новые зависимости. Новым участникам команды труднее вникать в то, как организован код. Новичкам фронтенда придется изучать больше всяких инструментов. Отказ от привычного подхода (впрочем, это не обязательно минус).

Плюсы явно перевешивают минусы! Так давайте же дадим CSS-in-JS шанс! Нам нечего терять!

Самые популярные библиотеки CSS-in-JS

Я привожу простой «Hello World!» пример, используя все популярные библиотеки для CSS-in-JS. Выбирайте, какая вам больше нравится, исходя из синтаксиса.

npm trends (статистика загрузок, по которой можно отследить популярность раличных инструментов — прим. переводчика)

Styled Components

import React, { Component } from 'react'; import styled from 'styled-components'; const Title = styled.h1` color: white; `; const Wrapper = styled.div` background: black ` class App extends Component { render() { return ( Hello World! ); } } export default App; JSS-React

import React from 'react' import injectSheet from 'react-jss' const styles = { wrapper: { background: 'black' }, title: { color: 'white' } } const App = ({classes}) => ( Hello JSS-React! ) export default injectSheet(styles)(App) Glamorous

import React from 'react' import glamorous from 'glamorous' const Wrapper = glamorous.div({ backgroundColor: 'black' }) const Title = glamorous.h1({ color: 'white' }) const App = () => ( Hello JSS-React! ) export default App; Radium (предупреждение: использует inline-стили)

import React, { Component } from 'react'; import Radium from 'radium'; @Radium // decorator class App extends Component { render() { const styles = { wrapper: { background: 'blue', } title: { color: 'white' } }; return ( Hello Radium! ); } } export default Radium(App);

Обратите внимание еще на то, что Radium использует декораторы.

Aphrodite import React, { Component } from 'react'; import { StyleSheet, css } from 'aphrodite'; const styles = StyleSheet.create({ wrapper: { backgroundColor: 'red' }, title: { backgroundColor: 'blue' } }); class App extends Component { render() { return ( Hello Aphrodite! ; ) } } Stylotron

import React, { Component } from 'react'; import { styled } from 'styletron-react'; const Wrapper = styled('div', { backgroundColor: 'black' }) const Title = styled('h1', { color: 'white' }) class App extends Component { render() { return ( Hello Styletron! ; ) } }

Это всё очень простые примеры для демонстрации основ работы. Все библиотеки имеют гораздо больше возможностей — например, использование тем, динамические входные параметры, рендеринг на стороне сервера и много чего еще!

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

Вот полный список — вперед, попробуйте каждую из библиотек!

Нравится нам это или нет, но подход CSS-in-JS заслуживает того, чтобы его попробовать.

Убеждены, что CSS-in-JS не для вас? Тогда есть другой вариант — CSS модули!

Всем спасибо!

Другие записи ленты

Еженедельная подборка красивых эффектов на CSS/SVG/JS #63 24.11.2017 в 12:54

«Запашки» CSS-кода 19.11.2017 в 11:44

Еженедельная подборка красивых эффектов на CSS/SVG/JS #62 17.11.2017 в 12:45