我如何编写 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 類別分開處理，我甚至考慮過使用前綴來更容易地區分它們，但最終沒有找到一個好方法讓它們不難看。

我喜歡在實用程式類別前面加上 + 前綴來表示它們為元素添加某種功能，與普通類別不同，它指定元素的類型。

紅色浮動按鈕

---

就是這樣。當然，沒有兩個項目是相同的，有時必須稍微調整規則才能保持實用，但總的來說，這是我決定如何使螢幕上的事物看起來某種方式的框架。

你有什麼想法？你討厭它嗎？你覺得有道理嗎？在評論中讓我知道嗎？

以上是我如何编写 CSS 选择器的详细内容。更多信息请关注PHP中文网其他相关文章！