Рефакторинг Facebook: отказаться от Sass/Less в пользу атомарного CSS

Статьи переведены/отшлифованы по ssh,исходный адрес.

С недавним развертыванием продуктов Facebook и Twitter я думаю, что новая тенденция медленно растет:Atomic CSS-in-JS.

В этом посте мы увидим, что такое Atomic CSS и как он связан с Tailwind CSS, библиотекой стилей, ориентированной на утилиты, которая в настоящее время используется многими крупными компаниями в их репозиториях React.

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

Давайте начнем со счастливого вывода: новый способ написания и построения CSS позволяет создать домашнюю страницу Facebook.Уменьшен объем CSS на 80%.

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

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

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

Сейчас людям очень нравитсяTailwind CSSи этополезность прежде всегоКонцепция чего-либо. Это то же самое, что и функциональный 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. Atomic CSS изначально был написан Тьерри Кобленцем (Yahoo!) в 2013 году.Оспаривание лучших практик CSSиспользуется, когда.

/* 原子 CSS */
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}
/* 不是原子 CSS 因为这个类包含了两个规则 */
.p-1x-sans {
  padding: 10px;
  font-style: sans-serif;
}

Используя служебный/атомарный CSS, мы можем объединить структурный слой и слой представления: когда нам нужно изменить цвет кнопки, мы изменяем HTML напрямую, а не CSS!

этотесно связаныТакже признан в современной кодовой базе CSS-in-JS React, но, похоже, первым в мире CSS понял традиционныйразделение интересовЕсть некоторые возражения.

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

Сейчас мы добавляем стили через html-теги и обнаружили несколько интересных вещей:

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

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

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

Утилиты/ограничения атомарного CSS

Утилиты/атомарный CSS выглядят интересно, но они также создают некоторые проблемы.

Люди обычно пишут служебный/атомарный CSS вручную, тщательно разрабатывая соглашения об именах. Но трудно гарантировать, что это соглашение будет простым в использовании, последовательным и не раздуется со временем.

Этот CSS можетСовместное развитие командыИ сохранилпоследовательность? это подлежитавтобусный коэффициентвлияние?

Фактор шины является мерой концентрации информации и возможностей среди участников программного проекта при разработке программного обеспечения и не является общим. Когда проект или программа теряет участие хотя бы нескольких ключевых участников («сбит автобусом», имея в виду смену профессии и образа жизни, брак и рождение детей, несчастные случаи и т. д.), число этих участников является коэффициентом автобуса. .

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

Если служебный/атомарный CSS создан кем-то другим, вам придется сначала изучить соглашения об именах классов (даже если вы знаете о CSS все). Эта конвенциясубъективностьДа, скорее всего, вам это не нравится.

Иногда вам нужно немногодополнительный CSS, которые не предоставляются Utility/Atomic CSS. Не существует согласованного способа предоставления этих одноразовых стилей.

Попутный ветер пришел поддержать

Метод, используемый Tailwind, очень удобен и решает некоторые из вышеперечисленных проблем.

это проходитUtility-FirstИдея решить некоторые недостатки CSS, абстрагируя набор имени класса -> набор атомарных функций, чтобы не писать отдельный класс для каждого div, а затем писать много повторяющихся стилей. на всем сайте.

Традиционное карточное письмо:

Написание карты в стиле попутного ветра:

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

ssh Примечание: Первоначальный автор не представил его подробно здесь Почему это набор соглашений об именах, а не создание какого-то мертвого CSS?

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

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }
}

Вы всегда можете изменить эти точки останова в файле конфигурации, как вам нужно для маленьких экранов.smможет относиться к меньшему320px, то вы хотите использовать гибкую верстку на маленьких экранах или писать как обычноsm:flex, следуя тому же соглашению, только этоsmОно было изменено вами на значение, подходящее для нужд вашего проекта.

Скажем, в TailwindspacingОтвечая за значение репрезентативного пространства, занимаемого каждым атрибутом, таким как поля, отступы, ширина и т. д., по умолчанию используется единица измерения rem, когда вы переопределяете ее в конфигурации следующим образом:

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

ты идешь писатьh-6(высота),m-2(поле),mb-4(поле-внизу), значение следующих цифр изменяется вами.

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

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

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

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

Итак, должны ли мы отказаться от идеи атомарного CSS и просто использовать Tailwind CSS?

Tailwind — отличное решение, но остаются нерешенными некоторые проблемы:

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

По сравнению с Tailwind, рукописный атомарный CSS может бытьне самый удобныйиз.

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

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

Christopher ChedeauРаботал над продвижением концепции CSS-in-JS в экосистеме React. Во многих своих выступлениях он объяснял проблемы с CSS:

глобальное пространство имен
полагаться
Устранение бесполезного кода
сжатие кода
общая константа
Недетерминированный анализ
изолировать

Утилиты/Atomic CSS решают некоторые из этих проблем, но не все (особенно стилизованные).недетерминированный анализ).

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

Изучите атомарный CSS-in-JS

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

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

Я хотел бы выделить два конкретных решения, которые недавно привели к развертыванию двух крупномасштабных атомарных CSS-в-JS, основанных на двух следующих докладах.

React-Native-Web в Twitter (подробнее вПрезентация Николаса Галлахера).
Stylex на Facebook (подробнее наВыступление Фрэнка Яна).

