Style inheritance when extending another component about ember-css-modules

[dfreeman]

In general, component inheritance tends to be difficult to work with because HTML/Handlebars templates don't have any notion of inheritance. As you rightly point out, CSS modules compound this problem by making you also repeat your class usage everywhere.

One option would be to do something like this:

// app/features/components/base-card/component.js
import styles from './styles';

export default Component.extend({
  baseStyles: styles
  // ...
});

You'd then be able to reference the base class's styles like class={{baseStyles.name}} in the template for your derived component templates like app-card.

However, if possible I would take a step back and look at whether you might be able achieve the reuse you're after with composition rather than inheritance. In general I've found composing derived components from more general base ones to be a lot less painful than trying to manage such reuse via subclassing.

What if instead of extending base-card, app-card's template just invoked {{base-card}}? You could imagine using something like ember-block-slots or ember-named-yields to make different sections of your base card overridable on a case by case basis, without having to duplicate the markup of the entire card structure.

Looking at your app-card example, it looks like you're wanting to adjust the styles for one fairly deeply-nested class. Without knowing the full details, the icon might be a good candidate to be a slot with some default content in base-card that could be overridden in app-card's usage of it.

ember-power-select is a good example of a component that's built up this way (though with only a single yield rather than using multiple slots).

[dfreeman]

@duro I'm going to go ahead and close this since I don't think there are any actionable changes here for the addon, but if you have further thoughts or questions please feel free to reopen or start a new issue.