0

请帮助我确定哪种方法更好（在 html 标记中有 2 个类或 2 个具有相同属性的类），为什么？

方法一 

<html><body>
     <p class="redColor buttonHeight"> button Red</p>
     <p class="blueColor buttonHeight"> button Blue</p>
    </body></html>

    .redColor{color:red}
    .blueColor{color:blue}
    .buttonHeight{height:10px}

方法二

<html><body>
 <p class="redColorHeight"> button Red</p>
 <p class="blueColorHeight"> button Blue</p>
</body></html>

.redColorHeight{color:red}
.blueColorHeight{color:blue}
.redColorHeight,.blueColorHeight{height:10px;}
4

2 回答 2

3

试着让你的类更通用，并给它们起名字来暗示它们的目的而不是它们的实现，例如button-importantand button-info。以非常特定的名称调用 CSS 类redButton并不是一个好习惯。

我相信这是一个更好的做法：

 <p class="button button-important"> button Red</p>
 <p class="button button-info"> button Blue</p>

.button {
    height: 10px;
}
.button-important {
    color: red;
}
.button-info {
    color: blue;
}
于 2013-10-25T05:49:21.040 回答
0

这完全是关于您想要提取哪些属性是常见的。例如，如果您的应用程序中的所有按钮都应具有相同的高度，请使用 Itay 建议的方法。将高度定义放在按钮类的样式中。如果不是这种情况，并且您不想使它们保持完全相同的高度，则可以使用第二种方法。

Css 为我们提供了一个类，我们应该将它们用作一个类。我的意思是像 java 中的类一样使用它们。一个类描述了对象的一些常见属性。在这里，我看到了一个按钮对象。没有颜色和高度对象:-)

您可以检查例如 twitter 引导框架。只需转到引导页面，在您喜欢的浏览器中打开一个 DOM 查看器，然后分析类如何描述特定的“组件”。

于 2013-10-25T06:21:27.880 回答