我是一名前端，看了這個問題並且看了你說的這篇文章，我來說說我的觀點！

首先我們談談CSS的類名語義化，我個人覺得這就是一個命名規範的問題！

如上圖，這是一個普通的頁面，我們可以根據頁面的功能劃分為header、nav、list、footer這個四個部分，然後再對細節部分做劃分！如果你對CSS做了模組化，可以這樣命名class：

header-x1-x2

nav-x1-x2

list-x1-x2

footer-x1-x2

資料夾有幾級，名字可以用橫線拼接，當然也可以是駝峰法！

這樣的好處非常明顯，維護方便，查詢樣式更方便，但是看見‘語義化’這三個字你就應該感覺到它很業務，它可以快速適應業務迭代，對於新人的學習成本非常小，大家在瀏覽器中一眼就能識別這個樣式在哪個檔案中，根本無需sourceMap！

再來說說你說的這篇文章Challenging CSS Best Practices，直接用文中例子：

特點很明顯，對樣式的作用切割的很細緻，幾乎一個類名包含一個樣式，而且命名也是根據樣式的作用來取的！這樣的優點是：複用性強，冗餘程式碼非常少，類名很少發生級聯！

對比兩種開發css規範（已經超出了類名的命名規範的範疇），你可以發現：

1、語義化適用於很業務的場景，開發者無論新人還是老人都能信手拈來，開發成本和維護成本小，但是一個class具體包含的樣式呈現不受控制

2、對於UI框架和元件類的模板很適用於第二種方案，但是對開發者的能力要求會更高，可能開發前要制定各種各樣的base class，而且還要牢記於心

一句話，還是要看自己的業務場景進行技術選型！

我覺得語義化的命令還是必要的。幾乎每個網站都有自己寫的原生的部分（沒有使用框架之類），這個部分還是使用與本身網站業務相應的語義化命名比較好，這樣能夠讓別人或者自己易於理解。

至於框架，如bootstrap使用樣式的正交性這類的命名，我覺得這算是最大化公共類名。

就像最大公約數那樣。

css不寫在html樣式中，一個主要原因是為了是關注點分離。內容與樣式的分離。讓程式碼看起來整潔，方便閱讀。