11
votes

CSS réinitialisation qui s'applique uniquement à #Widget

Disons que j'ai un widget qui utilise des CS compliqués et doit être intégré à plusieurs sites Web qui ont tous leur CSSES.

Si je préfixe les règles CSS de tous les widgets avec "#widget", ils ne s'appliqueront à rien à l'extérieur, donc un problème fixé. Malheureusement, les règles CSS du site peuvent toujours gâcher le widget.

Si je réinitialise tous les CSS à l'intérieur #Widget avec des règles de réinitialisation appropriées, espérons-le, ils remplaceront toutes les règles extérieures, non? (Parce que mes règles utilisent des règles #Id et extérieures ne connaissent aucun identifiant à l'intérieur de mon widget, ils ne peuvent pas les remplacer, non, pas ci-au temps)

Quelle est la meilleure façon de réinitialiser tous les CSS à l'état connu? La plupart des réinitialisations CSS commencent à partir des valeurs par défaut du navigateur, elles ne réinitialisent pas la CSSES arbitraire. Y a-t-il une réinitialisation CSS qui fonctionne quoi que ce soit?

css reset

0 commentaires

4 Réponses :

0
votes

J'utilise la réinitialisation d'Eric Meyer rechargée pour réinitialiser les styles CSS. Relier: http://meyerweb.com/eric/3007/05 / 01 / réinitialiser-rechargé /

0 commentaires

1
votes

Oui, votre CSS devrait remplacer n'importe quoi déclaré à l'extérieur du widget, mais votre réinitialisation doit être assez complète. Je suggère d'utiliser une version modifiée de http://meyerweb.com/eric/3007/2007/05/01/Reset -Rélated / , mais vous devrez modifier tous les sélecteurs vous-même.

Je serais tenté de renforcer également vos sélecteurs, donc plutôt que p> xxx pré>

Utilisez P>

html body #widget tagname{}

3 commentaires

Je pense que le widget peut être placé sur n'importe quelle page afin que le CSS que vous devez réinitialiser est inconnu. Il doit préfixer les règles d'une réinitialisation globale (telle que Eric Meyer's) avec le #Widget afin d'être totalement sûr.

Je suis complètement d'accord (je suis lié à cela aussi)

Les réinitialisations d'Eric ne semblent que réinitialiser les valeurs par défaut du navigateur, pas tout ce qui pourrait être css à la CSSED, afin qu'ils ne suffiront probablement pas.

12
votes

Je suis tombé sur CleanSlate.css en essayant de résoudre le même problème:

https://github.com/premasagar/cleanslate

Je ne l'ai pas encore utilisé dans la production, mais il est apparemment sorti du développement du widget de service mondial de la BBC.

1 commentaires

Remarque - Le projet CleanSlate est passé de Google Code à Github: Github.com/premasagar/cleanslate (i créé le projet - et oui, cela résout ce problème;)

1
votes

Utiliser l'espace de noms et réinitialiser et moins

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

  ... your other styles ...
}

0 commentaires