0

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

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

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

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

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

4

2 回答 2

3

好的，我认为首先需要澄清一些事情，那就是语义样式。您在这里所做的只是将静态样式应用于按钮，这很好，但是您给它的名称非常具体。你是说一些按钮会是红色的，并这样命名它们。

但更进一步，如果你决定那种类型的按钮应该是蓝色的呢？还是绿色？你应该做的是使用一个类名来解释你为什么要设置这个按钮的样式。考虑一下，并不是所有的红色按钮都是主要操作，而是您的主要操作按钮都是红色的。因此，要从Bootstrap 的术语中窃取，您不会给出“按钮红色”的类，而是“按钮主要”或“按钮错误”的类 - 以说明您实际尝试完成的含义.

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

.popup .button.primary {}

这种分离使您的代码看起来更好，并让您从一般性开始并随着您的需求变得更加具体而变得更加具体，这从编程和风格的角度来看都是有帮助的。

于 2013-08-03T17:02:00.173 回答
3

该指南的基本原理是，您希望按钮为红色，或者为什么您希望段落缩进，或者为什么您的列表应该被隔开，一定有一些原因。

当 class 属性中的文本说明 HTML 的片段所描述的内容时，HTML 的阅读效果就会好得多。关注点分离的想法，一个非常被接受的做法表明

  • HTML 应该只包含结构信息
  • CSS 应该只包含展示信息
  • 脚本应仅包含交互式信息

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

在实践中，您的 CSS 可能没有任何理由会变大。你总是可以说

button.warning, p.notice, ul.stop {
    color: red
}
于 2013-08-03T16:58:30.013 回答