Локальный CSS

[ermouth]

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

Особенно это вопрос проявляется, когда заранее неизвестно, какие именно приложения или виджеты соберутся на одной странице.

Для решения этой задачки, например, в jquery.my приложениях есть специальная ветка style, в которой можно определить в обычном css-формате стили, которые при старте приложения станут для него локальными.

Во время инициализации этот stylesheet превратится в локальный – в DOM будет добавлено вот такое CSS-правило:

То-есть среда исполнения сама префиксует все правила так, что они становятся локальными при старте экземпляра формы. На всей остальной странице класс .red работает как надо – красит текст в красный цвет.

Во избежание размножения одинаковых секций style для разных экземпляров приложений $.my префиксует форму по её id. Если один экземпляр приложения уже инстанцирован и <style> для него создан, повторно он ни генериться, ни вставляться в DOM не будет.

Deallocate

И тут возникает второй случай, когда надо ручками делать deallocate. Среда исполнения должна отслеживать момент, когда не осталось больше ни одного запущенного экземпляра – и прибить больше не нужный <style>.

Вычисляемые стили

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

В этом случае, очевидно, надо иметь по экземпляру <style> на каждую запущенную копию приложения. $.my позволяет такой трюк:

Если посмотреть в DOM, то там этот синтаксис разворачивается вот в такое:

Преимущества подхода

Можно иметь хороший generic CSS ruleset, но его никогда не хватает. Раздувать его на каждое приложение – неэффективно. Когда форм становится десятки, оно превращается в кашу, и не помогают даже волшебные тулзы типа less, они просто снимают остроту проблемы на какое-то время.

Поэтому разумно относится к CSS-правилам как к любому коду. Есть framework, а есть код, локальный для приложения. А для кода приложения есть ещё scope исполнения.

$.my именно так и поступает. Специфичные CSS-правила – это компонент манифеста приложения и должны транспортироваться вместе с js-кодом. И редактироваться недалеко от кода.

Если кто-нибудь из уважаемых читателей подскажет, как крутые ребята решают эту проблему под React или Angular – милости прошу, очень любопытно было б послушать.

Comments

[tonsky.livejournal.com]

https://speakerdeck.com/vjeux/react-css-in-js :)

[ermouth.livejournal.com]

Ага, спасип. Оно инлайнит в каждый экземпляр приложения, это проблема, – в остальном очень даже похоже.

[tonsky.livejournal.com]

Оно инлайнит в каждый див, спан и буттон. Я такое попробовал один раз, но быстро подзадолбался. Может, с непривычки.

[ermouth.livejournal.com]

Ой-ёй.

$.my вставляет стили в корень документа, во избежание сбоев в итераторах, выбора лишнего при поиске по DOM и тд.

Инлайн, конечно, автоматом решает проблему удаления ненужных стайлшитов – они удаляются вместо с DOM-деревом – но создаёт проблемы с производительностью. This low hanging fruit is bit poisoned, я отказался от такого подхода когда проектировал $.my.