使用 nth-child 或在 CSS 中创建新类？

Posted 2023-03-06

【中文标题】使用 nth-child 或在 CSS 中创建新类？

【英文标题】：Using nth-child or creating new classes in CSS?

【发布时间】：2017-06-11 18:07:02

【问题描述】：

我刚刚开始了我的第一个项目，它正在构建一个管理面板。我的任务是创建 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 选择器，但我需要说明这个特定元素的父元素和把课程放在最后，这是没有意义的。

是否有任何解决方案可以避免创建仅用于一两个 div 的类，同时减少 CSS 代码的混乱并避免使用过长的名称？或者也许我应该放弃孩子和嵌套并只使用类？

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

【参考方案1】：

根据您的需要，我建议使用css 预处理器，例如SASS、LESS。 您会发现，随着网站的发展，您会开发出一个包含各种元素和CSS 规则的很长的滚动列表。一些规则最终可能会重叠或相互覆盖（在这种情况下，通常更具体的规则会胜出）。

您最终可能会得到比您预期更多的代码，尤其是考虑到您需要针对不同浏览器和屏幕尺寸的规则的不同变体。

有很多方法可以重构您的 CSS 代码，使其更易于导航和使用。一些最简单的方法是最有效的并且具有最多的里程。以下是一些最快的：

Keep your spacing uniform：规则之间保持相同的间距 并在整个文件的声明中，以便更容易 阅读。 Use semantic or “familiar” class/id names: 而不是使用类 名称如“bottom_menu”，尝试使用语义标签“footer”。要么 当您的“联系人”部分中有图片时，请确保您 在你的图片上使用一个类，比如“contact_image” Keep it DRY（不要重复自己）：理想情况下，您希望重复 尽可能少的代码。你找到声明了吗 “background-color: #000” 在你的 CSS 文件中重复出现？考虑 键入一次，然后在一个上使用多个选择器 声明。 使用这些工具测试您的整洁性：运行您的 CSS CSS Lint 或 W3C——这些将有助于正确解析您的 CSS 文件， 并突出问题领域。您的web browser’s developer tools 是 对于精确定位您的特定元素也非常有用 网站并将该区域用作沙箱来尝试不同的 风格和定位。 查看here 了解更多信息

【讨论】：

感谢您的回答。不幸的是，我们决定在这个项目中不使用 SASS。但那是我的第一个想法。无论哪种方式，非常有帮助的答案。以后会知道的更好！

@nerwusik 这很重要

【参考方案2】：

如果你想写出好的 CSS，那么我建议 BEM model 是一个不错的选择。

要领是；

没有元素/选择器层次结构 选择器中不使用元素 仅限基于类的样式

BEM 代表块、元素、修饰符——这是你的类名的形成方式。从他们的网站借用一个例子；

.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 块，然后是一个form__input 和form__submit 元素，然后是一个form__submit--disabled 修饰符。