CSS選擇器名稱改變？

Question

我一直在尋找像SMACSS和OOCSS這樣的CSS編碼方法。在完成一些作業並檢查大型網站（例如Google，Facebook）的樣式之後，我注意到了非常干擾的選擇器名稱，例如.50x4，沒有文體或內容語義。

我想知道這些較大的網站是否使用某種類型的名稱爲他們的CSS選擇器命名？

Answer 1

重新指定您指定的特定選擇器：._50x4。

這個選擇器確實看起來很奇怪，但實際上它不是無效的或者是破損的。

它是一類（或ID）選擇器來以數字開始無效，因此.55x4將是無效的。但下劃線是一個類的有效的第一個字符。

因此，選擇器._55x4實際上只是一個名爲55x4的類的方法，但在其起始處有一個下劃線以使其有效。

爲什麼你想要一個名爲55x4的類？那麼，如果你想得到真正的答案，你必須向網站的開發者詢問，但你提到了Facebook和Google，所以我們可以推測一下。

Facebook和谷歌兩者都是非常高流量的網站。因此，就他們而言，甚至通過單個字符來縮小其HTML/CSS/JS代碼的大小也會對帶寬成本產生很大影響。

你或我可能已經命名爲更具可讀性的名稱的類，但是當你試圖節省帶寬的每一個可能的字節，懂事的名字走出去的窗口。與他們將Javascript代碼縮小到無法讀取的程度相同，他們也會優化其HTML和CSS代碼，使其儘可能小。瘋狂的類名是這樣的結果。

這並不是說這個類名是徹底瘋了 - 你已經完全引用它斷章取義，所以有充分的機會，55號和4可以適用於一些在頁面上。我不知道，沒有任何語境，沒有其他人。

但我可以這麼說：這是複製Facebook和Google不一定是最好的主意的一種情況。您的流量級別與他們的流量級別不同，並且將代碼中的每個最後一個字節都刪除不應該與您的代碼具有相同的優先級。當然你可以優化東西，但是不需要編寫看起來像這樣的類名。

另一件要說的是，對於搜索引擎優化的目的，明智的類名非常有幫助。 Facebook和（特別是）谷歌可以放棄忽視他們的SEO排名，但我們其他人不能。

所以不管你的方法中，類名應該是語義 - 也就是說，它們應該是有意義的，並且幫助讀者瞭解哪些元素是。

你通過看衆所周知的網站，看看他們做什麼，做正確的事，但我的建議是嘗試尋找更接近自己的其他網站。當談到他們如何做事時，Facebook和Google總是會有點「不同」;他們並不總是最好的例子。