# LessでBEMってみたらかなりさくさくコーディングできた！という話

- リンク: https://torounit.com/blog/less%e3%81%a7bem%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e3%81%8b%e3%81%aa%e3%82%8a%e3%81%95%e3%81%8f%e3%81%95%e3%81%8f%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%a7%e3%81%8d/
- 公開日: 2013-12-12T09:30:52+09:00
- 作成者: Toro\_Unit

[BEM](http://bem.info/)を使ったCSSのクラス設計([MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/))
ですが、これをSassでやろうとすると、結構泣けてきます。

たとえばこんな感じになるんでしょうかね。

    ```decode:true
    $block: ".block";
    #{$block} {
    	display: block;
    }
    #{$block}__element {	
    	border: 1px solid #CCC;
    }

    #{$block}__element_modifier {
    	border-color: #FFF;
    }
    ```

また、Sass 3.3以降だと、

    ```decode:true
    .block {
    	display: block;
    	@at-root {
    		#{&}__element {
    			border: 1px solid #CCC;
    			@at-root {
    				#{&}--modifier {
    					border-color: #FFF;
    				}
    			}
    		}
    	}

    	//もしくはこんな感じ
    	@at-root {
    		#{&}__element {
    			border: 1px solid #CCC;
    		}

    		#{&}__element--modifier {
    			border-color: #FFF;
    		}
    	}
    }
    ```

こんな感じで、BEMれるようです。
 参考: [BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号](http://blog.ruedap.com/2013/10/29/block-element-modifier)

ただ、@at-rootなどを乱発したり、いちいちshiftをおしながら#{&}って入力していくのは、
ちょっと大変すぎるなと個人的には感じます。というかめんどくさい。せっかくネストし
て楽にかけるはずのCSSが、より大変になっている気がしてしまいまして。

## LESSでやってみる

Lessだと、こんな感じに書けて、

    ```decode:true
    .block {
    	display: block;
    	&__element {
    		border: 1px solid #CCC;
    		&--modifier {
    			border-color: #FFF;
    		}
    	}
    }
    ```

このソースを、[lessをcssに変換(less2css) | Magonote-tools](http://magonote-tools.com/ja/tools/css/less2css)
にコピペするなり、普通にlessで走らせるなりすると、

    ```decode:true
    .block {
      display: block;
    }
    .block__element {
      border: 1px solid #CCC;
    }
    .block__element--modifier {
      border-color: #FFF;
    }
    ```

こうなります。こんな感じでLessはネストしつつ、しっかりBEMなCSSが出力されます。非常
に直感的です！

### 留意点

SassとLessの大きな違いとなっていたextendがLess1.4から実装されましたが、&を含むセレクタ
のextendはできないようです。また、実際に出力されるセレクタを指定してもextendはでき
ないようです。

なので、.block__element–modifierに.block__elementのスタイルを継承するようなことは
できず、html側で両方のclassを指定する必要があります。

 [BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号](http://blog.ruedap.com/2013/10/29/block-element-modifier)
でも言及されていた、HTMLが冗長になってしまうと言う問題に対処することは難しいです。

## まとめ

Windowsでも導入が簡単・JavaScriptとの相性が良いなどのSassには無いメリットもあるし、
Compassでよく使うMixin等の移植もそこまで難しくないです。CssSpriteもCompass以外の
ツールで対応できますしね。

Sassに比べるとCompassのようなフレームワークが無かったり、extendもSassのほうが若干
協力だとかで
 なかなかLessを使おうという場面は少ないとは思いますが、それでもBEMと
の相性がよいというのはなかなか見逃せない部分じゃないかなと思います。

LessのextendもSassには無い書き方があったりしておもしろいですし、用途によって使い分ける
となかなか楽しいんじゃないですかね。