本文的部分內容整理自我對此問題的解答： 命名 css 的類或 id 時單詞間如何連線？ - 知乎
css 類或 id 命名時單詞間連線通常有這幾種寫法：
應該採用哪種寫法呢？選擇的時候是出於個人習慣還是有別的考慮？
看了下豆瓣，美團，**的原始碼，都是採用 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 裡面有沒有空格是挺重要的。比較以下三種用法：很多同學提到了不同的單詞連線方式對選擇操作的影響，比如雙擊可以直接選中用 _ 連線的多個單詞，但用 - 連線的多個單詞則無法全部選中，選區會在 - 處終止，即只能選中乙個單詞。
對此，一絲同學（@yisibl）在 微博 做了科普：
css 命名用連字元 - 不能雙擊選中的問題一直是乙個偽命題，這是編輯器的問題，因為這個而選用下劃線 _ 實在有些牽強。在 sublime text 2 的全域性配置檔案 preferences.sublime-settings 中找到 word_separators 字段，刪掉其中的 - 即可雙擊選中一連串的多個單詞。vim也有一位 潘魏增同學 提供了 vim 的配置方法：
（抱歉，這裡只是純**，暫時無法驗證。）
ultraedit
我在 windows 下一般用 ultraedit 幹活，它有一種操作叫作 ctrl + 雙擊。而且我們可以設定此操作的分界符，很靈活。
如果你的編輯器不支援上述配置或操作，要想一次性選中以 - 連線的多個單詞，其實也是有解決方案的：雙擊的最後一擊先不要鬆開，再左右拖動就可以以單詞為單位擴張選區。（這種選擇方式幾乎適用於所有編輯器，而且 windows 和 mac 通吃。）
實際上我並不建議像前面幾種方法那樣在編輯器中取消 - 的分界符身份，而是建議使用這種「雙擊 + 拖動」的方法來選擇任意數量的單詞。因為，某些時候你只想選中 one-two-three 中的 one-two 或 two-three 或單個單詞，那麼這種方法顯然更自由更精確——想選少選少，想選多選多。
如果你在使用 webstorm（或它的兄弟 ide），就不要用滑鼠點來點去了，不優雅。
你可以把游標移到某個單詞上，用 ctrl + w（在 mac 下是 cmd + w）快捷鍵就可以選中當前單詞；更神奇的是，這個快捷可以連續使用，可以不斷把選區擴張到更大的語法單元：單詞 → 一串單詞 → 整個字串（或語句） → 物件（或函式作用域） → …… → 整個檔案。
（唯一不便的是，這個快捷鍵在其它程式中是關閉當前視窗的操作，容易混淆，建議在 ide 中給這個操作分配其它的快捷鍵。）
CSS 類名的單詞連字元 下劃線還是連線符？
本文的部分內容整理自我對此問題的解答 命名 css 的類或 id 時單詞間如何連線？知乎 css 類或 id 命名時單詞間連線通常有這幾種寫法 應該採用哪種寫法呢？選擇的時候是出於個人習慣還是有別的考慮？看了下豆瓣，美團，的原始碼，都是採用 solution title 的寫法。首先定個性，這是個純...
CSS 類名的單詞連字元 下劃線還是連線符？
本文的部分內容整理自我對此問題的解答 命名 css 的類或 id 時單詞間如何連線？知乎 css 類或 id 命名時單詞間連線通常有這幾種寫法 應該採用哪種寫法呢？選擇的時候是出於個人習慣還是有別的考慮？看了下豆瓣，美團，的原始碼，都是採用 solution title 的寫法。首先定個性，這是個純...
CSS樣式名中的下劃線與連字元
在css的classname中使用連字元 還是使用下劃線 作為分隔符更適合？這是關於css命名規範的乙個問題，同時也涉及了語義化。以前一直都用 來命名比較長的類名。看了有關的文章後，才知道自己的css命名很不規範。讀了下面給出的這篇文章後，我深深地發現我們在學習的時候看標準的文案其實是很重要的，這讓...