On the one hand, in the first instance it seems a lot easier to remember the syntax.
But thinking about it for longer, I realise that actually if I'm having to learn to put an <aside> inside a <section> for a card, but an <aside> inside an <article> becomes a callout, then perhaps it's not quite as intuitive as it seems, and if I have the mental overhead of remembering all that, perhaps I might be saving myself more energy just to write a CSS class.
One framework I've used recently which floats in between these two is Bonsai.css. It does quite a lot 'out-of-the-box' in terms of minimising boilerplate and basic styling, and uses CSS variables as a shorthand for style properties. It's also a bit of mental overhead, but you can of course just write inline styles if you can't be bothered to learn the shorthand.
I’d honestly prefer <card> to <aside>. <aside> is very non-obvious, and is semantically wrong in a way that will cause (very) mild accessibility trouble. <card> is nominally invalid HTML (a reserved element name, basically), but will cause no accessibility trouble, and it’s rather unlikely that it’ll break in any way in the future. You could resolve the invalidity by spelling it <mvp-card> (at the cost of being an inline element in the absence of stylesheets). But frankly <div class=card> is just all-round more sane.
I thought about this when I was writing my comment, my mind wandered down the track of:
'hey, maybe you could create a web component <card>? That would be cool. It's a shame you can't create web components without JS, wouldn't it be great just to have an HTML only syntax for creating a web component, like <template tagname="card"> or something?'
Then I realised that I still have to learn something else to write a 'card', so I might as well just keep it simple and use div.card. If I want anything more complex, I can use one of the many component frameworks that exist.
No need for JavaScript unless you want your element to have additional behaviour attached to it. <mvc-card></mvc-card> would be perfectly valid with no JavaScript required. But yeah, there’s not generally particular value in doing it that way rather than a div or span with a class attribute.
On the one hand, in the first instance it seems a lot easier to remember the syntax.
But thinking about it for longer, I realise that actually if I'm having to learn to put an <aside> inside a <section> for a card, but an <aside> inside an <article> becomes a callout, then perhaps it's not quite as intuitive as it seems, and if I have the mental overhead of remembering all that, perhaps I might be saving myself more energy just to write a CSS class.
One framework I've used recently which floats in between these two is Bonsai.css. It does quite a lot 'out-of-the-box' in terms of minimising boilerplate and basic styling, and uses CSS variables as a shorthand for style properties. It's also a bit of mental overhead, but you can of course just write inline styles if you can't be bothered to learn the shorthand.