[Перевод] Атомарный CSS-in-js

CSS
[Перевод] Атомарный CSS-in-js
  • оригинал:Atomic CSS-in-JS
  • Время: 27.04.2020
  • Автор: [Себастьян Лорбер

](Получил или нет Себастьен two.com/authors/stain…  )

  • Переводчик:ziven27
  • Время перевода: 10.05.2020

Переводчик:Все в Китае ушли заниматься JS, и мы видим, что у нас есть VUE, который может конкурировать с REACT. Но, видимо, есть CSS-решения, такие как CSS-in-js, OOCSS, BEM, Atomic CSS...? Почему это?

В недавних версиях технологических решений Facebook и Twitter мы увидели новую тенденцию: атомарный CSS-in-JS.

В этом посте мы увидим, что такое Atomic CSS, как он связан с техническими решениями, такими как функциональный/утилитарный CSS, такой как TailwindCSS, и как его используют большие фреймворки, основанные на реакции.

Поскольку я не эксперт в этом, не рассчитывайте копаться в его плюсах и минусах. Я просто надеюсь, что вы можете получить вдохновение от того, что вы знаете об этом.

Примечание. Атомарный CSS работает сAtomic DesignДизайн не имеет значения.

Примечание переводчика. Атомарный CSS — это шаблон проектирования для кода CSS, а атомарный дизайн — это концепция дизайна для дизайнерских ресурсов и организации дизайна.

Что такое атомарный CSS?

Возможно, вы слышали о различных CSS-решениях, таких как BEM, OOCSS...

<button class="button button--state-danger">
    Danger button
</button>

В настоящее время люди все больше похожи наTailwind CSSтоже самоеutility-firstконцепция. Это с функциональным CSS иTachyonочень близко.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

С меньшим набором классов мы можем достичь большего

Атомарный CSS можно рассматривать как крайнюю абстракцию CSS, ориентированного на полезность: все классы CSS имеют одно и только одно уникальное правило CSS. Тьерри Кобленц (Yahoo!) в фильме 2013 года " Challenging CSS Best Practices" первое упоминание о CSS.

/* Atomic CSS */
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}
/* Not atomic, because the class contains 2 rules */
.p-1x-sans {
  padding: 10px;
  font-style: sans-serif;
}

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

Поскольку мы используем простые селекторы классов, «разделение ответственности» больше не является большой проблемой.

Теперь мы изменим стиль через структуру, которая будет иметь следующие характеристики:

  1. По мере добавления новых функций раздувание таблицы стилей уменьшается.
  2. Мы можем изменять наши стили одновременно с перемещением HTML.
  3. Когда мы удаляем компонент, мы можем убедиться, что удаляем связанные с ним стили.

Конечно, это увеличит размер HTML. Для серверных веб-приложений это может быть проблемой, но высокая избыточность в именах классов может быть хорошо сжата с помощью gzip, точно так же, как повторяющиеся стили CSS сжимаются в файлах CSS.

Вам не нужно использовать служебный/атомарный CSS в каждом случае, он больше подходит для большинства распространенных стилей.

Примечание переводчика: это Design Token, Atomic CSS сыграет свое самое большое преимущество в стыковке Design Token.

Как только служебный/атомарный CSS определен, его трудно изменить или расширить. Используя эту функцию, мы можем активно кэшировать его (например, добавить его в vendor.css без повторного развертывания каждый раз). Его портативность также очень высока и может быть легко использована в других приложениях.

Ограничения служебного/атомарного CSS

Utility/atomic CSS — это здорово, но у него есть несколько подводных камней.

Обычно мы создаем служебный/атомарный CSS вручную в начале проекта и формулируем правила судьбы. Но трудно обеспечить простоту его использования, а также контролировать уровень инфляции. Будет ли это одинаковым для нескольких людей? Является ли это предметомbus factorфакторы?

Примечание переводчика: я предполагаю, что коэффициент шины относится к эффекту разбитого окна в коде.

Пусть Tailwind спасет нас

