BEMによるCSS設計(前編)

f:id:ryoutaku_jo:20190128215723p:plain

【結論】
・BEMとは、CSS設計手法の一つ
 命名規則を設ける事で、可読性が高まり、
 メンテナンスが容易になる。

・但し、開発メンバー全員が命名規則
 理解する必要があるので、導入コストが高い


【目次】

【本題】

チーム開発でBEMを採用する事になりました

3日前から始まっているスクールのチーム開発において、
ビューはBEMの考え方に沿って作成する条件が課せられました。

個人でアプリを作成する際は、そこまで意識せずに命名していましたが、
今後チームメンバーと共有する事を考えると、しっかりとポイントを
押さえた方が良いと考え、BEMについて復習する事にしました。

BEMとは

定められた命名規則に沿って
クラス名を決めて、HTMLを記述する方法。

BEM は、Block-Element-Modifier の略称ですが、
その名の通り、Webページ上の各要素を
「Block」「Element」「Modifier」に分けて考えます。

Block(ブロック)・・・Webページを構成する大枠・塊(親要素)
Element(エレメント)・・・Blockに含まれる細部のパーツ・要素(子要素)
Modifier (モディファイヤ)・・・BlockやElementの見た目や振る舞いを変える要素

BEMの基本ルール

「block__element–-modifier」のように、
「block」と「element」は「__」で区切り、
「block」「element」と「modifier」は「--」で区切って、クラス名をつけます。

また、一つの「block」や「element」などを、
複数の言葉で表現したい場合は、「-」で単語と単語を区切ります。

・使用例

<nav class='header-nav'>
  <ul class='menu'>
    <li class='menu__list'>TOP</li>
    <li class='menu__list'>CONTACT</li>
    <li class='menu__list menu__list--back-black'>ABUOT US</li>
    <li class='menu__list'>SERVICE</li>
   </ul>
</nav>

BEMのメリット・デメリット

BEMを導入することで、下記の様なメリットがあります。
・一貫した書き方が保てる為、可読性が高まる
・複数人でコーティングしても、誰が見てもコードを理解できる
・クラス名が重複して、スタイルが適用されなくなる事態を防げる
・クラス名だけでHTML構造を把握できる
・Modifierにより見た目や振る舞いを
 容易に増やせるので、拡張性に優れている

但し、下記の様なデメリットもあります。
命名規則を厳格に守る必要があるのと、
 必然的にクラス名が長くなる為、コーティングが遅くなる

命名規則が独特なので、慣れるまで時間が掛かる為、
 未経験のチームに導入するには、学習コストが高くなる

以上のメリット・デメリットから、
下記の様なケースで導入するのが最適だと考えられます。

・規模が大きい
・長期的に運用する
・複数人で開発する

今回は、メルカリのクローンサイトの作成という事で、
長期的に運用させる予定は無いですが、ある程度規模が大きく、
複数人のチーム開発なので、BEMの導入が最適だと言えます。

総括

まだ説明が足りない部分がありますが、
長くなってしまったので、次回に持ち越したいと思います。

スクールのカリキュラムでは、簡単にしか触れていなかったので、
学び直す中で、勘違いしている部分が多々あることに気付かされました。

改めて、BEMの全容を理解する難しさを感じた一方、
こういった道しるべが無しに、自力で整合性の取れたCSS設計を考えるのは
至難の技だと感じました。

BEMについては、もう少し理解を深めて行きたいです。

《今日の学習進捗》

チーム開発:三日目
メルカリトップページのビューを作成(途中)
画像とテキストを横並びにさせた時、中央揃えがうまく出来ずに時間を食う。
最終的に、line-heightで無理矢理調整する。

学習開始からの期間 :52日
今日までの合計時間:512h
今日までに到達すべき目標時間:475h
目標との解離:37h
「10,000時間」まで、

残り・・・「9488時間!」