Id identique sur l'étiquette du corps pour une plus grande spécificité css

Je ne veux pas utiliser! Important ou écrire une nouvelle règle pour chaque cas pouvant être traité avec des classes auxiliaires. Par exemple je veux le faire;Id identique sur l'étiquette du corps pour une plus grande spécificité css

HTML

<body id="sameId"> 
    <div class="wrapper"> 
     <div class="article text-center text-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
    </div> 
</body>

CSS

/* Helper Classes */ 
#sameId .text-center { 
    text-align:center; 
} 

#sameId .text-bold { 
    font-weight: bold; 
} 


/* Article Styles */ 
.wrapper .article { 
    padding: 10px; 
    margin-bottom: 20px; 
    border: 1px solid #ddd; 
    text-align:left; 
    font-weight: normal; 
}

Est-ce que pose un problème à l'avenir en utilisant même id sur les étiquettes de corps de toutes les pages pour une plus grande spécificité css?

https://jsbin.com/tamaxetuse/1/edit?html,css,output

Source

2015-10-27 midstack

Y at-il une raison pour laquelle vous définir explicitement 'text-align' et' font-weight' dans '.wrapper .article'? Si elles ne sont pas remplacées par une autre règle plus tôt dans votre CSS, vous pouvez simplement les [omettre] (http://jsfiddle.net/8uedncgm/). – insertusernamehere

Si vous utilisez des classes d'aide comme vous pouvez tout aussi bien utiliser !important en eux ou écrire le style directement dans la balise HTML. Ils sont juste un substitut pour les styles en ligne, de sorte que vous n'avez pas vraiment séparé le contenu du style.

Les règles CSS devraient de préférence refléter ce que vous voulez transmettre plutôt que l'apparence exacte. Exemple:

<body> 
    <div class="wrapper"> 
     <div class="article first-article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
    </div> 
</body>

CSS:

/* Article Styles */ 
.wrapper .article { 
    padding: 5px; 
    border: 1px solid #ddd; 
    text-align:left; 
    font-weight: normal; 
} 

.wrapper .article.first-article { 
    text-align:center; 
    font-weight: bold; 
}

Source

2015-10-27 09:11:51 Guffa

@insertusernamehere: Vous pensez au cas spécifique où le premier élément d'une liste a un style différent. mais l'exemple était destiné à montrer comment nommer les règles en fonction des aspects de l'information plutôt que de l'apparence visuelle. – Guffa

Id identique sur l'étiquette du corps pour une plus grande spécificité css

Répondre

Questions connexes