Is there a way to share common CSS classes? [duplicate] - css

Question

This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
I have 5 CSS classes. They are completely identical except one line. Is there a way to create one CSS class, then have the 5 other CSS classes inherite from the one and just add it's own specific's?
As you can see below the only line that is different is this line...
background-image: url("../Images/vertTabsButton2.gif");
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton2.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}

Answer 1

Without using a pre-compiler like SASS you cannot achieve inheritance. However you could accomplish something like what you want by splitting the common properties out into a single class and applying the remaining unique properties through some other ID or class.
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("../Images/vertTabsButton2.gif");
}
.divMasterCol1Button1 {
background-image: url("../Images/vertTabsButton2.gif");
}

Answer 2

Here's your HTML
<button class="commonProperties divMasterCol1Button1"/>
<button class="commonProperties divMasterCol1Button2"/>
Here's your CSS
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/CreativeImages/Hero-527920799.jpg");
}
.divMasterCol1Button1 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}

Answer 3

I recommend using SASS or LESS. Here's an example of it would look like for both pre-compiler languages with your class
SCSS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
#extend .divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
and here is LESS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
.divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
I prefer SCSS because bootstrap 4 is beginning to use it for their framework.....

Answer 4

Simply use CSS:
.c1,.c2,.c3,.c4,.c5{
//common styles
}
.c1{
//c1 special style
}
...
.c5{
//c5 special style
}
See example http://jsfiddle.net/qj76455e/
I wanted to make the principle readable, therefore I used short class names c1,...,c5 instead of divMasterCol1Button1 etc.

Answer 5

Use 2 or more classes. OOCSS, SMACSS or BEM will be great tool.
.button {
...
}
.button--red { color: red; }
Or you can achieve this with #extend operator in sass, less or stylus.