如何在没有特异性的情况下覆盖类？

Question

我有一个3个scss文件，分别是base.css，layout.css和contents.css。我将它们声明如下：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="contents.css">

base.css用于默认的元素样式。我对layout，header以及网站的footer使用了wrapper。至于contents.css，这个名字不言而喻。是的，这是网站的所有内容。由于我单独得到它，我实际上并没有使用特异性。例如：

base.css

input {
  padding: 12px 0 12px 0;
}

layout.css中

layout-wrapper{
  /*some styles*/
}

contents.css

input {
  font-size:1.5em;
  padding: 2px 0 2px 0;
}

而不是覆盖input的{​​{1}} contents.css，base.css的样式先被读取，然后是contents.css。我想知道为什么它对input不起作用，因为在其他元素中它很好。如果我在input元素中添加一个特异性，我可以实现我的目标，但它看起来像这样：

contents.css

 layout-wrapper{
          /*some styles*/

    input {
      font-size:1.5em;
      padding: 2px 0 2px 0;
    }
 }

这会破坏分离布局和内容的目的。所以我的问题是如何从内容中覆盖输入样式而没有任何特异性？

Answer 1

即使分离了文件，特异性也是问题的答案，其他人可能会说使用!important，但不惜任何代价避免这种情况。

Answer 2

你应该给出默认的diff类名或元素名，比如make it default-input for default css