Restablecimiento de CSS que se aplica solo a #widget

Question

Digamos que tengo un widget que usa CSS complicado y debe estar incrustado en varios sitios web que tienen sus CSS.

Si prefijo todas las reglas de CSS de widgets con "#widget", no se aplicarán a nada en el exterior, por lo que se solucionó un problema. Lamentablemente, las reglas de CSS del sitio aún pueden alterar el widget.

Si reinicio todo el CSS dentro de #widget con las reglas de reinicio adecuadas, entonces con suerte anularán todas las reglas externas, ¿no? (porque mis reglas usan #id y las reglas externas no conocen ningún ID dentro de mi widget, no pueden anularlos, ¿no es así?) importante

¿Cuál es la mejor manera de restablecer todo el CSS al estado conocido? La mayoría de los restablecimientos de CSS comienzan desde los valores predeterminados del navegador, no restablecen CSSes arbitrarios. ¿Hay algún reinicio de CSS que funcione sin importar qué?

Answer 1

Uso el restablecimiento de Eric Meyer reloaded para restablecer los estilos CSS. Enlace: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

Sí, el CSS debe anular nada declarada fuera del widget, pero el reajuste debe ser bastante amplia. Sugiero usar una versión modificada de http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, pero tendrá que modificar todos los selectores usted mismo.

estaría tentado a fortalecer los selectores también, por lo que en lugar de

#widget tagname{} 

Uso

html body #widget tagname{} 

Sus selectores ahora tendrán un peso mucho mayor.

Answer 3

me encontré con cleanslate.css al tratar de resolver el mismo problema:

https://github.com/premasagar/cleanslate

no he utilice en la producción todavía, pero aparentemente salió del desarrollo del Servicio Mundial de la BBC widget.

Answer 4

uso de espacio de nombres & restablecer & MENOS

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

    ... your other styles ... 
}