CSS code 是否真的需要排序?

這兩天在看 Smashing Magazine 的時候,看到一篇很有趣的議題:Sort CSS Properties (排序 CSS 屬性)。

到底 CSS code 是否需要排序呢?會特別想提出來討論,是因為我想到久遠以前 Ken Tsai 曾經問過我類似的問題,他問我在寫 CSS 的時候,有沒有特殊的排序習慣?或是有推薦的排序方法嗎?我不清楚用網頁編輯軟體產生 CSS ,軟體是否會自動幫你做排序?但如果純用手打 CSS ,相對的自由度高一些,但我要很汗顏的說一聲,我自己並沒有「排序 CSS 」的習慣。

但我曾經思考過 CSS 排序的問題,如果真的需要做排序,我會推薦以下三種方法:

1. 以字母 A~Z 做排序

2009 年我寫過一篇外電文章:快速寫好 CSS 的 5 種方法,其實多數人還是習慣用字母做排序,一來好找屬性、二來溝通方便,要共同開發也會簡單許多。以下是當時的原文:

藉由字母來排序你的 css 屬性,你所創立的連貫性會幫你減少尋找某個屬性的時間。我知道有的人是用這種方法來排序,但有的人卻有另一套排序方法。不過在我的公司,我們一致決定要使用字母作為排序方式,假設你要和別人共同開發程式碼,這種方法對你會比較好。

2. 以長度做排序

相對以字母排序,用長度排序比較少人用,會使用長度排序,我想在個性應該很執著,某方面是個偏執狂(笑),喜歡看到 Css 屬性整齊乾淨、像個梯形一樣完美。這種排序沒有好壞,但就美觀度來說,的確是不錯看。以下為範例:

a {
  color: #555;
  font-size: 10px;
  font-weight: bold;
  margin: 0 10px 0 5px;
  letter-spacing: 0.1em;
}

3. 用容器做排序,由外而內(內而外)

這是當時跟 Ken Tsai 討論時,Ken 告訴我他以往都是用容器做排序,我有點嚇到,因為是個很特別的想法:P ,相對於大家習慣的字母排序,可以想出用容器做排序也蠻不錯的。但朋友使用了一段時間也回饋告訴我,其實找參數不太好找。(雖然我自己都是用搜尋居多)

幫你排序 Css Code 工具

那麼,為了這類的排序問題,誕生了「CSScomb」,是個可以幫你排序 CSS code 的工具。

以下是 CSScomb 官方的功能解說:
Sorting CSS properties (幫忙排序 CSS 屬性)
The order of properties in the help of professionals
Setting the order of CSS properties (可以自訂想排的順序)
Use the order to which you are accustomed to
Parsing CSS in the tags <style>, style="…" attribute (可以解析並找到 CSS 文件 & HTML 檔案裡的 CSS 屬性)
CSScomb find a CSS-code to other languages and will sort it
Formatting style sheets does not change (不會動到你原本的多行/單行/空白排版..等設計)
Work as a singleline and multiline CSS
Separation of CSS properties for the group (可以設定要不要將 CSS 屬性給群組起來,詳細範例可參考 Sort Order Option )
Separate groups of empty string if you want
Full support CSS2/CSS2.1/CSS3 and even CSS4 (完整支援最高到 CSS3 版本,甚至是 CSS4)
CSScomb ready for the advanced CSS-code

線上範例與支援工具

CSScomb 也很貼心的釋出他的規範文件給大家參考,從基本功能到進階的設定都可以在文件裡找到,而且有提供左右對照讓大家看其中差別。 (左邊是使用前,右邊是使用後)

此外,如果你想試試看排序的效果,可以到 CSScomb 的 Online sorting (線上排序) 測試看看效果。將 CSS 程式碼貼入文字框,按下「RESORT」就可以看到效果囉。另外也可以點選文字框右上角的「Setting」,設定你自己的順序排法。以下有官方範例影片可供參考:

CSScomb也有提供擴充功能給大家,如果你有使用以下這些軟體,可以到官方首頁下載他的擴充,就可以直接使用了,非常方便 & 貼心壓~

  • CSScomb for Sublime Text 2 (Also in Package Control)
  • CSScomb for Textmate
  • CSScomb for Coda 2
  • CSScomb for Coda
  • CSScomb for Espresso 2
  • CSScomb for IntelliJIDEA/WebStorm/PyCharm
  • CSScomb for Notepad++
  • CSScomb for Vim
  • CSScomb for Chocolat

如果你對 CSS code 排序有一定的執著程度,也許可以考慮使用 CSScomb 幫助達到快速排序的效果 :)

You may also like...

3 Responses

  1. 蒼時弦や 說道:

    我都習慣同類型放一起,不過沒想到這樣排好像比較好 Orz

    我都會亂放(牆角

  2. Richer Yang 說道:

    我個人是沒有那麼龜毛啦~
    就一路寫下去,先後順序根本沒有在意~
    因為我主要是寫後端,前端就只是兼者做,CSS 的排序排列就不再意啦~~~

    不過,剛無聊搜尋一下發覺了這一個檔案 http://www.mozilla.org/css/base/content.css 裡面寫到
    /* Suggested order:
    * display
    * list-style
    * position
    * float
    * clear
    * width
    * height
    * margin
    * padding
    * border
    * background
    * color
    * font
    * text-decoration
    * text-align
    * vertical-align
    * white-space
    * other text
    * content
    */

  3. stuart61416 說道:

    我有些問題,想請教!
    我已經幫網站申請 google analytics 和 webmaster!也安裝了外掛 Google Analyticator & Google XML Sitemaps!
     

    Google XML Sitemaps外掛,我設定好了,我照著香腸炒魷魚的教學,應該不用在裡面調整什麼吧??
    (我的意思是,其他設定是不是默認就可以?)
    sitemap.xml.gz 和 sitemap.xml 我已經完成了!!
    外掛裡面顯示這樣:
    已經成功地通知 Google 您網站的更新。
    已經成功地通知 Bing 您網站的更新。
    以上這兩行的意思,外掛成功通知google&Bing更新 和我們主動去提交,有什麼不一樣嗎?
     

    使用webmaster功能後,然後安裝了Google XML Sitemaps,還有必要主動去跟Google和Bing提交網站&地圖嗎?
    我問的『提交網站&地圖』是將網站提交給 Google 與 Yahoo!
    Google 登錄網址:
    http://www.google.com/addurl/?hl=zh-TW&continue=/addurl
    Bing登錄網址:
    http://www.bing.com/webmaster/SubmitSitePage.aspx
     
    Google的『提交網站&地圖』應該就是webmaster和Google XML Sitemaps外掛包辦了吧?
    那完成webmaster和Google XML Sitemaps後,是不是只剩下Bing要去提交網站和地圖?

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>