Также взгляните на эти библиотеки:

Styletron
Fela
Style-Sheet
cxs
otion
css-zero
ui-box
style9
stitches
catom

React-Native-Web

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

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

Автором React-Native-Web является Николас Галлахер, который работает в Twitter для мобильных устройств. Они постепенно развертывают его на мобильных устройствах, точно не знаю, когда, может быть, в 2017/2018 году.

С тех пор его использовали многие компании (MLS, Flipkart, Uber, The New York Times…), но наиболее значительным внедрением стал запуск нового приложения Twitter в 2019 году командой под руководством Пола Армстронга.

Stylex

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

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

Вся моя информация из разговора :), все еще жду более подробной информации.

Масштабируемость

Неудивительно, что с добавлением Atomic CSS CSS для Twitter и FacebookОбъем сильно уменьшилсятеперь этоРост следует логарифмической кривой. Однако простых приложений будет больше.начальный объем.

Facebook поделился точными цифрами:

старый сайттолько первая страницапросто используй это413KbCSS
новый сайтвесь сайттолько что использовал74Kb, включая темный режим

источник и выход

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

Стоит подчеркнуть, что React-Native-Web расширяет синтаксический сахар CSS, напримерmargin: 0, которые будут выводиться как атомарные правила 4-направленного отступа.

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

<Component1 classNames="class1" /> <Component2 classNames="class2" />

.class1 {
  background-color: mediumseagreen;
  cursor: default;
  margin-left: 0px;
}
.class2 {
  background-color: thistle;
  cursor: default;
  jusify-content: flex-start;
  margin-left: 0px;
}

Видно, что эти два стиляcursorа такжеmargin-leftточно такой же, но он будет занимать громкость на выходе.

Давайте снова посмотрим на вывод атомарного CSS:

<Component1 classNames="classA classC classD" />
<Component2 classNames="classA classB classD classE" />

class a {
  cursor: default;
}
class b {
  background-color: mediumseagreen;
}
class C {
  background-color: thistle;
}
class D {
  margin-left: 0px;
}
class E {
  jusify-content: flex-start;
}

Видно, что хотя этикеткаИмя класса увеличивается, Но выходной объем CSS будетМедленный рост по мере увеличения функции, потому что правило CSS, появившееся один раз, больше не появится.

Проверка производственной среды

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

Теперь давайте посмотрим на новый Facebook:

Многие люди могут быть напуганы, но на самом деле это работает хорошо и сохраняетдоступность.

Может быть немного сложно проверить стили в Chrome, но в devtools это довольно просто:

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

В отличие от рукописного инструмента или атомарного CSS, библиотеки JS делают стили независимыми от порядка вставки правил CSS.

В случае конфликта правил действует не последний класс в атрибуте класса на этикетке, а таблица стилей.последняя вставкаправило.

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

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

const styles = pseudoLib.create({
  red: {color: "red"},
  blue: {color: "blue"},
});

// 只会输出 blue 相关的 CSS
<div style={[styles.red, styles.blue]}>
  Always blue!
</div>

// 只会输出 red 相关的 CSS
<div style={[styles.blue, styles.red]}>
  Always red!
</div>

Примечание. Это предсказуемое поведение возможно только с самой строгой атомарной библиотекой CSS.

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

Если класс имеет только одно простое правило CSS, напримерmargin: 0, в то время как переопределениеmarginTop: 10. картинаmargin: 0Этот сокращенный синтаксис расширен до 4 различных атомарных классов, а библиотека упрощает фильтрацию имен классов, которые не должны появляться в DOM.

Все еще любите Tailwind?

До тех пор, пока вы знакомы со всеми конвенциями по имени в хвостовете, вы можете эффективно написать UIS. Как только вы знакомы с этим настроек, трудно вернуться к записи каждого правила CSS вручную, так как вы будете с CSS-in-js.

Ничего, чтобы остановить вас от создания собственных аннотационных правил CSS на кармах Atom CSS-In-JS,Styled-systemНечто подобное можно сделать в библиотеке CSS-in-JS. Он создает некоторые атомарные правила, основанные на некоторых соглашениях, вemotionПопробуйте использовать его в:

import styled from '@emotion/styled';
import { typography, space, color } from 'styled-system';

const Box = styled('div')(typography, space, color);

равно:

<Box
  fontSize={4}
  fontWeight="bold"
  p={3}
  mb={[4, 5]}
  color="white"
  bg="primary"
>
  Hello
</Box>

При желании можно даже повторно использовать некоторые соглашения об именах 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]} />;

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

В заключение

Это все, что я могу сказать об атомарном CSS-in-JS.

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

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

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

благодарный

Эта статья была впервые опубликована в публичном аккаунте "Передняя часть от продвинутого до допуска", добро пожаловать, чтобы следовать.

ByteDance набирает сотрудников, в следующем году мы добавим в нашу группу более десятка ХК, людей действительно не хватает. Есть Пекин, Шанхай, Гуанчжоу, Шэньчжэнь и Ханчжоу. Пройти собеседование можно в любое время. Я помогу вам с полным спектром внутренних справочных услуг! Добро пожаловать, чтобы связаться со мной через сообщение или публичный аккаунт для консультации 😁.