Boussole/Blueprint a une règle CSS "body.bp table" et "body.bp td" et gâcher toutes les tables, ce qui est une solution de contournement?

Question

j'avoir des définitions CSS telles que

.one-table 
    width: 500px 

.one-table td 
    padding: 0 

mais depuis Compass/Plan directeur 0.8.17 a

body.bp table { width: 100% } 
body.bp td { padding: 4px } 

donc mes tables sont foiré. Et l'ajout de table.one-table n'aide pas non plus. Je pense que c'est perdre à la spécificité ... que je suis assez surpris parce que la classe est directement sur la table, tandis que l'autre a la classe appliquée sur body. Pourquoi cela est-il outrepassé et qu'est-ce qui est une bonne solution pour cela?

Je ne peux pas utiliser id parce que c'est un modèle et que je dois le rendre assez générique. Je me sens aussi réticent à utiliser !important parce que si plus tard le IE css def doit également utiliser important. Je ne peux pas mettre à niveau vers la nouvelle boussole, car cela pourrait aussi signifier réparer des choses pour l'ensemble du site. Merci.

Answer 1

Voici comment calculer CSS specificity. Le sélecteur d'identifiant a une spécificité de 100, un sélecteur de classe 10 et un sélecteur d'élément 1. Pour calculer la spécificité CSS, additionnez simplement les valeurs. La spécificité de body.bp table est de 12 (1 + 10 + 1) et table.one-table est de 11 (1 + 10), donc body.bp table gagne.

Pour résoudre ce problème tout en gardant la classe one-table, vous pouvez essayer d'utiliser ces sélecteurs:

# Specifity is 20 (vs 12). 
.bp .one-table 
    width: 500px 

# Specifity is 21 (vs 12). 
.bp .one-table td 
    padding: 0 

Ou vous pouvez simplement utiliser les mêmes sélecteurs et passer outre les règles du plan directeur. Ces règles s'appliqueront à toutes les tables.

# This must come after the blueprint rules. 
body.bp table 
    width: 500px 

body.bp td 
    padding: 0 

Il semble que le mixin plan est scope à la classe bp. Cela peut vous obliger à mettre .bp devant plusieurs de vos règles CSS. Si la portée de plan n'est pas nécessaire, vous devez simplement utiliser le mixin haut niveau pour plan:

+blueprint