BEMとSassとHamlで開発をする！

BEM記法

BEM記法とはblock(集合)__element(要素)--modifier(状態)で表すcssの概念です。

僕がこの記法をオススメするのは、修正がしやすい、見やすい、利便性が高いと感じるからです。 複数での作業をする中で、一番大変なのは、入れ子になっているcss要素の修正です。 何が親にあるのか探したり、似たデザインをかましたいときに探すのがとても面倒。 けれどBEM記法をうまく使う事で、修正や再利用性がグンと増す。 自分もまだ完璧にBEMを使いこなしてるとは思いませんが、最近仕事で積極的に使うようにしていて使えば使うほど良さが分かってきました。 正直最初はクラス名長過ぎて分かりづらいと思っていましたが使い始めるとcssの記述が遥かに楽になりました。

自分的にはSassとBEM+αで Haml を合わせるのがかなり好みです。一番きれいにまとまるし、とても使いやすい！ インデントで管理されるsass記法は本当に無駄がなくすばらしいですね。.scssもsass記法に入るみたいなのですが、個人的には {} すら書きたくないので、sass記法オススメです。

例: BEM記法

<div class="block">
  <div class="block__element">
  <div class="block__element">
  <div class="block__element--modifier">
</div>

例: Haml記法

%section.item-list
  %h1.item-list__heading アイテムリスト
  %ul.item-list__items
    %li.item-list__item
      %a アイテム１
    %li.item-list__item
      %a アイテム２
    %li.item-list__item
      %a アイテム３

%section.item-list--white
  %h1.item-list__heading アイテムリスト
  %ul.item-list__items
    %li.item-list__item
      %a アイテム１
    %li.item-list__item
      %a アイテム２
    %li.item-list__item
      %a アイテム３

例: Sass記法

.item-list
  padding: 10px
  
  &--white
    @extend .item-list
    background-color: $white

  &--red
    @extend .item-list
    background-color: $red

  &__heading
    padding: 10px
    
  &__items
    overflow: hidden

  &__item
    float: left
    display: block
    position: relative

    &:before
      content: '>'
      position: absolute
      width: 20px
      height: 20px

    %item-anchor
      padding: 10px
      display: block 

    a
      @extend %item-anchor
      color: $blue
      background-color: $white
  
  &__item--active
    @extend .item-list__item

    a
      @extend %item-anchor
      color: $white
      background-color: $red

&で親セレクタを継承できるので親要素の名前を変えるだけでかなり利便性のあるバリエーションが作れる。

{&}で親セレクタをネストさせる事も可能

ちなみに.scssとsassの違い

項目 .scss .sass
{} いる いらない
; いる いらない
: 半角スペース いらない いる
ミックスイン @mixin =
インクルード @include +
拡張子 .scss .sass

自分が意識しているのはベースとなる要素を作り、それを@extendしてcolorを装飾したりすることによってプロパティ(color:)の衝突がなくなることだ。bootstrapとか使ってて思うのが色やサイズを何度も上書きしたりしているので細かい修正が大変だったりする。 こったデザインがなくてbootstrapをガッツリ使用するなら便利ですが。

BEMの特徴

  • 長所

    • 分かりやすいし、慣れると楽
    • 修正が楽で人のコードを読み取りやすい
    • 入れ子になりにくいから再利用しやすい

  • 短所

    • htmiが長くなる
    • BEMを知らない人からすると結構意味分からん

参考サイト:引用

次回はCSS設計について考える >>> BASE, LAYOUT, MODULE, STATE, THEME