建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
本文的部分內(nèi)容整理自我對(duì)此問(wèn)題的解答： 命名 CSS 的類(lèi)或 ID 時(shí)單詞間如何連接？ – 知乎
成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都小程序開(kāi)發(fā)、集團(tuán)成都定制網(wǎng)站等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶(hù)；涵蓋的客戶(hù)類(lèi)型包括：紙箱等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶(hù)的一致稱(chēng)揚(yáng)！
問(wèn)題
CSS 類(lèi)或 ID 命名時(shí)單詞間連接通常有這幾種寫(xiě)法：
- 駝峰式：
solutionTitle、solutionDetail - 用橫杠（連接符）連接：
solution-title、solution-detail - 下劃線(xiàn)連接：
solution_title、solution_detail
應(yīng)該采用哪種寫(xiě)法呢？選擇的時(shí)候是出于個(gè)人習(xí)慣還是有別的考慮？
看了下豆瓣，美團(tuán)，淘寶的源碼，都是采用 solution_title 的寫(xiě)法。
我的回答
首先定個(gè)性，這是個(gè)純粹的“代碼風(fēng)格”問(wèn)題。
什么是“代碼風(fēng)格”問(wèn)題？有一些特征：
- 技術(shù)規(guī)范不會(huì)硬性規(guī)定。雖然規(guī)范有時(shí)可能會(huì)提供指導(dǎo)性的建議，或者有時(shí)會(huì)有行業(yè)大牛出來(lái)鼓吹***實(shí)踐。
- 個(gè)性化十分明顯。也就是蘿卜青菜各有所愛(ài)、公說(shuō)公有理婆說(shuō)婆有理，永無(wú)定論。
扯完之后說(shuō)一下我自己的習(xí)慣：
以前用下劃線(xiàn)
主要原因是在編輯器中雙擊可以選中；另外自己覺(jué)得下劃線(xiàn)好看（純個(gè)人喜好）。除此以外可能還有一點(diǎn)“小白式謹(jǐn)慎”（避免與 CSS 屬性名/值弄混、避免與減號(hào)弄混），或者我的啟蒙教材就是使用下劃線(xiàn)的。
現(xiàn)在主要使用連字符
后來(lái)逐漸接手或參與了一些別人的項(xiàng)目，接觸過(guò)各種代碼風(fēng)格。在老外的一些項(xiàng)目中接觸到大量的使用連字符的命名，看多了感覺(jué)也不難看。在編輯器中也可以通過(guò)“雙擊并拖動(dòng)”來(lái)選中，所以就逐漸過(guò)渡到了連字符。
在特殊場(chǎng)合用駝峰式
駝峰式寫(xiě)法輸入不方便、引入了大小寫(xiě)的復(fù)雜度、可讀性無(wú)優(yōu)勢(shì)，因此很少在日常開(kāi)發(fā)中使用。而正因?yàn)槿绱?，我目前主要在一些框架?jí)的類(lèi)名中使用，以便于日常開(kāi)發(fā)的命名習(xí)慣區(qū)分開(kāi)，避免無(wú)意中污染框架級(jí)樣式的可能性。
關(guān)于標(biāo)準(zhǔn)
有網(wǎng)友提到：
HTML 和 CSS 語(yǔ)法中，無(wú)論是屬性名和值，用到連接符的地方都是 - 沒(méi)有 _。Follow 標(biāo)準(zhǔn)有益無(wú)害。
這種說(shuō)法我并不贊同。因?yàn)椤癴ollow 標(biāo)準(zhǔn)”一說(shuō)沒(méi)有根據(jù)，而且邏輯不清。
我們很容易理清一件事——給元素的 class 和 id 命名，本質(zhì)上是給 HTML 標(biāo)簽的 class 與 id 屬性寫(xiě)入值。HTML 的標(biāo)簽屬性值的合法性與 HTML 標(biāo)簽屬性名、CSS 屬性的名/值的命名習(xí)慣有關(guān)系嗎？
說(shuō)到“標(biāo)準(zhǔn)”，其實(shí)我也完全不知道 class 和 id 的合法值是什么、不知道下劃線(xiàn)是否合法，甚至記不太清楚 class 與 id 的值是否是大小寫(xiě)敏感的。為此，我查閱了現(xiàn)行規(guī)范 HTML 4.01 和 CSS 2.1 的部分章節(jié)。CSS 2.1 是這樣說(shuō)的：
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 (_); …
也就是說(shuō)，用下劃線(xiàn)來(lái)連接多個(gè)單詞作為 class 或 id 的值，是合法的。
（賀師俊老師提示道：CSS 1 和 2 的規(guī)范在這一點(diǎn)上有錯(cuò)誤，沒(méi)有把下劃線(xiàn)加進(jìn)去；直到 CSS 2.1 中，這個(gè)問(wèn)題才被修正。）
其它觀點(diǎn)
關(guān)于可讀性
賀師俊老師（@hax）提出了一個(gè)容易被忽略但實(shí)際上很重要的因素：
- 比 _ 有一點(diǎn)好的地方是， _ 有時(shí)候會(huì)難以分辨，就好像空格一樣。而 class 里面有沒(méi)有空格是挺重要的。比較以下三種用法：
關(guān)于編輯器
很多同學(xué)提到了不同的單詞連接方式對(duì)選擇操作的影響，比如雙擊可以直接選中用 _ 連接的多個(gè)單詞，但用 - 連接的多個(gè)單詞則無(wú)法全部選中，選區(qū)會(huì)在 - 處終止，即只能選中一個(gè)單詞。
Sublime Text
對(duì)此，一絲同學(xué)（@yisibl）在 微博 做了科普：
CSS 命名用連字符 - 不能雙擊選中的問(wèn)題一直是一個(gè)偽命題，這是編輯器的問(wèn)題，因?yàn)檫@個(gè)而選用下劃線(xiàn) _ 實(shí)在有些牽強(qiáng)。在 Sublime Text 2 的全局配置文件 Preferences.sublime-settings 中找到 word_separators 字段，刪掉其中的 - 即可雙擊選中一連串的多個(gè)單詞。
Vim
也有一位 潘魏增同學(xué) 提供了 Vim 的配置方法：
如果使用 vim，可以設(shè)置 set iskeyword+=-，這樣就可以匹配選中以 – 連接的關(guān)鍵詞，search 和 mark 的時(shí)候會(huì)比較方便。
（抱歉，這里只是純轉(zhuǎn)發(fā)，暫時(shí)無(wú)法驗(yàn)證。）
UltraEdit
我在 Windows 下一般用 UltraEdit 干活，它有一種操作叫作 Ctrl + 雙擊。而且我們可以設(shè)置此操作的分界符，很靈活。
鼠標(biāo)選擇
如果你的編輯器不支持上述配置或操作，要想一次性選中以 - 連接的多個(gè)單詞，其實(shí)也是有解決方案的：雙擊的***一擊先不要松開(kāi)，再左右拖動(dòng)就可以以單詞為單位擴(kuò)張選區(qū)。（這種選擇方式幾乎適用于所有編輯器，而且 Windows 和 Mac 通吃。）
實(shí)際上我并不建議像前面幾種方法那樣在編輯器中取消 - 的分界符身份，而是建議使用這種“雙擊 + 拖動(dòng)”的方法來(lái)選擇任意數(shù)量的單詞。因?yàn)?，某些時(shí)候你只想選中 one-two-three 中的 one-two 或 two-three 或單個(gè)單詞，那么這種方法顯然更自由更精確——想選少選少，想選多選多。
— Bonus Track —
如果你在使用 WebStorm（或它的兄弟 IDE），就不要用鼠標(biāo)點(diǎn)來(lái)點(diǎn)去了，不優(yōu)雅。
你可以把光標(biāo)移到某個(gè)單詞上，用 Ctrl + W（在 Mac 下是 Cmd + W）快捷鍵就可以選中當(dāng)前單詞；更神奇的是，這個(gè)快捷可以連續(xù)使用，可以不斷把選區(qū)擴(kuò)張到更大的語(yǔ)法單元：?jiǎn)卧~ → 一串單詞 → 整個(gè)字符串（或語(yǔ)句） → 對(duì)象（或函數(shù)作用域） → …… → 整個(gè)文件。
（唯一不便的是，這個(gè)快捷鍵在其它程序中是關(guān)閉當(dāng)前窗口的操作，容易混淆，建議在 IDE 中給這個(gè)操作分配其它的快捷鍵。）
原文出處： cssmagic 的博客（@CSS魔法）
網(wǎng)頁(yè)標(biāo)題：CSS類(lèi)名的單詞連字符：下劃線(xiàn)還是連接符？
分享地址：http://www.5511xx.com/article/cdssooj.html
