iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

三十哩路,我的前端學習路程系列 第 7

Day07::我所知道的 CSS設計模式與架構之BEM

這次分享的是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下面有哪些元素又或者加了哪些裝飾!

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


上一篇
Day06::我所知道的 CSS設計模式和架構之OOCSS
下一篇
Day08::我所知道的 CSS Grid Layout
系列文
三十哩路,我的前端學習路程30

尚未有邦友留言

立即登入留言