«Перевод»: все, что вы должны знать о CSS-in-JS

CSS
«Перевод»: все, что вы должны знать о CSS-in-JS

Все, что вы должны знать о CSS-in-JS

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

Пример реагирования. Пример:

import React, { Component } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
    background: black
  `
const Title = styled.h1`
    background: white
  `
class App extends Component {
    render() {
        return (
          <Wrapper>
            <Title>Hello Styled Components!</Title>
          </Wrapper>
        )
    }
}

export default App

Вы, наверное, слышали такие вещи, какCSS-in-JS, Styled Components,Radium, а такжеAphrodite, вы тоже можете подумать, какое это имеет отношение ко мне? я очень рада писатьCSS-in-CSS(чистый файл .css).

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

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

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

Давайте посмотрим на CSS-in-JS:

中小型项目的 CSS

CSS для малых и средних проектов

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

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

должен помнить,Встроенные стилиа такжеCSS-in-JSСовершенно разные, как показано на изображении ниже:

1.1 Как работают встроенные стили?

В браузере это будет добавлено к узлу DOM следующим образом:

<span style="color: green">inline style</span>

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

В браузере это будет добавлено к узлу DOM следующим образом:

<style>
.jss-xxx-green{
  color: green
}
</style>

<span class='jss-xxx-green'>inline style</span>

1.3 Отличия:

Видите тонкую разницу?CSS-in-JSДобавляет в начало DOM<style>разметки, в то время как встроенные стили просто присоединяют атрибуты к узлам DOM. Почему это важно?

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

использоватьCSS-in-JS, вы можете легко получитьCSSвсе функции. Поскольку фактическоеCSSТаким образом, вы можете использовать, что вы можете подумать о каждом медиапространстве и псевдоселекторах. Некоторые библиотеки (например, какjss, стилизованные компоненты) даже добавляет аккуратный штрих к вложению, неCSSПоддержка встроенных функций!

почему мы не используемCSS-in-CSSи закончить?

Хотя это уже давно, проблема в том, что современная сеть написана на компоненте, а не на странице.

CSS никогда не реализовывал компонентный подход.CSS-in-JSКак раз для решения этой проблемы.

2. ИспользуйтеCSS-in-JSкакая польза?

  • Компонентное мышление. Вам больше не нужно поддерживать кучу таблиц стилей. CSS-in-JS абстрагирует модель CSS на уровне компонентов, а не на уровне документа (модульность).
  • CSS-in-JSУсовершенствуйте CSS, используя всю мощь экосистемы JavaScript.
  • Настоящая изоляция правил. Селекторов диапазона недостаточно. В CSS есть свойства, которые автоматически наследуются от родительских элементов, если они не определены явно. благодарныйjss-isolateПлагины, правила JSS не наследуют свойства.
  • Селектор диапазона. CSS имеет только одно глобальное пространство имен. Невозможно избежать конфликтов селекторов в нетривиальных приложениях. соглашения об именах (например,BEM) может помочь в проекте, но не при интеграции стороннего кода. Когда JSS компилирует представление JSON в CSS, JSS генерирует по умолчаниюуникальное имя класса.
  • Префикс добавляется автоматически. Правила CSS автоматически начинаются сproviderпрефикс, так что вам не нужно думать об этом.
  • Совместное использование кода.轻松地在JS和CSS之间共享常量和函数。
  • Только на экране с использованием текущего стиля находится DOM (react-jss)середина.
  • Удалите неиспользуемый код
  • Модульное тестирование CSS

3. Каковы недостатки использования CSS-in-JS?

  • кривая обучения
  • Новая зависимость
  • Затруднить адаптацию к кодовой базе новых товарищей по команде. Люди, которые не знакомы с интерфейсом, должны узнать больше.
  • Бросьте вызов статус-кво (не обязательно мошенничество).

Плюсы явно перевешивают плюсы — давайте дадим JS-in-JS шанс!

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

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

CSS-in-JS库

  • Styled Components
  • JSS-React
  • Glamorous
  • Radium (Caveat: Uses Inline Styles)
  • Aphrodite
  • Styletron

Это очень простые примеры, демонстрирующие основные функциональные возможности. Все библиотеки включают дополнительные функции, такие как создание тем, динамические реквизиты, рендеринг на стороне сервера и многое другое.

Выводы и ресурсы

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

Для более глубокого чтения перейдите по ссылке:

Категории