Попрощайтесь со сценариями CSS-in-JS и Runtime для внедрения и компиляции CSS и поприветствуйте молниеносное кодирование с помощью Stylify Utility-First CSS. Как фронтенд-инженер React, вы понимаете важность эффективных, оптимизированных решений, которые не жертвуют стилем или функциональностью. И это именно то, что предлагает Stylify.

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

Вы можете посмотреть примеры в этой статье в разделе Площадка на Stackblitz 🚀.

💎 Введение

Stylify — это библиотека, которая использует CSS-подобные селекторы для создания оптимизированного полезного CSS на основе того, что вы пишете.

Особенности:
✅ Модуль сборки. Нет сценария выполнения.
✅ CSS-подобные селекторы
✅ Нет структуры для изучения
✅ Меньше времени, затрачиваемого на документацию
✅ Искаженный и очень маленький CSS
✅ Нет очистки CSS необходимое
✅ Компоненты, переменные, пользовательские селекторы
✅ Может генерировать несколько пакетов CSS

🔗 Компоненты

В Styled Components компоненты часто определяются следующим образом:

const Title = styled.div`
  color: blue 
  font-weight: bold
  @media (max-width: 768px) {
    color:red
  }
`;
<Title>Hello World!🎉</Title>

Stylify предоставляет аналогичную функцию. Компоненты могут быть определены в файле (используя параметры контента), где они используются, или глобально в конфиге.

Пример с конфигурацией в файле. Содержимое между stylify-components ожидает объект javascript без окружающих скобок:

<!-- 
stylify-components
  title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<div class="title"></div>

Пример в глобальной конфигурации компилятора:

const compilerConfig = {
  title: 'color:blue font-weight:bold md:color:red'
};

Использование:

<div class="title"></div>

Компоненты являются «ленивыми» (генерируются по запросу). Это означает, что даже если вы настроите их (в файле или глобально), они будут генерироваться только в том случае, если они совпадают с содержимым. Неиспользуемый CSS не будет сгенерирован. То же самое касается коммунальных услуг. Если утилита для компонента не соответствует непосредственно в содержимом, селектор не создается, а в вывод CSS добавляется только селектор компонента.

Вывод CSS в рабочей среде будет выглядеть примерно так:

.a,.d {color:blue}
.b,.d {font-weight:bold}
 @media (max-width: 768px) {
 .c,.d {color:red}
 }

Вывод html:

<div class="d"></div>

🎯 Селекторы

Stylify также позволяет использовать утилиты непосредственно в контенте. Таким образом, приведенный выше пример также может выглядеть так:

<div class="color:blue font-weight:bold md:color:red"></div>

Результат производства CSS будет аналогичен примеру с компонентами. Однако HTML будет выглядеть так:

<div class="a b c"></div>

💲Переменные

Когда вам нужно передать цвет в компонент с помощью реквизита, вместо этого color: ${props => props.textColor}; вы можете использовать нативные переменные CSS:

<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
</div>

Нам просто нужно сказать Stylify заменить переменные переменными CSS вместо их значения и что localTextColor является внешним:

const compilerConfig = {
  replaceVariablesByCssVariables: true,
  externalVariables: ['localTextColor']
}

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

<!-- 
stylify-externalVariables
  localTextColor
/stylify-externalVariables
-->
<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">

Stylify также предоставляет возможность настраивать пользовательские переменные. Это можно сделать в файле, где они используются, аналогично компонентам или в глобальном конфиге:

В файле:

<!-- 
stylify-variables
  primary: '#000',
  secondary: '#444'
/stylify-variables
-->
<div class="color:primary"></div

В конфигурации компилятора:

const compilerConfig = {
  primary: '#000'
}

📦 Разделение CSS

Styled Components автоматически разбивает CSS и вставляет его непосредственно в документ на основе визуализированных компонентов.

Stylify не имеет исполняемого скрипта, поэтому вам придется настраивать Bundler и разбиение вручную.

Однако выход Stylify настолько мал (он может составлять даже 10 КБ (сжатый gzip) для большого веб-сайта), что вполне нормально иметь только один пакет для всего проекта. В конце концов, там вы можете проверить советы по разделению пакетов CSS.

Пример конфигурации пакетов:

const bundles = [
  { 
     outputFile: 'path/to/layout.css', 
     files: ['path/to/layout.jsx'] 
  },
  // Bundler uses https://npmjs.com/package/fast-glob
  // You can use its glob syntax
  { 
     outputFile: 'path/to/global.css', 
     files: ['path/**/*.jsx'] 
  }
]);

Дайте мне знать, что вы думаете!

Если вам понравилась идея, дайте мне знать через starring Stylify repo ❤️.

Буду рад любым отзывам! Stylify — это все еще новая библиотека, и есть много возможностей для улучшения 🙂.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.