Namespacing / Scoping en CSS

Question

Je souhaite appliquer les règles d'un fichier CSS à un certain div / class afin que, par exemple, le contenu de events.css ne soit appliqué qu'au contenu d'une classe appelée .events et non en dehors de cette portée sans qu'il soit nécessaire de le faire. d'ajouter la classe .events au début de chaque règle css.

Je pense que ce n’est pas possible, mais on ne sait jamais.

Sinon, je pense obtenir le même effet en ajoutant le préfixe .event aux règles CSS après leur téléchargement / modification. Je pense que cela devrait être assez simple, mais est-ce que quelqu'un prévoit des problèmes?

Answer 1

  

Je pense que ce n'est pas possible si

En effet. Sauf si vous mettez le contenu en question dans un iframe. Ensuite, vous obtenez tout un document distinct pour un style différent.

  

Je pense obtenir le même effet en préfixant les .events aux règles CSS après leur téléchargement / modification. Je pense que cela devrait être assez simple, mais est-ce que quelqu'un prévoit des problèmes?

De manière automatisée? Vous devez être en mesure d’analyser l’entrée CSS pour déterminer où se trouvent les débuts des sélecteurs.

Cela n’est pas aussi anodin que vous pourriez le penser:

/* This is my grate CSS
.sausage { color: red; } adds a class rule
/*/ .eggs, .bacon { color: red; }
.potato:before { content: "; }
.beans { content: "; }

est un exemple de CSS difficile à analyser. .eggs , .bacon et .potato commencent les sélecteurs et souhaitent un préfixe .events . .sausage et .beans ne le sont pas.

Answer 2

  

Si non, je pense réaliser le   même effet en préfixant le .events   aux règles CSS après avoir été   téléchargé / édité. Je pense cela   devrait être assez simple, mais   est-ce que quelqu'un prévoit des problèmes?

C'est la seule façon de le faire et ça devrait aller.

Answer 3

Du point de vue de la maintenance, il est plus sûr d’inclure simplement ".event". dans vos règles CSS. Plusieurs mois plus tard, vous avez peut-être oublié les astuces que vous avez utilisées pour économiser un peu de frappe.

Answer 4

En bref, le seul moyen consiste à préfixer chaque règle avec .events .

Mais je voudrais éviter de le faire automatiquement, car il est facile de commettre des erreurs, telles que l'ajout manuel de .events à une règle, ce qui la doublerait. Et si vous souhaitez partager des styles sur plusieurs pages, tels que .events.special et .aboutus.special , vous devez les placer ailleurs.

Il est généralement préférable d’utiliser une seule feuille de style au lieu d’une par section. L’utilisateur la mettra donc en cache lorsqu’elle affichera les pages suivantes. (Vous pouvez le réduire et le gzip dans l'environnement de production pour réduire le temps de téléchargement initial.)

Answer 5

J'ajouterais la classe '.events' aux sélecteurs. Il y a un risque d'erreur humaine en procédant de manière manuelle. Voici un moyen de automatiser partiellement le processus d'ajout d'un sélecteur à toutes les classes CSS .

Vous pouvez également utiliser ce préfixeur automatique , mais il ne semble pas gérer les espaces entre vos sélecteurs bien.