CSS をコーディングしてみて

BEM

block、 element、 modifire の分け方が難しかった。

Sass

&__, &-- のように書いていたが、

.test {
  ...

  &__content {
    ...

    &--large {
      ...
    }
  }
}

grep できなかったり、BEM の命名規則の明確さを損なうので、省略して書かない。

@extend とか使ってスタイルを継承できることを知らなかった。今後使ってみる。

Photoshop

Photoshop を印刷して、コーディング前に margin とか要素の幅とかをあらかじめ印刷した紙に書き込んでおくと CSS を迷わずかけた。

何日か使ったが、よく使い方がわかってない。。

webpack

環境構築方法があっているのか最後までわからなかった。とりあえず動いたから良かった。

参考

• styleguide/how-to-bem.md at master · manabuyasuda/styleguide · GitHub
• BEM を Sass で快適に書く方法 | maesblog