Is there a way to share common CSS classes?

Question

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;
}

This might be helpful: [Can a CSS class inherit one or more other classes?](http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) — showdev, Sep 11 '15 at 16:49

score 5 · Answer 1 · answered Sep 11 '15 at 16:47

5

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");
}

answered Sep 11 '15 at 16:47

sdgluck

24,894
8
75
90

Just about to post this. For clarity, if you wanted `.divMasterCol1Button1` to have different backgrounds depending on the class it was paired with, you could do `.commonProperties.divMasterCol1Button1 { ... }`. – stvnrynlds Sep 11 '15 at 16:49
1

Can't you do something like [this](http://jsfiddle.net/v11twkfL/1/)? This example doesn't use an extra class. Only CSS properties that are defined override existing properties for the same class. – UltraSonja Sep 11 '15 at 17:17
You can have more CSS per class defined, see my post. – Pavel Gatnar Sep 11 '15 at 17:22
@UltraSonja Absolutely, however what you are demonstrating is not strictly _inheritance_, but _cascading_. – sdgluck Sep 11 '15 at 17:32
Why would someone want to use inheritance in CSS anyway? – UltraSonja Sep 11 '15 at 18:40

score 3 · Accepted Answer · answered Sep 11 '15 at 16:52

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");
}

I like this answer. It shows the css and html. Thank you. I'll try it monday. It's Saturday right now and I'm practicing relaxing. — Roto, Sep 12 '15 at 11:57

score 1 · Answer 3 · answered Sep 11 '15 at 16:52

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.....

Pavel Gatnar · Answer 4 · 2015-09-11T19:24:07.840

1

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.

edited Sep 11 '15 at 19:24

answered Sep 11 '15 at 16:57

Pavel Gatnar

3,987
2
19
29

score 0 · Answer 5 · answered Sep 11 '15 at 16:51

0

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.

answered Sep 11 '15 at 16:51

0x860111

386
1
3
15

Is there a way to share common CSS classes?

5 Answers5