7 ms·

In their example, they list btn-* as the selector catch all for .btn-primary|secondary|danger. I can't help but think why not just do, .btn.primary for the clas

by jjcm 28d ago

In their example, they list btn-* as the selector catch all for .btn-primary|secondary|danger. I can't help but think why not just do, .btn.primary for the class name, and just target .btn with the selector? Don't get me wrong, I appreciate the convenience of this, but I do worry about selector slowdown with what will effectively turn into a regex at some point. I'm dubious that this is needed.

Gualdrapo 28d ago
I don't think they will go that far. Just look at the attribute selectors, - they're just 5 of them: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/S...
graypegg 28d ago
I have noticed it's pretty common for devs used to CSS-in-JS to imagine classes as being an exact 1:1 mapping to a specific DOM element, so maybe this is aiming to simplify things for that crowd? I guess similarly to BEM class names from a several years back. Personally I prefer `class="btn primary"` over `class="btn-primary"` just because it aligns conceptually with what "class" literally means, but I have run into folks that would think it's confusing that there's no top-level .primary rule. For performance... ehhhh yeah. Nesting and :has() already let you easily slow stuff down if you're not careful. Adding just wildcards, even if they're as restrictive as the blog post talks about, is still going to hang another easy-to-reach footgun on the proverbial wall.
- nhinck2 28d ago
  > Personally I prefer `class="btn primary"` over `class="btn-primary"` just because it aligns conceptually with what "class" literally means, but I have run into folks that would think it's confusing that there's no top-level .primary rule. Especially now that there is native nesting, these prefix selectors really seem like the wrong way to go.
theandrewbailey 28d ago
Even better: <button class="primary> button.primary { ... }
- ChiperSoft 27d ago
  Then you still need a btn class for styling anchor tags
  - DHPersonal 27d ago
    The proposed mixin support in CSS will offer a way to reference both button.primary and a.primary without having to duplicate the styles in both, but it’s still in draft status.

by jjcm 28d ago

Gualdrapo 28d ago

I don't think they will go that far. Just look at the attribute selectors, - they're just 5 of them: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/S...

graypegg 28d ago

I have noticed it's pretty common for devs used to CSS-in-JS to imagine classes as being an exact 1:1 mapping to a specific DOM element, so maybe this is aiming to simplify things for that crowd? I guess similarly to BEM class names from a several years back. Personally I prefer `class="btn primary"` over `class="btn-primary"` just because it aligns conceptually with what "class" literally means, but I have run into folks that would think it's confusing that there's no top-level .primary rule. For performance... ehhhh yeah. Nesting and :has() already let you easily slow stuff down if you're not careful. Adding just wildcards, even if they're as restrictive as the blog post talks about, is still going to hang another easy-to-reach footgun on the proverbial wall.

nhinck2 28d ago
> Personally I prefer `class="btn primary"` over `class="btn-primary"` just because it aligns conceptually with what "class" literally means, but I have run into folks that would think it's confusing that there's no top-level .primary rule. Especially now that there is native nesting, these prefix selectors really seem like the wrong way to go.

theandrewbailey 28d ago

Even better: <button class="primary> button.primary { ... }

ChiperSoft 27d ago
Then you still need a btn class for styling anchor tags
- DHPersonal 27d ago
  The proposed mixin support in CSS will offer a way to reference both button.primary and a.primary without having to duplicate the styles in both, but it’s still in draft status.