Question

我发现自己现在略微改变了我写css的方式，而且我不确定它是好还是坏。想象一下，我有一个班级container

.container { display: block; border: 1px solid red; padding: 20px; height: 400px; }

现在让我们说在一些地方我也想要一个150px高的小容器。最好的方法是什么？

以前我会上课：

.container-small { display: block; border: 1px solid red; padding: 20px; height: 150px; }

然而，显然现在我的css文件中有复制。所以最近我开始使用修饰符类small并将其添加到container旁边的HTML中，并将其添加到css文件中，如下所示：

.container.small { height: 150px }

我可以预见的问题是，如果我有另一个类banner，并且我将small类添加到那个但是要使其高度为90px，这可能会让其他人感到困惑看着我的项目？由于small在不同的地方做了不同的事情。这是否已经是一个被接受的范例，或者我是否应该每次使用新类，方式与我使用small的方式类似，但每个类都有新名称。

.container-small { height: 150px }

和

.banner-small { height: 90px }

我喜欢简单地添加small，big，wide或任何修改类到每个元素，但有什么具体的理由为什么这是一个坏主意？我认为使用像这样修改类的速度稍慢一些，因为css会在丢弃它们之前将目标放在small个标签上，因为它们位于错误的元素旁边，但可能是可以忽略不计的数量。

最佳做法是什么？

Answer 1

我认为你应该从阅读CSS方法开始。有3种不同的方法OOCSS，BEM，SMACSS，至少它们是最受欢迎的。例如，您可以使用此article

开始

Answer 2

最佳实践按年份和您与谁交谈的方式进行更改，但常见的范例是使用名称空间，例如

.container .container-small {}

我个人虽然

.container.small {}

然后使用Less或SASS将其嵌套以使其可读。

Answer 3

也许你应该将这些类分开，如

横幅，您只需放置文字大小，颜色和类型

small只有大小和边框颜色和大小

容器将具有与上面的flex容器属性相同的

等等等等

class="banner small"
class="container big"
class="inside_container small"

CSS最佳实践：添加修改类或创建全新类

3 个答案: