与其他与网络相关的语言相比, 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/