一、背景
與同事合作開發一個項目，后面修改 CSS 時，發現屬性順序跟我寫的不一樣
我從事開發前端時，導師是有給我大概指定了一定的書寫規范
現在開發時，看到的 CSS 屬性排序不一樣，看起來有點難受（代碼潔癖），修改起來也多少有點不方便
都說 JavaScript 代碼要求規范，那么我們仔細說說為啥 CSS 也要有：
注：
這里參考了知乎的一篇文章，他說的理由我表示贊同，這里直接拷貝放這里
1、
作為寫程序的人，除了希望代碼的輸出具有確定性;
即每寫一行代碼我知道我在寫什么，我能預知到結果，還希望從代碼風格上保持一致;
這樣在寫類似功能時，寫出來的東西是有某種確定性的，代碼會有種統一的風格在里面，同時閱讀起來會很輕松
2、
當這些看似雜亂無序的屬性在書寫時遵從一定規律后，改起來會很方便;
比如我習慣將 width，height 這種基本的常用的屬性寫在元素樣式的最前面，我在改的時候就直接到最前面去找
3、
會有一種，哲學上的美;
恩，就是看起來舒心的那種;
沒有風格的編碼是新手，想到哪寫到哪，而具有一定風格的代碼或許是老司機，雖然所堅持的風格不一定普適
二、規范 -- 依據 CSS 盒模型定制
流行的CSS順序有多種書寫方式
根據多年編碼習慣，我比較偏向依據 盒模型 來定制 CSS 屬性編寫順序
並且結合多種書寫方式，在此基礎上，做了一些調整，整理成自己喜歡的書寫風格
大致分為以下幾類
1、 content overflow position z-index display float ...
表示定位/布局的屬性（content比較特殊，作為偽元素不可少的，經常放置於第一位）
2、 width height margin padding border ...
表示盒子模型的屬性
3、 background ...
表示背景的屬性
4、 color font line-height text-* vertical-align ...
字體相關的屬性
5、 list-style ...
除 CSS3 外的其他屬性
6、 border-radius transform ...
CSS3 屬性
常用 CSS 屬性排序
/* 每一類的順序並不嚴格，可以隨意，自己開心就好 */
/* 下面這個是比較通用的樣式 */
.el {
/* 表示定位/布局的屬性 */
content: ;
overflow: ;
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
/* 表示盒子模型的屬性 */
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
/* 表示背景的屬性 */
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
/* 字體相關的屬性 */
color: ;
font: ;
font-family: ;
font-size: ;
font-weight: ;
line-height: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
/* 除 CSS3 外的其他屬性 */
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
opacity: ;
cursor: ;
quotes: ;
/* CSS3 屬性 */
border-radius: ;
transform: ;
}
三、使用工具來約束 CSS 規范
1、csscomb.js --- CSS 編碼風格格式化工具
2、Github： csscomb.js
3、csscomb.json / yandex.json / zen.json
預配置三種編碼風格，可以挑選自己想要的直接copy代碼
4、配置文件：
創建 csscomb.json 配置文件，放於項目根目錄
將上面的風格代碼 copy 之后，放到 csscomb.json 即可
5、配合開發工具使用
我這里是使用 VS Code，到插件庫里搜索下載 CSScomb 安裝
該插件支持
.csscomb.json or csscomb.json
.csscomb.js or csscomb.js
等配置文件格式
使用方式：
F1, Ctrl+Shift+P on Windows
Cmd+Shift+P on macOS
6、貼一份自己使用的配置文件
配置代碼太長，獨立一篇隨筆，這里放個鏈接