Order of virtual and global classes

Feedback
1

Let’s say I have something similar to the following block setup:

  • a couple of virtual helper/combinator classes like .hidden, .is-parent and .collapsed
  • a global-class .team-card for styling
  • no block level styling, so no block class

This is what I get on front-end:
<div class="hidden is-parent collapsed team-card">

The issue I have now is missing logic and readability, even if there is a (virtual) block class.
Might sound (very) nitpicky, but it also kind of disturbs me because I would never write it that way myself. Just doesn’t look nice and right. Others might not mind about it.
I would like to see the global class on first position, as it’s referring to my styling, all the other classes basically just sitting there.

The only instance I can see where it makes sense is when it’s a virtual block class.
If that’s not the case, they are in the way and I wish they somehow could be displayed at the very end of the class attribute - even virtual external classes, virtual stylesheet classes, etc.

Any thoughts on this?

1 Like
2

@Marius, I agree and was thinking the same. I used to write HTML manually and always used classes in order like:
<div class="BEM-class global-class utility-class">.

It’s not a huge deal for me right now, but I still find myself thinking that it could be improved for readability purposes.

2 Likes
3

Thanks for sharing your thoughts @krievinshj.

You are right, it’s not a big deal and has no high priority.
As someone who spends a lot of time in the browser tools and checking/configuring elements, this inconsistency results in some confusion because there is no fixed pattern, as everything is dependent on the individual block setup which varies a lot.

So when I’m searching for a specific block, I need to go through all classes instead of just checking the first one.

1 Like