19.01.2022

Прощайте CSS-модули, привет TailwindCSS

Прощайте CSS-модули, привет TailwindCSS

От создателя: редизайн приложения никогда не бывает рутинным и обычным. Через две недели после того, как меня приняли на работу в Polytomic, я начал реализовывать 1-ый редизайн приложения с момента основания компании. Выбор технологии и методы ее реализации оставались за мной.

Кодовая база нашего фронтенда — это одностраничное приложение на базе Create React App (CRA), написанное на TypeScript и использующее GraphQL для API. Имеющийся подход к стилизации использовал модули CSS без системы дизайна.

Модули CSS — это файлы CSS, в которых по умолчанию все имена классов и анимаций имеют локальную область видимости. Они компилируются как часть шага сборки — с помощью технологии сотворения пакетов, такой как Webpack, — и вначале поддерживаются CRA.

Пример использования обычного CSS в React:

CSS

JavaScript

Пример использования CSS-модулей в React:

CSS

JavaScript

Достоинства модулей CSS заключаются в устранении конфликтов CSS меж файлами в локальной области видимости, очевидных зависимостей и предотвращении глобального CSS. Но предотвращение глобального CSS удаляет выразительную силу «каскадной» части Каскадных Таблиц Стилей (CSS). Не считая того, локальная область видимости имен и идентификаторов классов CSS не предутверждает дублирование CSS в других файлах. Определение margin-top:0; несколько раз в различных файлах CSS не будут устранены модулями CSS.

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

Что такое дизайн-система?

Дизайн-система — это набор снова используемых компонентов и стилей для сотворения связного пользовательского интерфейса. Он абстрагирует определенные значения в пользу общих токенов либо переменных.

Например, цветовая гамма будет использовать имена, передающие результат, такие как color-success либо color-warning, вместо буквальных значений или заглавий цветов, таких как зеленый или # FFA500. Обновление значения color-success преобразуется в однострочное изменение, которое распространяется на все экземпляры этого токена.

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

Twitter Bootstrap стал пионером концепции CSS-фреймворка и библиотеки компонент. Это отличный выбор для готовых компонент. Однако самая большая особенность Bootstrap — готовые составляющие — может быть его самым огромным недостатком.

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

Помня о системах дизайна и настройке, я сузил перечень вариантов до Tailwind и Theme UI. Обе библиотеки предлагают сильную конфигурацию системы проектирования, но, что в особенности важно, не ограничивают меня конкретными компонентными архитектурами. Я желал избежать утомительного процесса переопределения, присутствующего в готовых библиотеках компонент, таких как Bootstrap.

Сравнивая Tailwind с Bootstrap, Tailwind представляет собой набор примитивов стиля, основанных на конфигурации. Это нюанс конфигурации Bootstrap без заранее подготовленных компонент или привязки к компонентам и архитектуре конфигурации.

У Tailwind есть собственная платная библиотека компонент под названием Tailwind UI, которая является современным эквивалентом Bootstrap. Она употребляет гибкость конфигурации Tailwind, обеспечивая при этом качественные рецепты компонентов, которые легко изменить и настроить. Я использовал Tailwind UI в качестве отправной точки и вдохновения для собственных компонент.

Что такое Tailwind?

Tailwind — это утилитарный CSS-фреймворк, представляющий шаг сборки, наполненный такими классами, как flex, pt-4, text-center и rotate-90, которые можно скомпоновать для сотворения любого дизайна непосредственно в разметке.

Утилитарный класс CSS — это подход к написанию CSS, который изменяет определение правил стиля. Исторически сложилось так, что CSS написан с несколькими правилами стиля, привязанными к одному классу, идентификатору либо элементу HTML.

Пример с обычным CSS:

CSS

Служебные классы определяют каждое правило стиля как отдельный класс для персональной компоновки в разметке вместо определения нужных правил стиля в рамках одного класса. К примеру, в stylesheet.css:

CSS

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

Оставаясь в рамках ограничений системы проектирования и API Tailwind, использовать новое значение для наполнения так же просто, как вставить py-2 в разметку. Tailwind заблаговременно сгенерировал этот класс из значений по умолчанию и конфигурации. Он также сгенерировал py-1 и py-4, но удалит их из таблицы стилей, если они не добавлены в разметку.

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

CSS-in-JS — это общая философия написания CSS снутри файлов JavaScript. Написание всех стилей происходит в файлах JavaScript и методом, присущим JavaScript, а не CSS. Это позволяет стилю CSS-in-JS использовать всю выразительную мощь JavaScript.

Theme UI — это библиотека CSS-in-JS для сотворения тематических пользовательских интерфейсов на основе принципов проектирования основаных на ограничениях. Это разновидность CSS-in-JS для обычного CSS-подхода Tailwind. Оба выполняют одну и ту же задачку — системы проектирования, но различаются опытом разработки.

Пример файла конфигурации Tailwind для переопределения либо расширения конфигурации по умолчанию:

JavaScript

JavaScript

Пример объекта конфигурации Theme UI:

JavaScript

JavaScript

Так как и Tailwind и Theme UI помогают воплотить системы дизайна, я выбрал Tailwind, поэтому что CSS не заблокирован внутри среды выполнения JavaScript. Он компилируется в обыденные классы CSS. Размер пакета JavaScript меньше, поэтому что определения стилей не связаны с кодом React. Так как Tailwind использует глобальные классы CSS с низкой спецификой, переопределение правил таблиц стилей устраняется, а размер файла не возрастает.

Стратегия реализации

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

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

Каждый раз, когда я внедрял функцию на master в древнем дизайне, мне нужно было делать rebase моей ветки редизайна и поновой реализовывать работу, что могло быть обычным рестайлингом или серьезным рефакторингом. Проблема синхронизации новых функций усугублялась тем, что другие инженеры делали свою работу. Если бы я подождал пару дней, чтоб перенастроить свою ветку редизайна на master — как я наивно поступил сначала — я бы потратил до часа на разрешение конфликтов. Оглядываясь обратно, можно сказать, что последовательное изменение опций на раннем этапе было правильной стратегией.

Заключение

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

Скорость: я могу сходу приступить к написанию стилей в компонентах, поэтому что Tailwind является глобальным и за ранее сгенерирован из значений по умолчанию и моей конфигурации. Мне не необходимо импортировать или создавать стили.

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

Выразительность: я сумел воплотить в жизнь все, что мне давали. Tailwind меня не ограничил. Когда я использовал CSS, хороший от Tailwind, это было только для определенных браузеров, в основном – для Safari.

Контекстные опции: многие компоненты нуждаются в настройках CSS в зависимости от их контекста. Для меня изменение строчки className, а не переопределение CSS через каскад, наименее подвержено ошибкам. Устранена проблема коллизий специфики.

Оглядываясь назад, я бы сделал выбор в пользу Tailwind опять.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *