Shared State

[chriseppstein]

I've been wondering if we should have a syntax for creating a state that is shared across all classes.

An example use case for this would be a the gutter and last states for a float-based grid block.

Using Sass, you can create mixins to simplify this process, but I'd like the block syntax to be usable without a preprocessor.

/* example.block.css */
.foo {
   margin: 10px;
}

.bar {
  margin: 18px;
}

*[state|last] {
   margin-right: 0;
}

Would then compile to:

.example__foo { margin: 10px; }
.example__bar { margin: 18px; }
.example__foo--last,
.example__bar--last { margin-right: 0; }

Maybe it's not common enough to warrant addressing with specialized syntax, but I thought I'd write it down for discussion at some point.

[amiller-gh]

Update: Because we now require all states to have their :scope prefix in block files, we have the "bare" attribute syntax at our disposal again! Shared state syntax is as easy as:

/* example.block.css */
.foo {
   margin: 10px;
}

.bar {
  margin: 18px;
}

/* Shared `[state|last]` styles */
[state|last] {
   margin-right: 0;
}

/* `.bar` specific `[state|last]` styles */
.bar[state|last] { 
   color: red;
}

Question: May shared states be applied to all class-like selectors in a Block, including :scope, or just children classes?

[chriseppstein]

We should support both *[state|foo] as well as [state|foo] — they are semantically identical.

And I would expect it to match the root by default. I think there’s use cases around only matching some of the elements. For that I think we can still use vanilla css selectors:

• :not(:scope)[state|a-common-state] - only match elements that aren’t the root.
• :not(:scope,.first,.last)[state|a-common-state] - match all classes except the root and two special classes first and last

[amiller-gh]

We'd need to loosen that restriction on not using :not() :)

Should we wait on the :not(:scope) syntax until we figure out a larger plan for :not()? It'd be nice to not have too many special case rules for users to think about. I'd love to be able to say something simple like: "using :not() is allowed as long as the contents are all block selectors".