CSS是一門用于美化網頁的技術,BEM則是一個非常流行的命名規則,它可以讓我們更加易于維護和擴展CSS代碼。
BEM的全稱為Block, Element, Modifier,它的設計思想是將CSS的結構劃分為單獨的塊(Block),并指定內部裹套的元素(Element),最后使得這些塊和元素可以直接通過修改基礎的修飾符(Modifier)來實現重新定義樣式。
/* 將一個樣式塊定義為 Block */ .block { /* 為該Block內部的所有元素定義在線性方向上的排列方式 */ display: flex; align-items: center; justify-content: center; } .block__element { /* 定義一個元素,他會嵌套在Block中 */ } .block--modifier { /* 為Block中的元素定制修飾符 */ }
上面是一個基本的BEM例子,我們可以通過為Block添加一個修飾符的方式,重新定義樣式,這個模塊的內部布局和結構將不會被改動。這樣我們就可以以更為靈活的方式對CSS進行修改和維護。
總結來說,BEM可以更加清晰地維護CSS的結構和樣式,它是一種語義化的方法,可以幫助團隊協作開發性良好的CSS代碼。
上一篇css 如何實現空格
下一篇css 如何添加點擊效果