我喜欢这些 CSS 技巧 - 更好地管理你的 CSS

这几天有点忙（学校作业），不过今天还是写了这篇文章。这几天我学到了很多关于设计系统（原子设计）的知识，我一定会写一篇关于这方面的文章。之前我一直在浪费时间选择不同的设计组件，不过现在有很多可用的PatternLibraries。今天我想分享一些我正在使用的 CSS 技巧：

您可以像这样组织您的 CSS 部分：

\* ------------------------------- *\
      #SECTION-TITLE
  /* ----------------------------- */ `

该部分的标题以井号 (#) 符号为前缀，以便我们执行更有针对性的搜索（例如 grep 等）：而不是仅搜索 SECTION-TITLE（这可能会产生许多结果），对 #SECTION-TITLE 进行更广泛的搜索应该只返回有问题的部分。

您可以像这样对齐常见或相关的声明：

.foo {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

它确实可以帮助您更好地理解属性并且更容易阅读。

这并非 CSS 技巧，但与 CSS 有某种关联，并且只有在使用带引号（单引号或双引号）的 HTML 属性时才会起作用。95% 的程序员使用引号来为属性添加引号，以获得更好的支持。您可以使用 [ ] 方括号来组织 CSS 类。

div class="[ box box-green] [ bio bio-long ]">

以不同的方式组织自定义类和框架类将非常有帮助。

ul.nav{}
/* ul*/.nav {}

我们使用 CSS 选择器来指定，例如这样ul.nav或这样div.nav。但有时你可能会陷入具体的设计中。不过，你可以使用像这样的方法/*ul*/.nav。它仍然能让你了解你在 DOM 中使用的元素，并提高可读性并增加特异性。

我刚刚介绍了 3 个技巧，它们真的很有用。你可以在这里阅读完整的样式指南https://cssguidelin.es/。以上就是关于我的一些信息：