問題描述在寫靜態(tài)頁面的過程中，想盡量契合HTML5語義化的標(biāo)準(zhǔn)，將下面這個頁面進行的修改(通過語義化的標(biāo)簽和css子選擇器代替了html文件中很多class名字和密密麻麻的div，css文件的類選擇器)問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法先說得到的結(jié)論吧，查了很多網(wǎng)上的資料。得出的結(jié)論是推薦使用類選擇器(但是我不服)理由如下:目前主流的開發(fā)方式是模塊化開發(fā)(vue,react,angular等)，不會有某個文件(.vue,.jsx)html部分層級過深的問題。同理，復(fù)用的問題也可以通過模塊化的開發(fā)方式(封裝組件)來解決。類選擇器那就得在html部分的標(biāo)簽中添加很多類似于class='avatar'的代碼，同時css文件中也得加上.avatar{}，代碼量會增加。雖然看css代碼，可以知道這里描述的是一個avatar(類名體現(xiàn)了語義化)，但是無法確定這個avatar在html代碼中的哪個位置/層級，所以我還得再去html代碼中通過ctrl + f找到這個/些class='avatar'所在位置，這還不算完，我還得向它父級看，才能確定這個class='avatar'元素對應(yīng)到真實頁面中的哪個/些 avatar。通過css偽類選擇器可以直接確定標(biāo)簽的位置，再通過css代碼+html標(biāo)簽可以大概知道描述的是個什么，語義化。而且可以配合section,aside等語義化標(biāo)簽進一步簡化html代碼，避免全部是div和span等無語義化的標(biāo)簽。你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？想問一下大家覺得應(yīng)該如何處理最好？
2 回答
開滿天機
TA貢獻(xiàn)1786條經(jīng)驗 獲得超13個贊
我用著也是類選擇器最順手。用class雖然不知道在哪個層級，但是class如果有明確的語義，相比標(biāo)簽要清晰很多。
html用語義話的標(biāo)簽是個好習(xí)慣，對SEO，輔助視覺障礙之類的都有幫助。 但用作CSS來說，卻不好
現(xiàn)在的html層級一般都很深，按照你的寫法，內(nèi)嵌N多層，代碼并不優(yōu)雅 a>b>c>d>e.....
可復(fù)用性幾乎為0。我一個右箭頭的class，可以到處用，按照層級寫，幾乎不可能重復(fù)用
和html耦合性太高了。html換個標(biāo)簽，css要改，換個位置，更要改動，增加個元素，也可能要改，還要挨個層級找過去，太累了。
所以我覺得 用語義話的標(biāo)簽加css的class 這樣比較好
守著星空守著你
TA貢獻(xiàn)1799條經(jīng)驗 獲得超8個贊
先說你的想法不靠譜。然后逐點分析：
模塊化開發(fā)和使用類名并不沖突，類名可讀性強的多，尤其有利于別人和未來的你理解 HTML 結(jié)構(gòu)。
這么一點字節(jié)數(shù)對產(chǎn)品的影響微乎其微，隨便一張圖片沒處理好，增加幾百K，頂一個完整的項目了。何況還有 gzip。
固定結(jié)構(gòu)就是自尋死路啊少年……未來維護會麻煩死的。語義化本來就要遵守，但是遵守語義化和用更清晰的類名并不沖突。HTML 總共100多個標(biāo)簽，排除掉聲明打印樣式的、特殊功能的，符合語義并且表示結(jié)構(gòu)的只剩十幾個，想表現(xiàn)清晰的結(jié)構(gòu)幾乎不可能，必須用其它輔助手段，而類名可讀性明顯強于
nth-child。
順便給幾個建議：
如果你覺得寫 HTML 麻煩可以試試 pug
寫代碼要從長期考慮，不要只看眼下
添加回答
舉報
0/150
提交
取消