Semantic classes for non native components

[jakobrosenberg]

Cool project! Have you considered a few semantic classes like card.

I'm not proposing the typical solution where elements are bloated with classes, but instead only use classes when there isn't a native HTML tag.

Typical CSS markup

<div class="card">
  <div class="card-header">
    <div class="card-title">
      <h3>My card</h3>
    </div>
  </div>
  <div class="card-content">
    <p>Lorem ipsum</p>
  </div>
  <div class="card-footer">
     <div class="card-buttons">
       <div class="button">Click me</div>
     </div>
  </div>
</div>

The dream

<article class="card">
  <header><h3>My Card</h3></header>
  <main>Lorem ipsum</main>
  <footer><button>Click me</button></footer>
</article>

I get the classless motivation, but I find that the answer to one extreme is rarely the opposite extreme, but a healthy balance. I hope this is something you'll consider. 🙂

[EvgenyOrekhov]

Thanks!

I don't want to turn holiday.css into Bootstrap/Bulma/whatever. I want to keep the scope small.

Regarding your specific example, I think it would be really hard to create a generic "card" component using a single class that would work well with different use cases. Some might want to put a text header into it, some might want an image header, or an accordion.

So, I would like to leave creating custom components to the consumer of the library.

Perhaps, once I figure out a proper way to support theming (#132), and a proper way to separate "base", "full", and "extended" stylesheets (#84), then maybe I will consider having some advanced components. But I would rather have them made by somebody else :) Perhaps something like third-party "plugins" for holiday.css?

And I'm totally with you on "The dream" example. No need to create classes for every single sub-element, especially when you can use semantic ones.

BTW, you can't have more than one <main> element on a page (unless the other ones are hidden), according to HTML spec.

[EvgenyOrekhov]

And here is a card for you: https://jsfiddle.net/ne2hgjbt/1/ :)