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

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

Что мы не делаем. 't want

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>