Parent class

[knownasilya]

Something like:

const green = '#33aa22';
const styles = csjs`
  color: #333;

  .panel {
    border: 1px solid black;
    background-color: ${green};
  }

  .title {
    padding: 4px;
    font-size: 15px;
  }
`;

console.log(styles.componentClass);

Where all of the styles inside are nested under this parent, making this much more useful for components since a component usually has a parent class.

Although, looking back, it wouldn't be as verbose or clear as the current approach. Guess I could use postcss for nesting.

[rtsao]

I think in a "scoped CSS" world, using descendent/child selectors is often discouraged because it unnecessarily introduces coupling between styles and DOM structure, which potentially makes your styles less flexible and reusable.

Since each class is scoped, a "parent" class isn't really necessary. But you're right, you can definitely use https://github.com/postcss/postcss-nested, but I guess I'm having trouble seeing the benefit.

[knownasilya]

Thanks for the link. I'm going to close this, since it was more of a thought exercise. Great module :+1: