Can you extend an entity in CSS?

March 21, 2022

This is probably a pretty basic question, but is it possible to extend an entity in CSS?
For example, if I have an entity defined with a bunch of styles:

.blah {
    clear: right;
    float: right;
    margin-top: 75px;
    margin-right: 10px;
    height: 71px;
    width: 600px;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
}

Could I create two entities that each extend this one, then add/change some styles, such that I could just only reference "blahFoo" and "blahBar" in jsp code?

.blahFoo {
    color: #036;
}

.blahBar {
    color: #630;
}

>Solution :

There is no such inheritance in CSS. In SCSS/SASS you could extend some class or placeholder, as you can read here on Sass’s official documentation. However, in CSS, you could do something like this:

.blah, .blahFoo, .blahBar {
    clear: right;
    float: right;
    margin-top: 75px;
    margin-right: 10px;
    height: 71px;
    width: 600px;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
}
.blahFoo {
    color: #036;
}

.blahBar {
    color: #630;
}