CSS 類名的單詞連字元：下劃線還是連線符？

cssmagic發表於2014-05-08
CSS字元

　　本文的部分內容整理自我對此問題的解答： 命名 CSS 的類或 ID 時單詞間如何連線？ - 知乎

　問題

　　CSS 類或 ID 命名時單詞間連線通常有這幾種寫法：

  • 駝峰式： solutionTitle、solutionDetail
  • 用橫槓連線： solution-title、solution-detail
  • 下劃線連線： solution_title、solution_detail

　　應該採用哪種寫法呢？選擇的時候是出於個人習慣還是有別的考慮？

　　看了下豆瓣，美團，淘寶的原始碼，都是採用 solution_title 的寫法。

　我的回答

　　首先定個性，這是個純粹的“程式碼風格”問題。

　　什麼是“程式碼風格”問題？有一些特徵：

  • 技術規範不會硬性規定。雖然規範有時可能會提供指導性的建議，或者有時會有行業大牛出來鼓吹最佳實踐。

  • 個性化十分明顯。也就是蘿蔔青菜各有所愛、公說公有理婆說婆有理，永無定論。

　　扯完之後說一下我自己的習慣：

　　以前用下劃線

　　主要原因是在編輯器中雙擊可以選中；另外自己覺得下劃線好看（純個人喜好）。除此以外可能還有一點“小白式謹慎”（避免與 CSS 屬性名/值弄混、避免與減號弄混），或者我的啟蒙教材就是使用下劃線的。

　　現在主要使用連字元

　　後來逐漸接手或參與了一些別人的專案，接觸過各種程式碼風格。在老外的一些專案中接觸到大量的使用連字元的命名，看多了感覺也不難看。在編輯器中也可以通過“雙擊並拖動”來選中，所以就逐漸過渡到了連字元。

　　在特殊場合用駝峰式

　　駝峰式寫法輸入不方便、引入了大小寫的複雜度、可讀性無優勢，因此很少在日常開發中使用。而正因為如此，我目前主要在一些框架級的類名中使用，以便於日常開發的命名習慣區分開，避免無意中汙染框架級樣式的可能性。

　　關於標準

　　有網友提到：

HTML 和 CSS 語法中，無論是屬性名和值，用到連線符的地方都是 - 沒有 _。Follow 標準有益無害。

　　這種說法我並不贊同。因為“follow 標準”一說沒有根據，而且邏輯不清。

　　我們很容易理清一件事——給元素的 class 和 id 命名，本質上是給 HTML 標籤的 class 與 id 屬性寫入值。HTML 的 標籤屬性值 的合法性與 HTML 標籤屬性名、CSS 屬性的名/值的命名習慣有關係嗎？

　　說到“標準”，其實我也完全不知道 class 和 id 的合法值是什麼、不知道下劃線是否合法，甚至記不太清楚 class 與 id 的值是否是大小寫敏感的。為此，我查閱了現行規範 HTML 4.01 和 CSS 2.1 的部分章節。CSS 2.1 是這樣說的：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); ...

　　也就是說，用下劃線來連線多個單詞作為 class 或 id 的值，是合法的。

　　（賀師俊老師提示道：CSS 1 和 2 的規範在這一點上有錯誤，沒有把下劃線加進去；直到 CSS 2.1 中，這個問題才被修正。）

　其它觀點

　　關於可讀性

　　賀師俊老師（@hax）提出了一個容易被忽略但實際上很重要的因素：

- 比 _ 有一點好的地方是 _ 有時候會難以分辨，就好像空格一樣。而 class 裡面有沒有空格是挺重要的。比較以下三種用法：

  • <div class="a_very_very_very_long long_class short_class">
  • <div class="a-very-very-very-long long-class short-class">
  • <div class="aVeryVeryVeryLong longClass shortClass">

　　關於編輯器

　　很多同學提到了不同的單詞連線方式對選擇操作的影響，比如雙擊可以直接選中用 _ 連線的多個單詞，但用 - 連線的多個單詞則無法全部選中，選區會在 - 處終止，即只能選中一個單詞。

　　Sublime Text

　　對此，一絲同學（@yisibl）在 微博 做了科普：

CSS 命名用連字元 - 不能雙擊選中的問題一直是一個偽命題，這是編輯器的問題，因為這個而選用下劃線 _ 實在有些牽強。在 Sublime Text 2 的全域性配置檔案 Preferences.sublime-settings 中找到 word_separators 欄位，刪掉其中的 - 即可雙擊選中一連串的多個單詞。

　　Vim

　　也有一位 潘魏增同學 提供了 Vim 的配置方法：

如果使用 vim，可以設定 set iskeyword+=-，這樣就可以匹配選中以 - 連線的關鍵詞，search 和 mark 的時候會比較方便。

　　（抱歉，這裡只是純轉發，暫時無法驗證。）

　　UltraEdit

　　我在 Windows 下一般用 UltraEdit 幹活，它有一種操作叫作 Ctrl + 雙擊。而且我們可以設定此操作的分界符，很靈活。

　　滑鼠選擇

　　如果你的編輯器不支援上述配置或操作，要想一次性選中以 - 連線的多個單詞，其實也是有解決方案的： 雙擊的最後一擊先不要鬆開，再左右拖動就可以以單詞為單位擴張選區。（這種選擇方式幾乎適用於所有編輯器，而且 Windows 和 Mac 通吃。）

　　實際上我並不建議像前面幾種方法那樣在編輯器中取消 - 的分界符身份，而是建議使用這種“雙擊 + 拖動”的方法來選擇任意數量的單詞。因為，某些時候你只想選中 one-two-three 中的 one-two 或 two-three 或單個單詞，那麼這種方法顯然更自由更精確——想選少選少，想選多選多。

　　--- Bonus Track ---

　　如果你在使用 WebStorm（或它的兄弟 IDE），就不要用滑鼠點來點去了，不優雅。

　　你可以把游標移到某個單詞上，用 Ctrl + W（在 Mac 下是 Cmd + W）快捷鍵就可以選中當前單詞；更神奇的是，這個快捷可以連續使用，可以不斷把選區擴張到更大的語法單元：單詞 → 一串單詞 → 整個字串（或語句） → 物件（或函式作用域） → …… → 整個檔案。

　　（唯一不便的是，這個快捷鍵在其它程式中是關閉當前視窗的操作，容易混淆，建議在 IDE 中給這個操作分配其它的快捷鍵。）

相關文章