title: The correct styling is applied despite the targeting are different in JSX and CSS files
body: <p>Currently I have the following code:
  <code>FormInput.jsx</code>:</p>
  <pre><code>import './FormInput.scss';
  
  const FormInput = ({ label, ...otherProps} ) =&gt; {
      const { value } = otherProps;
      return (
          &lt;div className=&quot;group&quot;&gt;
              &lt;input className=&quot;formInput&quot; {...otherProps} /&gt;
              {label &amp;&amp; (
                  &lt;label 
                      className={`${value.length ? 'shrink' : ''} formInput-label`}
                  &gt;{label}&lt;/label&gt;
              )}
          &lt;/div&gt;
      )
  };
  
  export default FormInput;
  </code></pre>
  <p>In <code>FormInput.scss</code>:</p>
  <pre><code>.formInput-label {
      transition: 300ms ease all;
      position: absolute;
      font-size: 18px;
      left: 5px;
      top: 10px;
  
      &amp;.shrink {
          top: -14px;
      }
  }
  </code></pre>
  <p>What I'm confused about is that the targeted class of the <code>label</code> in <code>FormInput.jsx</code> should compile to:</p>
  <pre><code>.shrink .formInput-label
  </code></pre>
  <p>But the one in the SASS file will compile to:</p>
  <pre><code>.formInput-label.shrink
  </code></pre>
  <p>My question is how does the correct styling still get applied if the class targeting in the JSX and SASS files aren't the same? The JSX has the classes in reverse order and a space in between.</p>