title: Overriding certain style in SCSS
body: <p>I would like to add a disclaimer that initially I was thinking to write this in <code>code review</code> but since I won't be able to provide fully working code, I decided that <code>SO</code> would be a better place for this question.</p>
  
  <p>That being said I have a form (more complicated but I think this is enough)</p>
  
  <pre><code>&lt;form class="regular-form"&gt;
      &lt;label for="fname"&gt;First Name&lt;/label&gt;
      &lt;input type="text" id="fname" name="firstname" placeholder="Your name.."&gt;
  
      &lt;label for="lname"&gt;Last Name&lt;/label&gt;
      &lt;input type="text" id="lname" name="lastname" placeholder="Your last name.."&gt;
  
      &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Where <code>.regular-form</code> resides in it's own file <code>regular-form.css.scss</code> and describes common styling for all form on the site. More specifically we have this:</p>
  
  <pre><code>.regular-form {
    ..
    input { width: 100%; }
  }
  </code></pre>
  
  <p>However on some places <code>width: 100%</code> is not fitting well so I need to decrease it, but still maintain a common look &amp; feel on the site, which means that I want the styling applied on the forms that need to be tighter to be the same everywhere.</p>
  
  <p>I solved this problem by introducing new class <code>.small-size</code> and my question is regarding the usage of this new class.</p>
  
  <p>Eventually what I would like is to be able to do this:</p>
  
  <pre><code>&lt;form class="regular-form small-size"&gt;
  </code></pre>
  
  <p>But with my limited knowledge on <code>SASS/scss</code> the only way I can achieve this behavior is by adding the <code>.small-size</code> class inside the <code>regular-form.css.scss</code> file underneath the <code>.regular-form</code> styles like so</p>
  
  <pre><code>.regular-form {
    ..
    input { width: 100%; }
  }
  
  .small-size { 
    input { width: 50%; }
  }
  </code></pre>
  
  <p>And while that <code>.small-size</code> is placed after <code>.regular-form</code> class I will be able to apply them on the same level. But this relaying on keeping the order like this forever feels like a wrong way to do it. If someone comes at a later point and introduce some changes so that the order is no more preserved, out of the blue the form will look different and I think this is a big minus of this approach.</p>
  
  <p>The second approach that I can think of is nest the <code>.small-size</code> class inside <code>.regular form</code> like so</p>
  
  <pre><code>.regular-form {
    ..
    input { width: 100%; }
    .small-size { 
      input { width: 50% }
    }
  }
  </code></pre>
  
  <p>Now I'm more confident that the styles won't break that easily, if someone is changing the styling at later point, he most probably will take into consideration that <code>.small-size</code> is nested and will inspect it's usage, however if I choose this approach the only way that I found so far in order to enforce the <code>.small-size</code> styling is by introducing new <code>&lt;div&gt;</code> to the form like so</p>
  
  <pre><code>&lt;form class="regular-form"&gt;
    &lt;div class="small-size"&gt;
      &lt;label for="fname"&gt;First Name&lt;/label&gt;
      ..
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But now I'm changing the existing <code>DOM</code> structure and also make the process of applying the new styling more difficult.</p>
  
  <p>Eventually what I would like to have is nested class like so:</p>
  
  <pre><code>.regular-form {
    ..
    input { width: 100%; }
    .small-size { 
      input { width: 50% }
    }
  }
  </code></pre>
  
  <p>And being able to apply it's styling like so</p>
  
  <pre><code>&lt;form class="regular-form small-size"&gt;
  </code></pre>
  
  <p>I know that this somewhat contradicts with the general <code>CSS</code> rules but since I'm writing <code>scss</code> here I was thinking that there may be a way to make this work, or at least something better than the two options that I have right now.</p>