有哪些工具可以將 CSS 文件中的屬性按照一定的順序進行排列？

01-06

編寫css時有時沒有邏輯，有沒有一個一健化的工具，能把css文件中，每個class或id中的各個屬性按照一個固定的順序排列，比如1、width；2、height；3、float；等等，我想我應該描述清楚了。

除了以上大家推薦的之外，還有個 ProCSSor 是專門美化 CSS 代碼的。

方法是：先取消勾選 Fail-Safe Mode 然後在 Sort Properties 里選擇想要的風格。

http://procssor.com/

用CSS Compressor ( http://www.csscompressor.com/ )，勾選「Sort Properties(按照屬性排列)選」項，在壓縮的同時可以進行按屬性排列。

1.個人不贊同非得按照某種順序來排列，這個是個人習慣的問題，CSS本身就是面向設計的語言，沒有那麼強的邏輯性；

2.在團隊開發中，為了更好的協同，可以使用 CSScomb 來按照指定規則排序，這個規則是完全可以自定義的，按照團隊規範不同自行修改即可，方便靈活。在線測試地址：http://csscomb.com/online/

主要特色有：

自定義排序規則
可以處理標籤&內的CSS屬性
格式不變化
完全支持 CSS2/CSS2.1/CSS3 和 CSS4

截止發稿日期，支持以下編輯器：

Sublime Text 2 plugin
TextMate plugin
Coda Plugin
Coda 2 Plugin
Espresso 2 plugin
IntelliJIDEA Plugin
WebStorm Plugin
PyCharm plugin
Notepad ++ Plugin
Vim Plugin

github 地址 https://github.com/miripiruni/CSScomb

推薦一個界面簡單但是功能不弱的：

http://www.codebeautifier.com/

特色功能：

- 過濾特定版本下不合法的屬性（目前最高 2.1，對 W3C 兼容的網站開發者很實用）

- 選擇器和屬性的排序

- 可以壓縮，也可以美化，還可以自定義

- shorthands 的支持，只能壓 font-weight 的弱爆了（LOL）

基本按照布局定位屬性–&>自身屬性–&>文本屬性–&>其他屬性.

display || visibility

position

top || right || bottom || left

z-index

clear

float

width

max-width || min-width

height

max-height || min-height

overflow

margin

padding

outline

border

background

color

font : font-style || font-weight || font-size || line-height || font-family

text-align

text-indent

line-height

white-space

vertical-align

cursor

一個正則就可以搞定了。。。很簡單，我也寫過一個類似工具，裡面就一句js。。。。後來搞沒了。。。

firebug就是按照lz說的那樣顯示的，不過不能直接保存到源文件裡面，但是應該可以通過一些基於firebug的插件實現。

ps：這個問題真心不錯~特別是對於有「代碼潔癖」的人來說~

建議LZ在寫CSS的時候就應該注意下屬性，而不應該去靠工具解決，寫的時候按照既定順序可以幫助你養成良好的編程習慣。工具的目的只是簡化工作，而不應該讓工具做本應該我們自己做的東西。

建議遵循: 布局定位屬性–&>自身屬性–&>文本屬性–&>其他屬性. 此條可根據自身習慣書寫, 但盡量保證同類屬性寫在一起.
屬性列舉: 布局定位屬性主要包括: display list-style position（相應的
top,right,bottom,left）＆ float clear ＆ visibility ＆ overflow；
自身屬性主要包括: width height margin padding border
background; 文本屬性主要包括：color font text-decoration
text-align vertical-align white- space 其他
content; 我所列出的這些屬性只是最常用到的, 並不代表全部;

前一陣子寫的一個css屬性在線排序工具，還是比較好用的。。。嗯至少我自己覺得是哈哈 css屬性在線排序_css屬性排序工具

寫的時候按照一定規律寫，自己給自己定規律就是了。或者，完全用dw寫，按照一定順序也，完全收的到效果，只是懷疑，這樣的寫法有沒有必要。有時候，如果真的有這樣的工具，恐怕引起的問題還更多。鑒於多種瀏覽器的存在和支持方法不同，有時候寫錯了順序，或者用工具修改了不同屬性的順序，css樣式會完全不起作用，所以這樣的潔癖，恐怕只能通過編寫css的習慣來解決。

抑或，還有一種方法，但效率不高。就是，將每種屬性寫成一個class，每個容器按照順序寫多個class即可。但是這樣寫恐怕效率難於保證

SublimeText 裝個插件就行：csscomb/sublime-csscomb · GitHub

不要想著後期用工具美化，而是平時就要養成良好的習慣，大致要滿足一個因果關係，順序的話我也是建議@丁小倪的那個：布局定位屬性–&>自身屬性–&>文本屬性–&>其他屬性

我是使用Sublime text的過程當中安裝了一個CSS樣式排序插件後出現問題才看到你這個提問的，如果你用的是Sublime text，這裡有一個很好的插件推薦給你，不過安裝方法，及使用方法就需要你了解下了，看完這篇文章應該可以解決你的絕大部分問題了《CSScomb – Sublime text中一個超贊的CSS屬性排序插件》讓我們共同進步，加油！！！

個人認為不是很有必要按照一定的順序寫，太過死板和「學院派」而且其按照一定順序寫的效果不是很大,雖說有性能提升，但是其微乎其微，靈活而不要死扣。