こんにちは。
HTMLやCSSの基礎をあらかた勉強し終わると、開発に効率の良いクラスの付け方などを勉強する人も多いのでは無いでしょうか？
そこでネットサーフィンをしているとクラス名の付け方のルールとしてBEMという記法を目にした人もいるかもしれません。
なぜBEM記法が開発で使われているかというと、最近のフロントエンド界隈では割と主流なSassとの相性がいいんです！
CSSではダメなの？
初めて聞くとこんな疑問が出てくると思います。
そこで今回は、BEMとSassが相性がいい理由とBEMでよく使われるmodifierの効率の良い書き方を解説していきます！
この記事は初学者向けの記事となっています。BEMってなんだろうという方はぜひ読み進めてみてください！
そもそもSassとCSSの違いは
それでは最近フロントエンド界隈では一般的なSassとは何なのかについて、この記事ではCSS初学者向けに簡単に解説します。
SassとCSSの違いを簡単にいうと
になります。
重複しているスタイルやネストの深い要素のCSSを効率よく書けるよう改良されたとても便利なCSSと覚えておけば大丈夫です。
サンプルコードで見てみると、下のようなCSSがあったとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.inner { background-color: blue; padding: 10px; } .inner ul { background-color: green; padding: 5px; } .inner ul li { background-color: yellow; padding: 5px; } |
「.inner」が何回も繰り返されている上に「ul li」とネストもあるのでこれらを1回書くだけで同じスタイルに反映できたら嬉しいですよね。
では上のコードをSassで書いた場合どうなるかというと
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@mixin bgc_pd ( $color , $padding ){ background-color: $color; padding: #{$padding}px; } .inner { @include bgc_pd(blue, 10); ul { @include bgc_pd(green, 5); li { @include bgc_pd(yellow, 5); } } } |
とてもシンプルになりましたね！
Sassではプログラミングを学習している人ではお馴染みの関数という仕様も組み込まれているので、何度も同じ記載をする時はこの仕様をフル活用して記述量を減らすことができます。
上のサンプルコードは関数に似たMixinという仕様を使っていますが、このような機能を使うとこれだけでCSSの記述量を減らすことができます！
また、Sassは親子の要素をすべて一つの親のネストとして書くこともできるので、このように外側に「.inner」を一つ書くだけで、あとはすべてそのネストとして書くだけでいいんです！！
ざっとSassの良さを解説しましたが、このSassと後に解説するBEMというクラス名の記法は非常に相性がいい言われています。
では順を追ってその秘密に迫りましょう！
BEMとは
BEMの書き方
みなさんはHTML要素にクラス名をつけていて「統一性が無いなぁ」とか「ページ数が増えた時にどうやってクラス名をつけた方がいいんだろう？」とか思ったことはないでしょうか？
現場ではどのようにクラスをつけているかというと、クラス名の付け方に「ルール」を設けていることが一般的です。
現場では一人だけで開発をしている場面は少ないと思います。プロジェクトの規模が大きければ大きいほど様々なエンジニアと開発する場面が増えると思います。
そこで便利なのがBEMという記法です。
BEMは「Block」「Element」「Modifier」の略で、ザックリと説明するとクラス名をこの3つのパーツで構成できるようにしようという書き方の総称になります。
それではサンプルコードを見ていきましょう。
|
1 2 3 4 5 6 |
<div class="article"> <h2 class="article__h2">見出し</h2> <p class="article__text">テキスト</p> <h2 class="article__h2--red"></h2> <p class="article__text">テキスト</p> </div> |
この「article」の部分がBEMのBlockと呼ばれる大枠のような役割を指す箇所になります。
続いて、「h2」や「text」の部分がElementと呼ばれる部分でBlockの中の各パーツを表し、アンダースコア×2 で繋ぎます。
そして「–red」の部分がModifierと呼ばれる部分で、複数の同一のパーツがあるけど若干スタイルを変えたい時など、それらを区別するために使われます。そしてModifierは –(ハイフン×2) で繋ぎます。
BEMとSassが相性がいい理由
なぜ市場でBEMとSassが相性がいいのかというと、BEMの重複するクラス名の書き方がSassの「ネスト」による書き方で効率化できるからです。
まずはサンプルコードを見てみましょう。
|
1 2 3 4 5 6 7 |
<!-- HTML --> <div class="article"> <h2 class="article__h2">見出し</h2> <p class="article__text">テキスト</p> <h2 class="article__h2"></h2> <p class="article__text">テキスト</p> </div> |
|
1 2 3 4 5 6 7 8 9 |
// Sass .article { &__h2 { font-size: 40px; } &__text { font-size: 20px; } } |
BEMで書かれたHTML要素をみてみると、「article」というクラス名がどのネストの要素にも重複していますよね。
Sassでは、「&」でクラス名をつなげることができます！
ですので、「.article__h2」を表したい時は、「.article」と「&__h2」をネストにするだけで指定できます。Sassの「&」でクラス名を接続できる仕様がBEMと相性がいいと言われる秘訣になっています。
この書き方をするとBlock内の各Elementの管理が非常にしやすいですよね！
Sassを使ってBEMのmodifierを効率よく書く方法
BEMでは、重複するBlockやElementの一部に若干のスタイルなどの仕様変更をする場合にModifierというパーツをクラス名の最後につけることがあります。
デザインの一部に変更などがあった場合などのメンテナンスや可読性を向上させる目的として、Sassの書き方がとても便利とされています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.article { &__h2 { font-size: 40px; &--red { color:red; } &--blue { color:blue; } &--green { color: green; } } &__text { font-size: 20px; } } |
このように「&」で接続させることによって、各Modifierの管理がとてもしやすくなりました。
急なデザイン変更の場合はこのModifierを追加、または削除するだけなので、メンテナンスもしやすく非常に重宝されています。
みなさんも一度コーディングしてみてその便利さを確かめてみてはいかがでしょうか！？
まとめ
いかがでしょうか？
今回はSassの利点からBEMの基本的な書き方、Sassを使ったBEMのModifierの便利な書き方までを初学者の方向けに解説しました。
この記事を読んだ方はすぐにでもSassを書いてみたいと思ったのではないでしょうか？
HTMLやCSSをある程度学んだ方はSassとBEMを組み合わせて可読性の高いコーディングができるよう目指しましょう！
