CODEWITHSUNDEEP
htmlcss
user3875080
user3875080

Reputation: 75

CSS class inheritance?

I have a lot of classes that end up like.

.img-small {
  color: #202124;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  max-width: 13px;
}

.img-med {
  color: #202124;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  max-width: 23px;
}

In this case the only difference being the width and very often these classes are used for exactly one image.

I'm tempted to use the width property but I know that's deprecated, so then I'm tempted to use a class that all it does is set the width (i.e. class="img-base w-23"), but is there really no better way so that I can override just one field? If possible I'd like to do something like.

.img-small {
  color: #202124;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  max-width: 13px;  
}

.img-med = img-small {
  max-width: 23px;
}

Is there something like this in vanilla CSS?

Upvotes: 0

Views: 68

Answers (1)

Allan J.
Allan J.

Reputation: 520

You could use 2 classes per element. (side note: why are you setting your images to be only 13 pixels wide? that's very tiny)

.img {
  color: #202124;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;  
}
.img-med {
  max-width: 23px;
}
.img-small {
  max-width: 13px;
}
<img class="img img-med" src="https://via.placeholder.com/300/09f/fff.png"/>
<img class="img img-small" src="https://via.placeholder.com/300/09f/fff.png"/>

Upvotes: 3

Related Questions