2019年3月,一座建于上世紀(jì)60年代的6層住宅樓在中國福建省福州市晉安區(qū)發(fā)生了倒塌,造成10人死亡。此事件引起了社會的廣泛關(guān)注,也引起了對危舊房改造的關(guān)注。
在Web開發(fā)中,也存在著一種類似于危舊房的問題,那就是CSS級。CSS級是指CSS選擇器的嵌套層數(shù),層數(shù)過多會影響頁面加載速度和性能。
/* 例子1 */ .navbar .menu .submenu li a {} /* 例子2,層數(shù)比例例子1更深 */ body .main .content .sidebar .menu .submenu li a {}
通常情況下,建議保持CSS級不超過3級,即選擇器嵌套不要超過3層。如果選擇器嵌套太多,就會影響頁面性能。在實(shí)際應(yīng)用中,可以采取以下三種方式來避免CSS級過高:
- 使用縮寫:當(dāng)多個規(guī)則具有相同的屬性時(shí),可以將它們縮寫為一行。
- 優(yōu)化布局結(jié)構(gòu):調(diào)整HTML的結(jié)構(gòu)有時(shí)能夠減少CSS級。
- 使用BEM命名規(guī)范:BEM命名規(guī)范可以減少CSS級,提高可維護(hù)性。