在一个规则中，按什么样的空间顺序排布CSS声明好?

Question

在一个规则中，按什么样的空间顺序排布CSS声明好?

css的属性涉及到一个元素样式的很多方面，例如如字体、颜色、大小、布局、动画等等。

我通常是按照类别的顺序，将所有和字体相关的设置放在一起，将布局相关的设置放在一起...

我觉的按照这样的空间顺序排序有以下的好处:

• 当我需要更改某一方面的样式的时候，可以很轻松的找到它们。
• 当我设置完字体相关的属性之后，在去设置其他方面的属性的时候，就不需要耗费很多的精力去考虑它们了。如果我是想到哪就设置哪个属性，我还需要记住之前设置了哪些属性，现在我只需要知道哪些类别的属性已经被设置好了。
• 更容易地做到需要设置的属性没有遗漏（设计图上需要的效果尽可能的完成）

但是，我看别人的一些css，一个类别的一些属性设置穿插在了一个规则中的各个地方，并没有聚在一起。

• 按照类别组织方法有什么问题吗?
• 有其他别的什么方式吗？
• 该如何更好的组织css声明在一个规则中的空间顺序，可以让我们在书写、修改css的时候更容易呢?

Answer 1

csscomb，专门干这个的。可以看看。

https://github.com/csscomb/csscomb.js/tree/ce7ad831bd9b7fddb660c59afbbaf183c98d6ca7

Answer 2

其实无所谓，前端做久了，发现怎么排都没有什么差别。

所以现在我用 TailwindCSS，并强烈推荐 TailwindCSS。