avrelian 11 мар 2014 в 14:23

Инкапсуляция CSS-стилей — Часть 1. Проблема

5 мин

45K

CSS * HTML *

+26

Комментарии 14

rWeb 11 мар 2014 в 15:22

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

avrelian 11 мар 2014 в 15:57

Я о нем обязательно упомяну. Но у него есть два недостатка в контексте статьи. Во-первых, он слабо распространен. Во-вторых, он полностью решает озвученную проблему :)

Jabher 12 мар 2014 в 08:17

если что — учитывайте, что полифилл для shadow dom изолирует все только в js, не в css. я очень надеялся на это, когда увидел его, но увы, нет)

avrelian 12 мар 2014 в 09:26

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

Some possible ways to do this that
were rejected due to complexity and/or performance concerns include: (1) reset
every possible property for every possible selector for a given scope name;
(2) re-implement css in javascript.

Однако, вы меня убедили. Во второй части я рассмотрю и ShadowCSS тоже.

srgg 12 мар 2014 в 08:47

Во-первых, он слабо распространен.

В контексте надвигающегося пришествия web-компонентов ситуация может радикально измениться. Там, как раз, shadow dom — одна из главных используемых концепций.
2. Материал хороший, но читается с трудом. Очень сухой и формальный язык. :(

artyfarty 12 мар 2014 в 09:39

src-less iframe — тот же шедоу дом, только давно везде работает.

chemerisuk 12 мар 2014 в 15:34

Поддерживаю. Пусть решение с iframe не всегда удобно использовать, т.к. оно наследует все сложности работы с ними (которые при желании решаемы), но оно позволяет инкапсулировать стили и DOM в рамках одного элемента уже сегодня.