Quelle est la meilleure façon de contextualiser un grand nombre de définitions de style Css?

Question

Nous développons un widget Html en utilisant Css comme mécanisme de style. Le widget doit être autonome de sorte qu'il n'interfère avec aucun autre composant sur la page Web de l'hôte.

Nous avons un seul fichier Css avec un grand nombre de définitions de style. Pour les contextualiser, chaque seul commence par le nom du conteneur principal widget ...

#MainWidgetContainer .class1..... 
{...} 

#MainWidgetContainer .class2..... 
{...} 

Est-il possible que je peux appliquer le contexte MainWidgetContainer d'une manière plus globale?

Remarque - Peut-être difficile. Je peux vivre comme ça mais je pensais que ça valait le coup de demander.

Answer 1

Dans ce cas, je pense que votre seule option est d'utiliser l'identifiant de #MainWidgetContainer dans tous vos sélecteurs. Tout ce qui est plus générique risque d'entrer en conflit avec les feuilles de style de l'hôte ou ne sera pas détecté par vos styles. Comme mentionné ci-dessus, vous pouvez utiliser LESS, ou SASS pour réduire l'ennui de l'écriture de cette façon, mais vos styles doivent encore utiliser ce sélecteur.

Answer 2

Here's the documentation on using selectors. Vous pouvez utiliser l'enfant du conteneur mainwidget. Ce n'est pas la chose la plus intuitive à prendre, mais c'est un vrai gain de temps pour ce genre de choses.

Answer 3

Jetez un oeil à MOINS: http://lesscss.org/