css - 使用第 nth-child 还是在 CSS 中创建新类？

Question

我刚刚开始我的第一个元素，即构建一个管理面板。我的任务是创建 HTML 和 CSS - 一种设计基础，可以进一步处理后端开发人员。
我被要求保持 CSS 简单，类尽可能具有描述性(可能很长)并使用 Bootstrap。

为了避免创建可以使用一次或两次的不必要的类，我决定使用 :nth-child 因为我认为为每一列提供新类太多了。此外，我创建了几个可用于添加 0px 填充和边距的基类。

不幸的是，随着我编写越来越多的代码，我注意到一些 CSS 代码如下所示:

.print-history-advanced-search > [class*='col-']:nth-child(5) > .form-group > .form-horizontal > .form-group > [class*='col-']:first-child

而且它不是单行。

此外，我注意到有时当我创建一个新类并且它有很多父元素时，我不能自己编写 CSS 选择器，但我需要声明这个特定元素的父元素和把类(class)放在最后，这是没有意义的。

有什么解决方案可以避免创建仅在一个或两个 div 中使用的类，同时使 CSS 代码不那么困惑并避免使用非常长的名称？或者也许我应该放弃 child 和嵌套而只使用类？

感谢您的帮助! 祝你有美好的一天!

Answer 1

如果您想编写好的 CSS，那么我建议您使用 BEM model是下山的好路线。

要点是；

• 没有元素/选择器继承
• 不在选择器中使用元素
• 仅基于类的样式

BEM 代表 Block、Element、Modifier - 这就是类名的构成方式。从他们的网站借用一个例子；

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

可以看到有一个form block ，然后是一个form__input和form__submit元素，然后是一个form__submit--disabled 修饰符。