CSS class inheritance?

Question

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?

Why not .img-small, .img-med {…all properties except max-width…} .img-small { max-width: 13px; } .img-med { max-width: 23px; }? — Sebastian Simon
– Sebastian Simon, Commented Mar 6, 2021 at 3:52
Maybe another approach could be making a generic .img related item that contains the settings that would be common for all or most of your image related styles. Then, you could make specific .img-small (using your naming) type items with settings that are different. Later, when you want to use the CSS somewhere, just make sure to include both the common .img part as well as the specific .img-small part in your HTML or wherever. — summea
– summea, Commented Mar 6, 2021 at 3:53

Allan J. · Accepted Answer · 2021-03-06 03:57:11Z

3

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"/>

answered Mar 6, 2021 at 3:57

Allan J.

5301 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3875080 Over a year ago

I figured that'd be the answer. These are logos at the bottom of emails so not meant to to look at for detail. I guess my fear of using two classes stems simply from what if-ism where I'm thinking about how most images will need to be tagged as both img-base and a size, rather than as just a size.

Collectives™ on Stack Overflow

CSS class inheritance?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related