Est-il possible de styles communs combinés et enlever la répétition

Question

version ici est simplifiée html

<div id="id1"></div> 
<div id="id2"></div> 

Voici mon CSS.

#id1 { 
    display: -ms-flexbox; 
    -ms-flex-direction: row; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

#id2 { 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

La seule différence entre les deux modèles est le fait -ms-flex-direction rangée vs colonne. Toutes les autres propriétés sont identiques. Est-il possible de combiner les deux pour que le même code ne soit pas répété?

Answer 1

Dans ce cas, vous pouvez appliquer des styles communs à la fois div, puis faire la différence avec votre ID (Les classes sont mieux pour ce BTW)

div { 
    display: -ms-flexbox; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

#id1 { 
    -ms-flex-direction: row; 
} 

#id2 { 
    -ms-flex-direction: column; 
} 

---

C'est waaay mieux

HTML

<div class="flexbox row"></div> 
<div class="flexbox column"></div> 

CSS

.flexbox { 
    display: -ms-flexbox; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

.flexbox.row{ 
    -ms-flex-direction: row; 
} 

.flexbox.column { 
    -ms-flex-direction: column; 
} 

Answer 2

Lorsque les propriétés sont partagées entre les éléments que vous devez utiliser une classe pour les cibler. Les identifiants doivent uniquement figurer sur un seul élément en tant qu'identifiant unique. Voici comment vous mettre en œuvre une classe:

<div id="id1" class="same"></div> 
<div id="id2" class="same"></div> 

CSS:

.same { 
    display: -ms-flexbox; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

#id1 { 
    -ms-flex-direction: row; 
} 

#id2 { 
    -ms-flex-direction: column; 
} 

Vous pouvez également affecter plusieurs classes à un élément en utilisant un espace. Donc ceci:

<div id="id1" class="same different"></div> 
<div id="id2" class="same not-different"></div> 
<div id="id3" class="same not-different"></div> 

CSS:

.same { 
    display: -ms-flexbox; 
    width: 100px; 
    height: 200px; 
    border: 1px solid; 
} 

.different { 
    background: green; 
} 

.not-different { 
    background: red; 
} 

#id1 { 
    -ms-flex-direction: row; 
} 

#id2 { 
    -ms-flex-direction: column; 
} 

Cela vous permettra de cibler plusieurs éléments à l'aide de la classe Enchaînement.