我如何编写 CSS 选择器

CSS 方法有很多，但我都讨厌它们。有些多（顺风等），有些少（BEM、OOCSS 等）。但归根结底，它们都有缺陷。

当然，人们使用这些方法有充分的理由，并且解决的许多问题我也遇到过。因此，在这篇文章中，我想写下我自己的关于如何保持 CSS 井井有条的指南。

这并不是一个任何人都可以开始使用的完整描述的 CSS 方法。也许它可以通过一些额外的工作变成一个，但这篇文章的目的只是展示我在编写 CSS 时如何做出这些决定。

内置元素

根据经验，我尝试尽可能多地使用内置元素类型，并尽可能少地使用额外的内容。

立即学习“前端免费学习笔记（深入）”；

需要上千种不同类型的按钮，这表明设计可能在更深层次上存在问题，因此，在某些情况下，我觉得 CSS 在使用特定于框架的类之前是惰性的。 ，在大多数情况下，当按钮只是 Click Me! 并且看起来像一个没有任何进一步魔法的按钮时，我认为它是理想的。

div.btton 应该变成按钮

自定义元素

并非所有设计元素都具有语义上合适的 HTML 等效项，对于这些情况，我通常采用自定义元素。

我还没有看到很多在没有任何附带 JavaScript 的情况下使用自定义元素名称的实例，但它已被证明是编写清晰的 HTML 的一个令人惊讶的可靠选择，而且看起来也符合我想要的方式。

随着时间的推移，在设计方面完全独立的元素也更有可能开发出只能使用 JavaScript 实现的需求，这为您提供了一条清晰的路径来实现那些不需要对 HTML 进行任何更改也不需要进行任何更改的需求。 CSS。

div.vsep 应该变成垂直分隔符

课程

类应该充当现有节点名称的修饰符，而不是全新的元素类型，并且通常对不同的元素类型具有相似但不同的效果。

危险按钮就是按钮。危险

属性

某些修改元素的方法并不是类有用的简单开/关开关，而是更像键值对。

在这些情况下，具有匹配选择器的自定义属性几乎每次使用它们时都被证明是最佳选择。与带连字符的类不同，它们在语法级别上显示哪个是属性，哪个是值，使编辑器更容易突出显示它们，更容易人眼快速解析，并且更容易使用 JavaScript 进行交互。

对于我们这些仍然希望 attr() 函数有一天能够进入 CSS 的人来说，这不仅仅是内容，这也是面向未来的额外一层。

ID

根据定义，ID 在文档中是唯一的。因此，任何针对特定 ID 的规则都将受到限制，并且如果后来发现lage 上应该存在多个这种类型的元素，则可能需要重构。

因此，应谨慎使用 ID，并且仅当一个文档中包含多个元素没有意义时才应使用 ID。

在实用性和可读性方面优于类的好处相当小，因此，当无法识别元素和样式之间明确的一对一关系时，选择类通常是最好的主意。

内联CSS

任何现实世界的应用程序在某些时候都会有一些元素，只需要单独调整，以使它们在出现的上下文中更加美观。

在这些情况下，样式属性就是正确的选择。任何使用它被认为是不好的做法的原因都适用于任何类型的内联样式，包括实用程序类。问题不在于属性，而在于样式和标记的混合。

内联样式的 style 和 class 之间的一个区别是，一个表示目的，允许使用纯 CSS 并且大多是通用的，而另一个则不然。

简单地说，width: 100px 具有通用定义的含义，而 .width-100 可以表示任何含义。

实用程序类

在极少数情况下，特定于元素的样式变得如此复杂，以至于显式内联它们会损害可读性，甚至是不可能的（例如，如果它需要媒体查询）。

在这些情况下，实用程序类基本上是唯一的选择，即使它们很丑陋。

在理想的世界中，这些可以与特定的 mixin 类分开处理，我什至考虑过使用前缀来更容易地区分它们，但最终没有找到一个好方法让它们不难看。

我喜欢在实用程序类前面加上 + 前缀来表示它们向元素添加某种功能，与指定元素类型的普通类不同。

红色浮动按钮

就是这样。当然，没有两个项目是相同的，有时必须稍微调整规则才能保持实用，但总的来说，这是我决定如何使屏幕上的事物看起来某种方式的框架。

你有什么想法？你讨厌它吗？你觉得有道理吗？在评论中让我知道?