Allow multiple CSS classes to be assigned

[solid-pixel]

Hello, and thanks for this life-changing tool!

I was wondering if you'd consider adding support for multiple classes?

Right now, it seems that only one value can be assigned to class:. I've tried adding two separated by a space, but that will result in no classes being added to the element.

I've also tried nesting them like this:

card_mod:
  class:
    - no-border
    - sticky

but that will result in the classes being comma-separated:

<ha-card class="no-border,sticky type-markdown">
                         ⬆

It would help keeping the theme's code a lot cleaner and easier to maintain.

Thank you ❤️

[Madelena]

Agreed! That would clean up the code a lot and allow more flexibility.

[ildar170975]

I am not such a good CSS expert but I have never seen in a Code Inspector an element of several classes. Not sure that an element may be of more than one class.

[solid-pixel]

@ildar170975

any HTML element can have as many CSS classes as you want, what kind of code have you been inspecting? :P Any website in the world uses multiple elements with multiple CSS classes.

Only the id attribute can contain only one value, but class has virtually no limits.

Just took this from this very page we're commenting on:

<div class="timeline-comment-header clearfix d-flex">
                       ^                ^       ^
                       1                2       3
...

in this case div has 3 classes.

[ildar170975]

any HTML element can have as many CSS classes as you want, what kind of code have you been inspecting?

This is a new knowledge for me! As I said my CSS experience is not great , I have only dealt with CSS when using card-mod))). My first and only using of Code Inspector was with HA. I have never seen an element in HA with several classes.

in this case div has 3 classes.

Omg, I thought that this is just one class with spaces in a name)))))

So, a possibility to assign several classes to some card would give us similar features as multiple inheritance in C++. And here a problem “avoid conflicts when assigning a CSS property” must be solved: one class may assign “color: red”, another “color: green”, so some rules should be used.

[Madelena]

@ildar170975

The issue of having multiple declarations on the same DOM element in CSS is solved by the order of specificity. Here are the rules in case you are wondering: https://css-tricks.com/specifics-on-css-specificity/

[solid-pixel]

yep like Madelena said.

that being said, I'd let the user deal with that - all you should do is just pass the classes to the HTML element the same way they've been declared in the card's yaml :)

so:

...
class: class1 class2
...

should translate to:

<ha-card class='class1 class2'>
...