avrelian Mar 11 2014 at 18:23

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

5 min

45K

CSS*HTML*

+26

Comments 14

rWeb Mar 11 2014 at 19:22

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

avrelian Mar 11 2014 at 19:57

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

Jabher Mar 12 2014 at 12:17

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

avrelian Mar 12 2014 at 13: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 Mar 12 2014 at 12:47

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

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

artyfarty Mar 12 2014 at 13:39

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

chemerisuk Mar 12 2014 at 19:34

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