在編寫CSS代碼的過程中,有時候可能會看到一些奇怪的命名方式,比如"nav ul ul li a",這被稱為多命名。
多命名的概念是由BEM(Block, Element, Modifier)提出的,這是一種流行的CSS命名約定。按照BEM的規則,一個CSS類應該具有以下三個部分:
.block {} .block__element {} .block--modifier {}
這種命名約定的好處是可以使CSS代碼更加規范和易于維護。多命名的方式則是在BEM的基礎上發展而來,它通過使用大量的嵌套,使得命名更加詳細和精確。
多命名的好處在于可以避免命名沖突和提高樣式的可讀性。例如:
.nav {} .nav__list {} .nav__list--sub {} .nav__list-item {} .nav__list-item--active {}
這樣的命名方式可以非常清晰地表達出HTML結構和樣式之間的對應關系,而且不容易出現重名問題。當移動端需要自適應時,我們往往會添加大量的媒體查詢,這時候使用多命名可以節省我們的代碼量。
然而,多命名也有一些明顯的缺點。首先,它會增加CSS文件的體積,導致頁面加載變慢。其次,如果命名不加以規范,過多的嵌套也會讓代碼變得混亂不堪。因此,我們在使用多命名的時候需要注意一些細節,避免濫用和過度設計。
下一篇css多張圖片創意排版