這次分享的是BEM

BEM分別是
B=>Block

E=>Element

M=>Modifier

Block 區塊
網頁是由多個區塊組合自成一區
在命名上則是當開頭的

.button
.header
.menu
.footer

Element 元素
為Block的一部分（子組件）
無法獨立於Block之外
不過有些Block可能沒有Element
在命名上會以Block的名稱加上兩個底線__作為開頭

.button__icon
.header__title
.menu__items
.footer__items

Modifier 修飾(我比較喜歡叫他裝飾!!)
用來定義Block或Element的狀態或屬性
同一個Block或Element可以允許多組Modifier同時存在
命名則是以Block或Element名稱加上一個底線作為開頭

.button_active
.header_align_top
.menu__item_promo
.footer__items_hover

實際運用上大概會像這樣

<div class="header">
    <h1 class="header__title"></h1>
    <p class="header__post"></p>
    <div class="header__imgitems">
        <div class="header__imgitem header__imgitem_hover">
            <img src="#">
        </div>
        <div class="header__imgitem header__imgitem_hover">
            <img src="#">
        </div>
        <div class="header__imgitem header__imgitem_hover">
            <img src="#">
        </div>
    </div>
</div>

介紹到這邊，我個人比較喜歡BEM
雖然命名的方式非常長又繁瑣
但是這樣可以很明確的知道Block下面有哪些元素又或者加了哪些裝飾！

以上是我發現問題與解決問題的過程跟方法，分享給大家~!