Is there a way make HTML code independent from changes in CSS class names?

Question

I am using Twitter Bootstrap 3 for a while, but now Twitter Bootstrap 4 is coming. And new Twitter Booststrap comes with some changes, like renaming .table-condensed to .table-sm for example. For sake of future possible migration from current to future version, is there a way to make HTML code independent from changes in CSS class names? For example, if I have .table-condensed class, is there a way to create my own class table-small and create it from existing Twitter Bootstrap's class table-condensed? Something like (pseudo-code):

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

I use only pure CSS until this moment (I am Front-End Developer occasionally rather than full-stack:) ), if anybody will answer me if this thing is even possible in some way, maybe with preproccesors or something like that, I would be very grateful - thank you in advance !

Answer 1

If you're using SASS then you can use the @extend function.

However, it's recommended to avoid doing this as it copies the selected class into the new one thus, essentially, doubling the size of your CSS

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

Edit

Reading through the SASS docs, it seems the functionality has been changed to work using the comma syntax. So this would be your best option going forward.

It still generates excess CSS by doubling the number of classes, but not as bad as duplicating all your CSS

Answer 2

You can use less css and do the following:

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

This does not copy over the class like sass but just adds the selector:

Generated css:

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

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