Fancy CSS Class Names

[konradjurk]

What is the reason for fancy class names like "_c-notification__countdown_of6y9q"? For me this indicates that it is "private" and shouldn't be used. Is there a better way to alter the appearance?

[Kilowhisky]

I agree this makes it impossible to attach CSS and style the components.

[mansona]

Howdy folks 👋

Unfortunately there is no simple answer for this situation. These "fancy class names" are both intentional and unintentional at the same time. Let me explain...

Those class suffixes are as a result of us using ember-css-modules which you can find more information about here. It is both an implementation detail and how the system is explicitly designed in that it is theoretically impossible for ember-cli-notificaitons to break any CSS in your application because each class that we use and declare is entirely unique.

It is potentially overkill since we are already using BEM quite extensively but it's a precaution that we decided on very early in the design of this addon.

There are some specific issues already recorded that are essentially requests to be able to have more control over the style of the notifications (see #76 #115 and #43), but I don't think we will be tackling any one of these issues on their own. There is likely going to be some work around restructuring this addon to allow for a specifically designed way to extend the design, but I'm not 100% sure if it's going to be giving you full control. An example of an addon that has these sorts of restrictions is ember-power-select which explicitely does not allow extending the styles.

I don't think we need to go as far as preventing all extension of the styles, but it's important to remember that we are unlikely to sacrifice ease of use for ease of extension. There are always more Ember ways of extending this addon like overriding the notification-container for example.

[konradjurk]

Thanks @mansona for the explanation! Nice that you thought about this and we can still use custom styles via a prefix match like div[class^="_c-notification__countdown_"] {} (@Kilowhisky). Without the explanation I thought it was unnecessarily complicated.