Question

我理解上下文样式的基本概念以及为什么要根据父母和兄弟姐妹定义样式。但在某些情况下，似乎这只是添加了额外的css，我讨厌除非必要，否则必须写。以此为例。假设我的网站上有一个红色按钮，我定义为：

.button.red{
background-color: #ff0000;
color: #fff;
}

因此，我可以将以下代码放在任何地方：

<button class="button red">submit</button>

但我听说最好从你的html中删除“红色”或“绿色”样式并使用上下文样式。但这会导致大量额外的css根据它的父级编写每个红色或绿色按钮。任何人都可以阐明你为什么要这样做，或者这不一定是最好的做法。

Answer 1

此指南的基本原理是，必须有某些原因为什么您希望您的按钮为红色，或为什么您希望段落缩进，或为什么你的名单应该是间隔的。

当class属性中的文本说出HTML片段描述的内容时，HTML只会读得更好。分离关注点的想法，一个非常被接受的做法决定了

HTML仅应包含结构信息
CSS仅应包含演示信息
脚本应仅包含交互式信息

带有颜色的HTML违反了这种做法。

在实践中，可能没有理由说你的CSS应该大小爆炸。你总是可以说

button.warning, p.notice, ul.stop {
    color: red
}

Answer 2

好吧，我认为有些事情需要先解决，这就是语义造型。你在这里做的只是将静态样式应用于按钮，这很好，但你给它的名字是非常具体的。你说有些按钮是红色的，并将它们命名为。

但更进一步，如果你决定按钮的类型应该是蓝色怎么办？还是绿色？你应该做的是使用一个类名来解释为什么你正在为这个按钮设置样式。可以想一想，并不是所有的红色按钮都是主要动作，而是你的主要动作按钮是红色的。因此，从Bootstrap's术语中窃取，你不会给出“按钮红色”的类，而是“按钮主要”或“按钮错误”的类 - 用于说明你是什么意思实际上是想要完成。

这也有后来的好处，让你做一些事情，例如声明“弹出容器中的所有主要按钮都是绿色的”

.popup .button.primary {}

这种分离使得代码中的内容看起来更好，并且随着您的需求变得更加具体化，您可以开始一般化并随着规则变得更加具体，这从程序化和风格的角度来看都很有用。

根据上下文定义样式

2 个答案: