Resetowanie CSS, które ma zastosowanie tylko do #widgeta

Question

Załóżmy, że mam widget, który używa skomplikowanego CSS i musi być osadzony w wielu witrynach, które mają swoje własne CSS.

Jeśli przedrostkiem wszystkich reguł CSS widżetu będzie "#widget", nie będą one dotyczyły niczego na zewnątrz, więc jeden problem został rozwiązany. Niestety, reguły CSS witryny wciąż mogą zepsuć widget.

Jeśli zresetuję wszystkie CSS wewnątrz #widget z odpowiednimi regułami resetowania, to mam nadzieję, że zastąpią one wszystkie reguły zewnętrzne, prawda? (ponieważ moje reguły używają #id, a reguły zewnętrzne nie znają żadnych identyfikatorów w moim widgecie, nie mogą ich przesłonić, prawda?! ważne niezależnie)

Jaki jest najlepszy sposób na zresetowanie wszystkich CSS do znanego stanu? Większość resetów CSS zaczyna się od domyślnych ustawień przeglądarki, nie resetują one arbitralnych CSSów. Czy istnieje jakiś reset kodu CSS, który działa bez względu na wszystko?

Answer 1

Używam resetowania Eric Meyera do resetowania stylów CSS. Link: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

Tak, css powinny przesłonić niczego zadeklarowanej poza widgetem, ale twój resetu musi być bardzo wyczerpujące. Sugeruję użycie zmodyfikowanej wersji http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, ale sam musisz zmodyfikować wszystkie selektory.

chciałbym mieć pokusę, aby wzmocnić swoje selektorów również, więc zamiast

#widget tagname{} 

Zastosowanie

html body #widget tagname{} 

Twoje selektorów mają teraz znacznie większą wagę.

Answer 3

natknąłem cleanslate.css podczas próby rozwiązania tego samego problemu:

https://github.com/premasagar/cleanslate

I już nie używać go w produkcji jeszcze, ale to widocznie wyszedł z rozwojem BBC World Service widget.

Answer 4

użycie nazw & zresetować & MNIEJ

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

    ... your other styles ... 
}