HTML、CSSの実践の書き方

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を使わないものはモジュールに入れる