title: Nesting Emotion 10 classes for cascade
body: <p>Previously in Emotion 9 you were able to use Emotion class names to take advantage of cascade. You would wrap the emotion const in curly brackets and prefix it with a period, and then dollar sign. For example, you could do this:</p>
  
  <pre><code>const child = css`
    color: green;
  `;
  const parent = css`
    color: red;
    .${child} {
      color: yellow;
    }
  `;
  
  &lt;div className={parent}&gt;I am red&lt;/div&gt;
  &lt;div className={child}&gt;I am green&lt;/div&gt;
  &lt;div className={parent}&gt;
    &lt;div className={child}&gt;I am yellow&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I go about achieving this behavior in Emotion 10? That is my question.</p>
  
  <p>The following is further information about what happens when you don't use a period-dollar sign.</p>
  
  <hr>
  
  <p>Now, the following was and is desirable: if no period are used in Emotion 9 or 10, the parent const will inherit the nested const styles. And furthermore, if that nested const then has overriding styles, those would ultimately be inherited by the parent.</p>
  
  <pre><code>const child = css`
    color: green;
  `;
  const parent = css`
    color: red;
  `;
  &lt;div className={parent}&gt;I am red&lt;/div&gt;
  &lt;div className={child}&gt;I am green&lt;/div&gt;
  
  const child = css`
    color: green;
  `;
  const parent = css`
    ${child}
  `;
  &lt;div className={parent}&gt;I am green&lt;/div&gt;
  
  const child = css`
    color: green;
  `;
  const parent = css`
    ${child} {
      color: yellow;
    }
  `;
  &lt;div className={parent}&gt;I am yellow&lt;/div&gt;
  
  const child = css`
    color: green;
  `;
  const parent = css`
    color: red;
    ${child}
  `;
  &lt;div className={parent}&gt;I am green&lt;/div&gt;
  
  const child = css`
    color: green;
  `;
  const parent = css`
    color: red;
    ${child} {
      color: yellow;
    }
  `;
  &lt;div className={parent}&gt;I am yellow&lt;/div&gt;
  </code></pre>