Метод Tailwind очень удобен и может решить некоторые из этих проблем.

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

Знания Tailwind переносимы в другие приложения, даже если они не используют точно такое же имя класса. Это напоминает мне философию React «Учись один раз, пиши где угодно».

Я видел, как люди упоминали, что курсы Tailwind покрывают почти 90% или 95% их повседневных потребностей в стиле. Этот охват достаточно велик, поэтому нам обычно не нужно использовать одноразовые стили.

В этот момент вы можете задаться вопросом, зачем использовать Atomic CSS вместо Tailwind?

Что вы получаете, строго придерживаясь логики атомарного CSS, где есть только одно правило для класса? Придется ли вам использовать большие HTML-теги и неудобные соглашения об именах? В любом случае, в Tailwind уже встроено много атомарных классов.

Так должны ли мы отказаться от идеи Atomic CSS и перейти на более простой Tailwind?

Tailwind — отличное решение, но есть еще несколько нерешенных вопросов:

  • Необходимо изучить целевые соглашения об именах
  • Порядок вставки правил CSS по-прежнему имеет значение
  • Можно ли легко удалить неиспользуемые правила?
  • Что нам делать с остальными одноразовыми стилями?

По сравнению с Tailwind, рукописный ввод стилей Atomic CSS не является хорошим решением.

Сравните с CSS-in-JS

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

Christopher ChedeauОчень помогло распространить идею CSS-in-JS в экосистеме React. существуетнеоднократноtalks, он объясняет проблему с CSS:

Problems with CSS at Scale

Utility/atomic CSSCSS-in-JS/атомарный CSS решает некоторые из этих проблем, но, видимо, не все (особенно недетерминированный парсинг стилей).

Если у них так много общего, не можем ли мы использовать их обоих?

В атомарный CSS-in-JS

Атомарный CSS-in-JS можно рассматривать как «автоматизированный атомарный CSS»:

  • Вам больше не нужно создавать имена классов CSS
  • Обычные стили и одноразовые стили обрабатываются одинаково.
  • Возможность извлечения ключевого CSS страницы и разделения кода
  • Шанс решить проблему порядка вставки правил CSS в JS

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

Я выделю следующие два решения, которые привели к недавнему появлению двух крупномасштабных применений атомарного CSS-in-JS:

Так же:Styletron, Fela, cxs

React-Native-Web

React-Native-Web — очень интересная библиотека: она позволяет отображать React-Native в Интернете. На самом деле мы не говорим здесь о кросс-платформенной мобильной/веб-разработке (пожалуйста, получите больше информации на форумах).

Как веб-разработчик, вам просто нужно понимать, что React-Native-Web — это обычная библиотека CSS-in-JS с небольшим подмножеством необработанных компонентов React. Везде, где вы видите View, вы можете заменить его div, что является лучшим вариантом.

React-Native-Web отNicolas GallagherСоздано, посвященное мобильному Twitter. Они постепенно внедряют его на мобильные устройства, точно не знаю, когда именно, но, вероятно, примерно в 2017–2018 годах. С тех пор его использовали другие компании (Major League Soccer, Flipkart, Uber, Thames...), но наиболее важными являютсяPaul ArmstrongНовое настольное приложение Twitter 2019 года, разработанное ведущей командой.

Stylex

Stylex — это новая библиотека CSS-in-JS, разработанная в Facebook для перезаписи Facebook в 2020 году (в настоящее время находится в стадии бета-тестирования). Похоже, они планируют открыть его исходный код когда-нибудь, возможно, под другим именем.

Стоит отметить, что автор React-Native-Web Николас Галлахер был нанят Facebook 2 года назад. Неудивительно, что некоторые из его концепций повторно используются Facebook.

В отличие от React-Native-Web, Stylex, похоже, не фокусируется на кросс-платформенной разработке.

Вся информация, которую я получил, взята с форума :) Придется ждать более подробной информации.

скорость расширения

Как и ожидалось от Atomic CSS, CSS Twitter и Facebook были значительно сокращены, и оба они следуют кривым на рисунке. Хотя для некоторых приложений это все еще требует усилий.

Конкретные цифры, предоставленные Facebook:

  • На их старом сайте было 413 КБ CSS только для целевой страницы.
  • Их новый сайт весит 74Кб, включая темный режим.

Ресурсы и результат

Обе библиотеки, кажется, имеют похожий и довольно простой API, но трудно сказать, так как мы мало знаем о Stylex.

Стоит подчеркнуть, что React-Native-Web обрабатывает аббревиатуры CSS иmargin: 0;такой синтаксис.

Производственная среда

Давайте посмотрим, как выглядит HTML в Twitter:

Взгляните еще раз на новый Facebook:

Многие люди могут быть поражены, увидев это, но должны признать, что это работает и работает до сих пор.

Навигация по стилям в инспекторе Chrome может быть немного сложной, но инструменты разработчика могут помочь:

Порядок выполнения правил CSS

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

На самом деле эти библиотеки избегают вывода классов с конфликтующими правилами для одного и того же элемента. Они гарантируют, что последний стиль, объявленный в разметке, всегда выигрывает. «Переопределенный класс» фильтруется и даже не попадает в DOM.

const styles = pseudoLib.create({
  red: {color: "red"},
  blue: {color: "blue"},
});
// That div only will have a single atomic class (not 2!), for the blue color
<div style={[styles.red, styles.blue]}>
  Always blue!
</div>
// That div only will have a single atomic class (not 2!), for the red color
<div style={[styles.blue, styles.red]}>
  Always red!
</div>

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

Если в классе есть простое правило сокращения, такое какmargin：0, но стиль, который переопределяет его,marginTop：10, столкнется с той же проблемой. еслиmargin：0Сокращенный синтаксис расширен до 4 разных классов (marginTop:0;marginLeft:0; marginRight:0; marginBottom:0), эти библиотеки способны отфильтровывать переопределенные классы, которые не должны присутствовать в DOM.

Вам все еще нравится Tailwind?

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

Ничто не мешает вам создавать собственные абстракции поверх фреймворка Atomic CSS-in-JS.Styled-systemАтомарный CSS может поддерживаться многими библиотеками CSS-in-JS. Если вы все еще предпочитаете Tailwind, вы можете даже переписать соглашение об именах Tailwind на JS.

Это традиционный способ записи Tailwind:

<div className="absolute inset-0 p-4 bg-blue-500" />

Найдем решение(react-native-web-tailwindcss) видел в гугле.

import {t} from 'react-native-tailwindcss';
<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />

С точки зрения производительности, он не сильно отличается. И вы можете использовать TypeScript, чтобы обойти некоторые опечатки.

Суммировать

Это все, что я хочу сказать об Atomic CSS-in-JS.

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

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

Поскольку я не нашел статей об атомарном CSS-in-JS, эта статья в основном написана для меня. Когда я буду упоминать атомарный CSS-in-JS в будущем посте в блоге, я хотел бы иметь ссылку на ресурс (я планирую написать больше о React-Native-Web и кроссплатформенности, так что следите за обновлениями).

Спасибо за прочтение.

слова переводчика

Atomic CSS Я не знаю, сколько раз я рекомендовал его, так что давайте просто скажем, что это одно из решений, которое может решить большинство проблем с CSS из существующих решений. Особенно в проектах React или Vue, основанных на компонентном мышлении.

  1. Я сказал, что имена классов CSS можно сокращать, не бейте меня!
  2. Как управлять CSS «Штаны»
  3. Компонентизация «CSS-мышления» против атомизации

Кроме того, я рекомендую библиотеку npm, основываясь на своем многолетнем опыте использования Atomic CSS.

SACSS: Static Atomic CSS

npm package jsdelivr github

можно поставитьsacssПонимайте это как кастрированную версию Tailwind. обмен на кастрациюСтоимость начала работыа такжеИспользуйте опыт. Прочитав документацию за пять минут можно понять всю логику.

Личные возможности и уровень перевода ограничены, любые ошибки приветствуются

Категории