BEMとSMACSSを組み合わせる
※Sassを覚えたらSassも取り入れる
【BEM】
{Block}__{Element}
{Block}-{Modifier}
{Block}__{Element}-{Modifier}
----- 例 -----
.archiveItem {
margin-bottom: 20px;
}
.archiveItem__inner {
display: flex;
padding: 10px;
}
.archiveItem__thumb {
margin-right: 20px;
}
【SMACSS】
– Base
– Layout
– Module
– State
– Theme
----- 例 -----
body {}
html {}
/*---------- Layout ----------*/
.l-header {}
.l-footer {}
.l-main {}
.l-sidebar {}
/*---------- Module ----------*/
.button {}
.is-button-warning {}
.label {}
.is-label-hidden {}
.is-label-error {}
.heading {}
/*---------- Theme ----------*/
.dark-mode {}
.light-mode {}
※BEMが使えるものはレイアウトに入れ、BEMを使わないものはモジュールに入れる