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选择器，但是我需要声明这个特定元素的父元素和将课程放在最后，这没有意义。

我是否可以使用任何解决方案来避免创建仅在一个或两个div中使用的类，还可以使CSS代码更少混乱并避免使用很长的名称？或者也许我应该放弃孩子和筑巢并只使用课程？

感谢您的帮助！祝你有愉快的一天！

Answer 1

如果你想写好CSS，那么我建议BEM model是一条很好的路线。

要点是;

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

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阻止，然后是form__input和form__submit元素，然后是form__submit--disabled修饰符。

Answer 2

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

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

有很多方法可以重构CSS代码，以便更轻松地导航和使用。一些最简单的方法是最有效的并且具有最大里程数。以下是一些最快的：

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

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

2 个答案: