Question

在我的sass中我渴望它不会失控，我有一个简单的问题/示例我想知道的是在示例中定位按钮的最有效方法是什么下面？

就个人而言，我喜欢选项2，但我做得对吗？

称之为挑剔，但我的问题如下所示，

选项1：在html中给出按钮类名称，以便在css中轻松定位

<div id = "box">
 <!-- Give button class/id -->
 <button class = "button1"></button>
</div>

选项2： _buttons.scss部分包含.button1类

在我的main.scss目标上，父容器#box没有按钮，在html中有一个类名，然后是目标嵌套按钮

buttons.scss

.button1 {
 width: 100px;
 height: 100px;
 background-color: grey;
}

main.scss

@import 'components/buttons.scss';

#box {
 button {
  // Extend class from buttons.scss
  @extend .button1;
 }
}

Answer 1

我认为这取决于您为不同按钮使用样式的频率。拥有＆＃39;框＆＃39;虽然看起来非常具体。你不会有其他盒子吗？如果是这样，这需要是一个类而不是id。

而不是针对父级并为孩子设计样式（当你想要设置没有父母的元素时会发生什么），我只是在按钮本身上设置类的样式。

第一个选项 - HTML中只需要一个类

.button1{
    /* button css */
}

第二个选项 - 需要id属性，特定HTML层次结构，更多CSS输出

#box button, .button1{
    /* button css */
}

Answer 2

关于什么＆＃34;最有效＆＃34;的答案很多。当谈到SASS时，部分取决于你的完整SASS配置会是什么样的，所以基于一个具体的例子很难说。

您是否需要在多个样式表中使用此按钮的样式？

例如，如果你只有一个样式表（main.scss），我说没有理由使用部分样式表。当您需要在多个样式表中包含部分项时，应使用部分。例如，许多人将部分编写所有变量和mixin，并将它们包含在每个样式表中。

鉴于这一个具体的例子，更有效的做法是不使用部分。

在按钮中添加一个类并在css中定位该类，或者定位容器和子元素（没有类）同样有效：

#box button {}
button.button1 {}

此外，如果您没有#box父级内的其他规则，则没有理由在这里筑巢：

#box {
 button {
 }
}

这样做：

#box button {}

（并且要小心延伸。如果在他们并不真正需要的地方使用，你最终可能会得到一些不必要的风格规则。See this great article。）