css 排序_使用CSSComb排序和组织CSS

与其他与网络相关的语言相比， CSS 相对简单易懂 。 但是同时，也很难组织起来 ，尤其是涉及由数千行组成的代码时。

如果我们能够组织CSS并让其他开发人员更轻松地阅读和维护代码，那就太好了–如果您在团队中工作，这将非常有用。

在本文中，我们将向您展示如何使用称为CSSComb的工具对CSS进行排序和组织 。 但是首先，让我们看一个有关CSS属性排序的简短示例。

从技术上讲，CSS在订购属性方面没有任何限制。 以下示例...

.class {
		background-color: #f3f3f3;
		width: 100px;
		height: 100px;
		font-color: #000;
	}

…将输出与以下相同的结果：

.class {
		width: 100px;
		font-color: #000;
		background-color: #f3f3f3;
		height: 100px;
	}

但是，正如我们之前提到的，组织有条理将有助于您的队友轻松维护您的代码。 但是，对CSS代码进行排序需要大量剪切和粘贴操作，并需要考虑如何进行排序。 这就是CSSComb派上用场的地方。

如何使用CSSComb

CSSComb是由Slava Oliyanchuk构建的CSS排序实用程序 。 CSSComb 支持CSS2到CSS4 ，并且可以在许多流行的代码编辑器（例如TextMate，Coda，Notepad ++和Sublime Text）中作为插件或扩展来使用。

如果您使用Sublime Text，则可以通过Package Control轻松安装CSSComb。 安装后，您可以通过几种方式对CSS属性进行排序：

• 按下默认的组合键： Shift + Ctrl + C。
• 右键单击并选择： 通过CSSComb排序选项。
• 打开Command Palette – Command + Shift + P，然后选择“ 通过CSSComb排序” 。

在此示例中，我们具有以下样式规则。

.class {
	padding-top: 1px;
    border-left: 1px solid #fff;
    -moz-box-shadow:    0 0 1px 0 #000;
    -webkit-box-shadow: 0 0 1px 0 #000;
    box-shadow:         0 0 1px 0 #000;
    border-right: 1px solid #fff;
    height: 23px;
    padding-bottom: 10px;
    background-color: #fff;
}

上面的样式规则有效，并且没有什么问题，除了它有点杂乱无章。 现在，在运行CSSComb之后，将按以下顺序对属性进行排序。

.site-header > .container {
	padding-top: 1px;
	padding-bottom: 10px;
	height: 23px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	background-color: #fff;
	-webkit-box-shadow: 0 0 1px 0 #000;
	-moz-box-shadow:    0 0 1px 0 #000;
	box-shadow:         0 0 1px 0 #000;
}

上面是CSSComb中的默认排序规则，但是如果您不想这样排序，可以通过转到“ 首选项”>“软件包设置”>“ CSSComb”菜单，然后在“ 排序顺序”下设置新的排序规则来自定义订单–用户 。

翻译自: https://www.hongkiat.com/blog/css-sorting-with-csscomb/