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
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.
@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
@mia my ideal setup (once support is good enough):
- selectors for selecting
- data attributes for variations (like your data-size). But still specific to one selector/element, not shared or grouped
- at-layer only when dealing with 3rd party stylesheets. Specificity is a really nice tool if you master it and too much at-layer kinda clobbers it.
- at-scope for scoping
- nesting for conditions and states (any conditional at rule and any pseudo class like :hover)