Discussion
I hate to over-simplify, but here's what I recommend for a #CSS architecture:
- use selectors for selecting (not for specificity)
- use data-attributes for grouped selector patterns
- use at-layer for layering selector priority (widely available)
- use at-scope for scoping selectors (newly available)
- use nesting for modifiers on a selector
@mia really love this approach, especially how the enum-y nature prevents accidental `.size-small.size-large` double-ups
There are other place grouping might happen. The thing I'm watching for a set of classes that could be grouped as their own (single-or-multi) select group with a name. If they have their own conceptual name space, especially if you're prefixing them already, maybe give them a new namespace!
@mia I would love a blog post with code block examples to help me understand this, if you find your to-do list inexplicably short…
Install bonfire.cafe
Get the full app experience
Grouped selector patterns are things like "utility classes" where you might have several different ".size-something" all prefixed. Switch to [data-size=something] to group those in a unique namespace.
Scoping breaks up the 'block_element' part of BEM, and nesting breaks up the 'element-modifier' part.