資訊專欄INFORMATION COLUMN
摘要：屬性排序插件配置參數大全圖片介紹如下所示點擊進去更詳細空行產生的原因以及解決方法原因由于官方文檔將屬相按照單字定位展示大小樣式進行排序所以會產生空行，表示其實一類。
sublime插件CSScomb介紹CSScomb 是一個超級爽的前端css屬性排序工具，用來規則css, make your code more beautiful
官方網站只有一句如插件作用的介紹 Makes your code beautiful(讓你的代碼更漂亮) 。使用它可以幫助你重新排序CSS中定義的屬性，幫助你按照你預定義的排序格式生成新的CSS。會按照你想要的格式定義 css 空格，換行，縮進，代碼編寫方式。
CssComb的特點:
1. 自定義css屬性排序規則； 2. 代碼作用不發生變化，只是格式變化 3. 完全支持CSS2/CSS2.1/CSS3和CSS4； 4. 支持在線排序和本地編輯器安裝在線排序格式化css
CssComb在線地址
排序代碼如下圖片所示，沒有高亮所以不是很好看。
本地編輯器 sublime 安裝csscomb插件在線的畢竟只是測試，功能單一，無法自定義。在此，我用sublime安裝，因為sublime是我最喜歡用的前端編輯器。
安裝使用過程如下：
首先你要安裝node,然后才可以用，很多插件都需要使用node的，推薦你學習安裝，這里不多介紹。
在sublime中按ctrl+shift+p然后搜索 CssComb 確認進行下載。
點擊preferences->packages-settings->CSScomb->settins-default將第四行的
"node-path" : ":/usr/local/bin" ,改為你自己的node下面bin安裝的的路徑，我的是 "node-path" : ":/usr/local/bin" .改路徑可以先跳過去，執行第四步驟，如果沒有生效再來改路徑。
選中css代碼然后按默認快捷鍵 ctr+shift+c 即可，如果沖突了可以重新自定義，很多是快捷鍵沖突失效。
生效后如下所示：
排序之前：
#header {height: 42px;
position: relative;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
排序之后：
#header {
position: relative;
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
可以看到 {} 和空格，縮進， 屬性順序 都發生了變化。但是產生了兩個問題。
縮進的多少，標簽風格可能不是我喜歡的類型。
中間多了幾個空行，看起來很別扭。
別著急，這些問題在下面自定義配置之后都可以解決。
自定義配置csscomb風格
在線簡單配置參數 按照細節喜歡的風格選擇完之后會生成一個配置完的 json 文件。
選擇風格如下所示：
選擇完成后如下所示：
上面這只是在線的簡單配置，大家還是看不太懂。接下來給大家分享一個詳細的自定義配置網站內容介紹。 CSS屬性排序 CSScomb 插件配置參數大全
圖片介紹如下所示：(點擊進去更詳細)
CSScomb空行產生的原因以及解決方法原因由于官方文檔將css屬相按照 單字 定位 展示 大小 樣式進行排序,所以會產生空行，表示其實一類。
解決方法：
在sublime中下載` CSS Format `插件，然后執行 edit->css format->expanded 即可此時空行將會消除。
解決之后的代碼如下所示：(markdown插入圖片比較麻煩就不用圖片展示了)
#header {
position: relative;
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
CSScomb屬性排序如何排性能更好
上面說了默認的排序是 單字 定位 展示 大小 ,雖然排版好看了，但是性能并不是最好的。如果一個元素都不可見，那還要什么定位和大小，樣式呢？那樣是不是浪費渲染性能了。
更好的順序應該是： 顯示屬性 自身屬性 文本屬性和其他修飾屬性
如下圖所示：
好了，到這里把CSScomb算是終于講完了，希望你能配置成功，跟好的利用。make your code beautiful 有什么問題就仔細看下我給的鏈接和圖片。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115102.html
摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認更好的語法高亮，而且他完美支持。語法高亮默認安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。 文章轉載自本人的博客《三省吾身丶丶》點擊查看喜歡的話請瘋狂的推薦吧！ ^_^ 本文章會在本人有插件或者設置更新時，進行不定時更新 偷懶了，圖片地址直接設置的博客...
摘要：此時你只需要在問題出現時，去問谷歌。附一個我目前遇到所有用過的屬性，在的梳理后，如果你能手寫出谷歌首頁，那么你一定會了解它們的用法。 問題 有時候會覺得自己在寫 css 時沒有什么章法，因為 css 的屬性很多，又有一些繼承不繼承的關系，還有一些相互影響的屬性需要注意。總之就是覺得寫 css 好費勁，不如寫編程語言的邏輯清晰明了。 干貨 手寫 css 很重要 對于簡單頁面，嵌套...
摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個 決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護 一、 命名規范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個 決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護 一、 命名規范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個 決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護 一、 命名規范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
閱讀 1002·2021-09-30 09:58
閱讀 2829·2021-09-09 11:55
閱讀 2001·2021-09-01 11:41
閱讀 991·2019-08-30 15:55
閱讀 3350·2019-08-30 12:50
閱讀 3495·2019-08-29 18:37
閱讀 3294·2019-08-29 16:37
閱讀 2010·2019-08-29 13:00
