因此，首先-这不是一场普通的战斗。 它不是关于CSS与CSS-in-JS ，不是atomic CSS与BEM ，不是LESS与SASS 。 这场战斗是关于秩序的。
这场战斗是在ORDER和CHAOS之间。 在ORDER和之间，... 另一个 ORDER。 简而言之-一种更好的CSS 属性排序方法。 不多不少。
简而言之-有3种方法可以做到：
- 不要做 尽可能编写任何CSS。 这是最流行的方式
- 按意义对属性进行分组。 只是把一些东西放在一起。 这是一种非常流行的方式。
- 按字母顺序排列所有属性。 最简单但不那么受欢迎的方式。
从现在开始，让我们忘记第一种方法。 不是这样
2012年
css-tricks进行了很好的民意测验 ，结果如下：
已经是2019年了，发生了什么变化？
alpha sort ， 众所周知的ABCSS和grouping之间的区别是很合理的，但最好弄清楚
初始状态
让我们从这个漂亮的问题开始，从理想的混沌开始
.wrapper { top: 20px; margin-left: 20px; display: flex; position: absolute; height: 100%; margin-bottom: 20px; border-radius: 5px; color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; border: 1px solid red; }
漂亮吗 这就是几年后不受任何控制的普通CSS的样子。
ABCSS
按字母顺序排序
.wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; position: absolute; top: 20px; width: 100%; }
它只是帮助我们注意到我们有两个margin-lefts 。 下次添加新属性会更容易，尤其是如果所有排序都是在stylelint级别自动完成的stylelint 。
字母排序的主要优点 -易于定位属性。 您只是在扫描表，就像词汇表一样，是的，这是我要查找的属性。
主要缺点 - height在width之前， left在top之前，并且它们之间有一定距离。 按字母顺序排序是混合上下文 。
我已经使用了一些在线工具来做到这一点。 大量的在线工具，用于IDE的插件和CLI工具都支持开箱即用的alpha排序。 -易于使用。
团体
分组排序
.wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; }
这次更多的separation of concerns -所有属性都按某种意义进行分组（聚类）。 排序原理称为“从里到外”
- 布局属性（位置，浮动，清除，显示）
- 盒子模型属性（宽度，高度，边距，填充）
- 视觉属性（颜色，背景，边框，框阴影）
- 版式属性（字体大小，字体系列，文本对齐，文本转换）
- 杂项属性（光标，溢出，z-index）
问题是-围绕着不止一种标准 。 更具体-超过五个。 那是个问题。 还是不行
而且，这一次，排序是通过CSSCOMB工具完成的。
主要优点 -所有属性均按常识分组。 所有的弹性特性-一起使用。 所有位置，左，右，上，下-在一起。
- 如果您需要添加一些东西，请添加到某个地方，然后让工具来完成。
- 如果您需要查找某些内容-寻找一个小组，然后在小组内部寻找。 顺便说一句-这比以前的情况下的线性搜索要快。
这需要一些澄清：
- 使用alpha排序-您正在寻找行的开头，指向“您的”第一个字母的开头和结尾。 然后，您会想到该子块就完成了。 基本上是O（n）。 经过一些训练-O（n / 2），只要您知道在哪里“寻找道具”即可。
- 使用组排序-您知道在哪里寻找道具-组具有恒定的位置，然后遍历较小的子集，然后完成了。 基本上是-O（3），而不是“ n”。
主要缺点 -您必须学习如何分离问题。 99％的受访者表示，这是一个大问题-编写分组 CSS，但这是一项工具工作，而不是您的工作。 而且，是的，有不止一个标准，但是通过工具完成订购并不是问题。
民意调查
因此，我对此问题进行了一些研究。
- 2012y，css-tricks报告45％的开发人员使用小组，14-alpha排序，39不使用任何东西
- 今天创建的民意调查（尚未完成）-小组50％，阿尔法25％，25％不使用任何内容
使用小组的最佳理由：
- 分组是将事物组合在一起的最自然的方式：这就是您编写它们的方式。 想象一下，如果您必须按字母顺序在句子中写单词。 上，右，下，左自然地属于在一起，恰好在位置之后：绝对（ twitter ）。
- 组可能是原子CSS的一个很好的理由-原子/实用程序通常绑定到一个“组”，这是功能框架的自然方法。 因此，“普通” CSS可能看起来像合并的原子-即分组（ twitter ）。
- 较小的团队可能更喜欢将相关属性（例如，定位和箱型模型）聚类到idiomatic-css 。
- 两种方式都有优点和缺点。 一方面，字母顺序是通用的（至少对于使用拉丁字母的语言而言），因此对于将一个属性排在另一个属性之前没有争议。 但是，看到底部和顶部之类的属性不相邻时，对我来说似乎很奇怪。 为什么动画应该出现在显示类型之前？ 字母顺序有很多奇怪之处。 另一方面，按类型对属性进行排序很有意义。 收集与字体有关的每个声明，重新组合顶部和底部，并阅读规则集，就像阅读短篇小说一样。 SASS指南 。
- 使用gzip后，按组排序的文件要小2％。 魔力 本文介绍了5种订购CSS道具的不同方法。 研究
不使用的一些原因
- 如果“团体”对每个人都意味着同一件事，那就太好了。 通常不会。 您可能可以自动执行分组，然后就变得无所适从。 叽叽喳喳
- 较大的团队可能更喜欢按字母顺序排序所带来的简单性和易维护性。 再次习惯用css
使用字母的原因：
- 我以前是按“小组”来做的，但这太主观了。 另外，还有很多附加组件可以对Alpha进行一系列行排序。 Chrome Dev工具的计算样式也是alpha。
- 按字母顺序。 其他任何事情都意味着进入该项目的任何人也需要学习您的模式。
- 我自己的公司正在使用alpha排序（这让我感到惊讶）。
- google css指南推荐ABCSS，无需解释。
因此，TLDR
- 我们大多数人（通常包括我在内）都对CSS道具的订购一无所知。 我们大多数人也不会对CSS本身感到讨厌。
- CSS-in-JS也不太鼓励最佳实践。
- 原子CSS之类的最佳实践是具有分组（根据设计）的最佳实践，而不幸的是，BEM与属性排序无关：(
实际上有点意外，这种自以为是的东西没有很好地建立和定义，我必须写这篇文章。
有趣的事实-组和字母顺序可能是最好的选择，例如，可以使模块导入更容易 ，例如eslint-plugin-import
首先有组，并且仅在一个组内使用字母顺序。
到目前为止，我听到了关于grouping相当合理的论据，但是没有一个（对我来说是合理的）pro alpha排序。
另请参阅：
选择您的一面，并说明您的位置。 我有一些爆米花可以分享。