Comment réutiliser les styles?

Question

Dans le passé, j'ai beaucoup appris sur CSS, mais maintenant je ne me souviens pas comment réutiliser les styles.

Exemple:

J'ai quelques onglets avec classe tab et je peux les passer avec javascript. L'onglet actuellement sélectionné a une autre classe, active.

Leur style CSS:

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    position: relative; 
    top: 0; 
    left: 0; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: default; 
    background-color: #FFCF75; 
} 

Les deux styles a beaucoup de styles Identic sauf 2, cursor et background-color. Donc, ma question est, comment puis-je résumer le style .tab et l'utiliser dans .Active?

Je veux réaliser quelque chose comme ceci:

.active { //extends .tab 
    cursor: default; 
    background-color: #FFCF75; 
} 

Merci.

Answer 1

Vous pourriez, et devrait probablement, appliquer les deux classes à l'élément comme ceci:

<a class="tab active"></a> 

Si vous voulez une règle CSS pour la combinaison spécifique de ces deux classes, vous feriez comme ceci:

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active 
{ 
    cursor: default; 
    background-color: #FFCF75; 
} 

.tab.active /* no space */ 
{ 
    /* styles for elements that are both .tab and .active */ 
    /* leaving .active reusable for things other than tabs */ 
    /* and allowing override of both .tab and .active */ 
} 

Cela vous permet d'éviter de faire des copies inutiles de vos déclarations de style ... et vous donne la spécificité de passer outre l'une des classes individuelles lorsqu'un élément est à la fois.

Answer 2

Remplacez la règle .tab par .tab, .active.

Answer 3

Utilisez les deux noms de classe dans l'attribut class. Dans la règle .active, définissez uniquement des styles différents comme vous l'avez déjà fait dans le deuxième exemple.

<div class="tab active"></div> 

Answer 4

Cet héritage de sélecteur est une fonctionnalité intéressante de SASS.

Si vous voulez coller avec CSS simple, regardez la section sur l'héritage des sélecteurs et vous pouvez voir comment le code SASS, avec @extend, est transformé en CSS standard.

Answer 5

Vous pouvez appliquer plusieurs classes à un élément. Vous pouvez donc avoir un élément avec class = "tab actif" et avoir les deux spécifications.

Answer 6

.active, .tab { 
    ... full style of both here 
} 

.active { 
    ... the styles that differ from .tab 
} 

Answer 7

Pour ce faire. Combiner les styles et séparer avec une virgule. Ajoutez ensuite d'autres règles ciblant les différences.

.tab, .active { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
} 

.tab{ 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
} 

EDIT

Sur la base de votre commentaire

Je change actuellement les onglets en ajoutant un style .active à l'attribut de classe .

ce que je ferais:

HTML

<div class="tab"></div> 

CSS

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
} 

Ensuite, il suffit ajouter ou supprimer la classe .active, laissant le .tab comme il est.

Tant que .active est plus bas dans la feuille de style, il écrasera les bits nécessaires.

Answer 8

1. Vous pouvez extraire la classe de base avec des styles Identic et marquez vos éléments avec deux classes: .tab .base
2. Vous pouvez utiliser le langage css dynamique sass ou less qui prend en charge les classes inhritance

Answer 9

Vous pouvez combiner. active dans .tab et remplacer les parties qui ont besoin de changer comme ceci:

.tab, .active { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
}