How to override the class without specificity?
<p>I have a 3 scss file which are the <code>base.css</code>, <code>layout.css</code> and <code>contents.css</code>. I declare them as the following:</p>

<pre><code>&lt;link rel="stylesheet" href="base.css"&gt;
&lt;link rel="stylesheet" href="layout.css"&gt;
&lt;link rel="stylesheet" href="contents.css"&gt;
</code></pre>

<p><code>base.css</code> is for the default styles of elements. I use the <code>layout</code> for the <code>header</code>, <code>footer</code>, and also the <code>wrapper</code> of the website. As for the <code>contents.css</code>, the name speak for itself. Yes it is all the contents of the website. Since I got it separately, I don't practically use specificity. Like for example:</p>

<p><em>base.css</em></p>

<pre><code>input {
  padding: 12px 0 12px 0;
}
</code></pre>

<p><em>layout.css</em></p>

<pre><code>layout-wrapper{
  /*some styles*/
}
</code></pre>

<p><em>contents.css</em></p>

<pre><code>input {
  font-size:1.5em;
  padding: 2px 0 2px 0;
}
</code></pre>

<p>Instead of overriding the <code>input</code> of <code>contents.css</code> the style of the <code>base.css</code> gets read first and then comes the <code>contents.css</code>. I wonder why it doesn't work for <code>input</code> because in other elements it was fine. I can achieve my goal if I put a specificity in my <code>input</code> element but it would look like this:</p>

<p><em>contents.css</em></p>

<pre><code> layout-wrapper{
          /*some styles*/

    input {
      font-size:1.5em;
      padding: 2px 0 2px 0;
    }
 }
</code></pre>

<p>This would defeat the purpose of separating the layout and the contents. So my question is how can I override the input style from contents without any specificity?</p>