How can I make a css class that is a modification of another?

245
May 13, 2017, at 10:30 PM

I'm using google's MDL for a simple website I'm making. I have a lot of buttons on the website, on a few various pages, that I would like to all have the same look at feel. The starting point is to include a few MDL styles to the buttons, like so:

<button class="mdl-button" style="..."/>

This is great, but I want to add some additional features to the buttons over the default mdl style. I want to do something like:

.my_button_style {
    ... include mld-button style
    ... include mdl-xxx style
    ... other css parameters here
}

I've done some digging, but it appears that there is no way to inherit properties from other css classes when creating a new one, using standard CSS (without using something like LESS).

This seems insane to me.

I see a lot of examples on the MDL website such as:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

If you want all your buttons to look like that, do you really have to add each and every one of the styles to every button instance across your whole site? Why are CSS developers not marching down to Mountain View with pitchforks and torches? Am I missing something really obvious?

Answer 1

It appears that there is no way to inherit properties from other CSS classes when creating a new one, using standard CSS

That is correct.

It's hard to prove that a feature does not exist, but you will search in vain for any such feature in any CSS spec.

Since you appear to be resistant to any notion of a design philosophy involve orthogonal classes which are combined at the HTML level, I will not spend any additional time trying to motivate that approach, or justifying the "omission" of extending classes from the CSS spec.

Meanwhile you might take a look at https://tabatkins.github.io/specs/css-extend-rule/, but this is not part of any existing or proposed spec that I am aware of. In any case, the existence of this proposal in itself may be taken as "proof" that @extends is not already part of CSS anywhere.

Although personally I cannot recommend using SASS, there are other preprocessor frameworks that provide extends in a less intrusive way. If your app already uses any kind of build process, adding such as preprocessing step should not be "cumbersome" at all, and is likely to involve nothing more than adding a couple of lines to some config file. For instance, you could look at https://github.com/travco/postcss-extend.

Rent Charter Buses Company
READ ALSO
Flexbox - last element stretch full height of parent

Flexbox - last element stretch full height of parent

I am trying to get a grid element to fill the height of it's container using a flexboxI have tried and tried but nothing seems to work

401
image is not fitting to the screen in gmail android 6.0 email templates

image is not fitting to the screen in gmail android 6.0 email templates

image is not fitting to the screen in gmail android 60 email templates

303
Xhtml slideshow not working

Xhtml slideshow not working

I am trying to get this code working,but pressing the button does nothing,i can't see anything wrong with the codeI've tried changing the pictures, but it changed nothing

349