В поисках Стилевого Грааля
Прошлое
На заре интернета стили страницы считались статичными и декларативными, и начали появляться решения для подобной стилизации: - tags: abc - JSSS: tags.H1.color - CSS Expressions: expression(a+b) - CSS!
У CSS есть множество проблем: отсутствие реиспользования, неявность, неинтерактивность, сложность чтения.
Потом начали появляться решения, которые пытались пофиксить CSS – например, БЭМ, который вводил новые сущности и абстракции, упрощающие стилизацию приложения. А потом bootstrap, shadow dom, webpack, component, css modules, …
И проснулось дублирование!
<button type="button" class="btn-cls">Button</button>
Хотя PostCSS и CSS Modules закрыли большинство вопросов, но остались вопросы: - сборка - семавнтика - порого вхождения - темизация - tree shaking - runtime стили - универсальность
CSS-in-JS
И появился Styled Components, решающий кучу проблем: - специфичность - сборка - семантика - порог вхождения - темизация
А есть недостатки?
Есть! - Производительность, на больших компонентах это тормозит - Можно (легко) написать отвратительный код - Комбинаторика злая: 4 состояния по 3 значения и у нас гигантский блок кода с дублированием - Извлечение статических стилей сложно и ненативно - Язык императивен и if-ами писать около-декларативную вещь сложно - Отсутствие контроля над внешним интерфейсом - Отсутствия контроля над внутренним интерфейсом — непонятно как отделить пропсы от HTML аттрибутов - Смешивание глобальных классов, styled components и всего остального
В итоге, решая проблемы мы делаем новые проблемы и попадаем в новый замкнутый цикл проблем. Время посмотреть в прошлое и понять что было придумано раньше.
shadow dom и высокоуровневые абстракции
Одно из решений — reshadow, позволяет семантически абстрагироваться от HTML и стилей, и писать на высокоуровневые тегах, используя shadow dom и не думая о конкретных тегах и селекторах.
Из-за особенностей рендеринга с reshadow (использование модфикаторов и css variables в корневых тегах компонентов), есть возможность вынести стили в отдельный файл.
Как менять стили компонентов? - модификация компонентов (изменение компонентов) - темизация (декларативное определение различных тем) - стилизация (прямая передача набора стилей)
Т.к. reshadow позволяет вынести стили в пропсы компонента, то можно использовать стилизацию как интерфейс к компоненту и получить все преимущества этого подхода.
Плюшки от reshadow
- вынос динамических вещей и экспериментов в чанки;
- core-компоненты не имеют прямых зависимиостей от других компонентов, не используют контекст;
- в контексте могут быть не только стили, но и любые значения;
- есть возможность переопределения render и lifecycle;
- производительность (из-за обработки стилей во время сборки);
- на выходе получается обычный HTML и CSS, который можно читать;
- возможность построить маппинг всех стилей и состояний;
- можно использовать вместе с PostCSS;
- фреймворк-агностик;