我使用的Bem的習慣

2022-04-03 15:55:42 字數 782 閱讀 1842

在基於bem命名思想的基礎上,我整理一些實用的點:

bem,b即block(塊),e即element(元素),m即modifier(修飾符)

塊:最頂層,可包含塊和元素

元素:被塊包含,通常為最終被包含項,即無子代,當然,也有例外,它有時也會包含其他,如:

<

div

class

="media"

>

<

img

src="logo.png"

alt="foo corp logo"

class

="media__img--rev"

>

<

div

class

="media__body"

>

<

h3 class

="alpha"

>welcome to foo corp

h3>

<

p class

="lede"

>foo corp is the best, seriously!

p>

div>

div>

應注意的,它內部的東西class單獨命名,最好不要有層級關係

修飾符:可修飾塊和元素,表示一種狀態

注意,不是所有時候都用bem,當你覺得乙個dom結構符合使用bem的條件時,你就可以用

完整的class名結構如下:

block-name__element-name--modifier

我的命名習慣

1,小寫,兩個詞中使用 來連線。2,收集專業的詞語 3,固定縮寫詞 a,型別 by byty b bool w word dw dword i int l long f float d double str cstring c char sz char p pointer lp long point...

我的習慣清單

從2010年5月21日開始執行 我要養成的好習慣 我需要改掉的壞習慣 每天早晨6 40起床,看半小時與技術無關的書籍。晚上吃的多。做事不拖拉,第一次就把事情做好,做徹底,不要為沒做好的事情找藉口 理由。看電視時間過長。學會拒絕,無論是生活中 朋友中 還是同事 工作中。看電視時間過長。每天早上上班和下...

BEM的命名規範

css 的命名規範又叫做bem規範,為的是結束混亂的命名方式,達到乙個語義化的css命名方式。bem是三個單詞的縮寫 block 塊 代表更高階別的抽象或元件,element 元素 block的後代,以及modifier 修飾 不同狀態的修飾符。命名方法 block element modifier...