Is there a way to make HTML code independent of changes to CSS class names?

Question

I have been using Twitter Bootstrap 3 for a while, but now Twitter Bootstrap 4 . And the new one Twitter Booststrap contains some changes , for example, renaming .table-condensedto .table-sm. For a possible future transition from current to future version, is there a way to make HTML code independent of changes in CSS class names? For example, if I have a class .table-condensed, is there a way to create my own class table-smalland create it from an existing Twitter Bootstrapclass table-condensed? Something like (pseudo-code):

.table-small {
    join(".table-condensed")
}

I only use clean CSSup to this point (sometimes I'm a Front-End developer, not a full one) :) if someone answers me, if it's possible even to some extent, maybe with preprocessors or something I was I would be very grateful, thank you in advance!

Answer 1

If you use SASS, you can use the function @extend.

However, it is recommended to avoid this, as it copies the selected class to a new one, thereby essentially doubling the size of your CSS

The solution is to not upgrade to BS-4 unless you have a requirement. Or update all your HTML when you do

Edit

SASS docs, , . .

- CSS, , , CSS

Answer 2

css :

.table-small {
    &:extend(.table-condensed);
}

, sass, :

css:

.table-condensed,
.table-small {
    background: red;
}

: http://lesscss.org/less-preview/