Техника предотвращения конфликтов стиля CSS и пространств имен

Question

Допустим, вы создаете концептуальный виджет с именем Awesome Widget и хотите полностью защитить его от конфликтов с окружающими элементами или дочерними элементами, которые находятся в виде содержимого внутри виджета.

Что мы делаемне хотите

div ul li {}

Решение 1: дочерний комбинатор CSS

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

.awesomewidget > div > ul > li {}

Решение 2: пространство имен классов

Использование aw (Awesome Widget) в качестве пространства имен для каждого класса, уменьшая вероятность любых других элементов на странице, используя этоточное пространство имен + имя класса.

.awesomewidget .aw-container .aw-list .aw-listitem {}

В CSS есть что-то вроде @namespace, но это только для XML.

Помимо решений 1 и 2, есть ли другие, которые можно использовать?Какой из них вы бы предпочли?Есть ли рекомендации?

РЕДАКТИРОВАТЬ: пример проблемы, которая возникает без надлежащего предотвращения конфликтов имен и стилей

Стилизация виджетов:

.awesomewidget > div ul li {
background-color:red;
}

Пользовательстиль:

ul li {
background-color:blue;
}

Разметка:

<div class="awesomewidget">
<div>

<ul>
<li>
<!-- user content starts here -->

<p>I am the user and I want to add some content here. Let's add a list:</p>

<ul>
<li>Why is this list-item red and not blue?</li>
</ul>

<!-- user content ends here -->
</li>
<li>
<!-- user content starts here -->

<!-- user content ends here -->
</li>
</ul>

</div>
</div>

Answer 1

Я бы предпочел использовать комбинацию из двух решений, таких как:

.awesomewidget > div ul li {}

Потому что второй добавляет в разметку МНОГО ненужного веса.

Обновление

Для вашего примера я бы добавил обертку вокруг пользовательского контента с классом .user, а затем добавил бы их CSS с .user. Тем не менее, это не изящно, это добавляет некоторую разметку, и я думаю, что это может привести к сбою.

Answer 2

Если вы сталкиваетесь со многими конфликтами пространства имен CSS, возможно, пришло время подумать о переходе на интерфейсную среду JS, такую ​​как ReactJS Facebook.Это в сочетании с загрузчиком модулей Webpack позволит вам использовать многие прекрасные библиотеки JS, которые упростят ваш рабочий процесс разработки. CSS-загрузчик , например, поможет вам управлять разработкой CSS, выполнив local scoping , а это именно то, что вы ищете.

Answer 3

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

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

Но если вы собираетесь использовать пространство имен классов для краткости, я бы подумал, что максимум двух должно быть достаточно, если вы не называете достаточно отчетливо:

.awesomewidget .aw-listitem {}

Вы могли бы также предоставить контейнер (с классом с хорошим пространством имен) для раздела (ов) непользовательского контента на максимально возможном уровне, который не включает пользовательский контент, защищая себя от этого риска. <div/> довольно удобен для произвольной группировки и создан для этой цели ...

Answer 4

Вот несколько решений:

• Проверьте исходный порядок, чтобы убедиться, что глобальные стили связаны перед определенными стилями страницы в заголовке
• Используйте target для запуска пользовательского CSS
• Использовать сгенерированный контент для привязки стилей
• Используйте селекторы атрибутов для увеличения специфичности