Mehrere CSS-Klassen mit nur einer Eigenschaft, die anders ist?

Question

Dies ist eine einfache Frage, ich weiß einfach nicht, wie man im Internet danach sucht.

Ich habe drei CSS Klassen: .header, .cell, .footer. Sie sehen aus wie die folgende:

.header 
{ 
    display:table-cell; 
    vertical-align:middle; 
    width:130px; 
    height:20px; 
    background-color: Yellow; 
    border: 1px solid silver; 
} 
.cell 
{ 
    display:table-cell; 
    vertical-align:middle; 
    width:130px; 
    height:85px; 
    background-color: Yellow; 
    border: 1px solid silver; 
} 
.footer 
{ 
    display:table-cell; 
    vertical-align:middle; 
    width:130px; 
    height:40px; 
    background-color: Yellow; 
    border: 1px solid silver; 
} 

Der einzige Unterschied zwischen all diesen Klassen ist die height Eigenschaft. Wie kann ich diesen Code vereinfachen?

Danke.

Answer 1

Verwenden , die Elemente in der Auswahlliste für die gemeinsamen Eigenschaften zu trennen:

.foo, .bar { 
    color: red; 
} 

.foo { 
    font-size: 120%; 
} 

.bar { 
    font-size: 80%; 
} 

Diese beiden .foo und .bar rot machen werde, aber verschiedene Textgrößen haben.

Answer 2

Erstellen Sie einfach eine andere Klasse, die alle gemeinsamen Eigenschaften und weisen Sie jedem Element

.container { 
    display:table-cell; 
    vertical-align:middle; 
    background-color: Yellow; 
    border: 1px solid silver; 
} 

.header 
{ 
    height:20px; 
} 
.cell 
{ 
    height:85px; 
} 
.footer 
{ 
    height:40px; 
} 

Hoffe, es hilft;)