Сброс CSS, который применяется только к #widget

Question

Допустим, у меня есть виджет, который использует сложный CSS и должен быть встроен в несколько веб-сайтов, которые имеют свои CSS.

Если я добавлю префикс CSS всех виджетов к «#widget», они не будут применяться ни к чему снаружи, поэтому одна проблема исправлена. К сожалению, правила сайта CSS все еще могут испортить виджет.

Если я сброслю все CSS внутри #widget с правильными правилами сброса, то, надеюсь, они переопределят все внешние правила, верно? (поскольку мои правила используют #id, а внешние правила не знают никаких идентификаторов внутри моего виджета, они не могут их переопределить, верно?! важно, несмотря на это)

Какой лучший способ вернуть все CSS в известное состояние? Большинство сбросов CSS начинаются с настроек браузера по умолчанию, они не сбрасывают произвольные CSS. Есть ли сброс CSS, который работает несмотря ни на что?

Answer 1

Я столкнулся с cleanslate.css, пытаясь решить ту же проблему:

https://github.com/premasagar/cleanslate

Я еще не использовал его в работе, но, видимо, он возник в результате разработки виджета Всемирной службы Би-би-си.

Answer 2

Использовать пространство имен и сброс & МЕНЬШЕ

#my-ns {
  @import ".../reset.less";

  ... your other styles ...
}

Answer 3

Да, ваш CSS должен переопределить все, что объявлено вне виджета, но ваш сброс должен быть достаточно полным. Я предлагаю использовать модифицированную версию http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/,, но вам придется изменить все селекторы самостоятельно.

Я бы тоже соблазнил усилить ваши селекторы, а не

#widget tagname{}

Используйте

html body #widget tagname{}

Ваши селекторы теперь будут иметь гораздо больший вес.

Answer 4

Я использую перезагрузку Эрика Мейера для перезагрузки стилей CSS. Ссылка на сайт: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/