Add Block level abstraction

[d3dc]

It seems natural to parallel BEM - Block Element Modifiers - for the abstractions present.

Right now, I have Box that is the only element in the global block with "mixin" utility modifiers. There's a lot of awkward <Box componentName ... /> and I'm sure there are Namespaces that don't translate well.

Your React code follows a similar pattern, too. For example a Card might have Card.Header and Card.Text. The API should look the same?

An idea I have is to use a proxy:

const SB = block('StyleBlock')

<SB.Element modifier={value} />

StyleBlock__Element StyleBlock__Element--modifier-value

I think this would also be a great way to make CSS Modules more compatible.

questions

• [x] Are proxies supported wide enough?

We just use the proxy to make accessing elements lazy. In most situations, there shouldn't be an alarming number of styles in a single module and it should be performant to brute-force it. I'm also considering a "pick" argument.

• Are there other simpler ways to express this?

This is still a good question. I considered making element stuff just properties on Box. You end up making your own curried versions of Box and there's no point. You could also write a wrapper that injects these things, but is that simpler?

• Can it be done without any constants in javascript?

The element level allocation allows you to re-export your CSS modules with new functionality in each of your feature modules. CSS modules already produce javascript interop, this just extends it at runtime and needs to be cached.