Question

我发现在一些地方使用单个类来表示单个css属性。结果是这样的：

 <header>
    <h1 class="secondary-text-colour heading-large">@Messages("xxx")</h1>
    <span class="secondary-text-colour heading-small">@Messages("xxx")</span>
 </header>

我们可以看到heading-large仅用于设置字体大小，或primary-text-colour用于设置字体的颜色。

我对好设计的想法是这样的：

  <header>
    <h1 class="header-main">@Messages("xxx")</h1>
    <span class="header-subtitle">@Messages("xxx")</span>
  </header>

在第二个场景中，您可以为元素定义一个类，并使用css定义样式。

我真诚地认为这应该是如何使用CSS和类，但我需要正式解释才能在其他团队成员面前进行辩护。任何人都可以给我任何反馈吗？

Answer 1

这正是应该如何使用类的。它们为HTML的读者提供了一个语义抽象层。我鼓励你阅读这本关于SMACSS的书，它提供了对CSS体系结构的一般理解。

修改

您的想法不如原始方法模块化，有关此主题的更多信息，请参阅SMACSS书籍。也许您想要更改此新标题的颜色，但仍然具有与所有其他标题中相同的字体。如果每个都有一个选择器，如果字体稍后更改，则必须更改这两个位置。如果你有大型样式表并且在样本中搜索每个位置比在第一个地方写两个类要困难得多，那就更难了。

Answer 2

作为一个例子......你有一个非常大的项目，其设计需要许多带box-shadow的盒子。

如果您需要复制并粘贴：

-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);

对于每个具有阴影的容器类，您将向css表添加数百个不必要的行。但是如果你只是添加一个类，如：

.shadow {
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}

你只需要将类添加到html中阴影所需的任何容器中。

更快，更清洁，更轻松。

每个属性的类

2 个答案: