BEMによるCSS設計(後編)

f:id:ryoutaku_jo:20190129215207p:plain

【結論】
・BEMでは、「block」と「element」の従属関係が
 分かる様に記述を行う。

・modifierは細分化する事で、
 応用が効きやすくなる。


【目次】


【本題】

前回の続き

下記の投稿の続きです。
ryoutaku-jo.hatenablog.com

「block」と「element」の従属関係

BEMでは、HTML構造に従って記述すると、
下記の様になってしまう場合があります。

<nav class='menu'>
  <ul class='menu__list'>
    <li class='menu__list__item'>
     <a class='menu__list__item__link'>

この様に「block__element__element__element」と、
延々と続き、記述する手間が増えてしまいます。

BEMでは、「block」と「element」の従属関係が
分かる事が重要なので、下記の様に記述して回避する方法があります

<nav class='menu'>
  <ul class='menu__list'>
    <li class='menu__item'>
     <a class='menu__link'>

modifierの活用方法

・細分化
「赤い大きなボタン」「青い小さなボタン」それぞれに
適用するmodifierクラスを作成したとします。

この場合、後から「赤い小さなボタン」「青い大きなボタン」を
実装する時に、またmodifierクラスを容易する必要があります。

そこで、modifierクラスを「赤いボタン」「青いボタン」
「大きいボタン」「小さいボタン」という様に目的毎に分けて、
必要に応じて組み合わせる事で、わざわざ同じ記述をする手間が省けます。


・「block」と「element」
modifierクラスは「block」と「element」のいずれにも設定可能です。
なので、「block」全体のデザインを変えたい場合は「block」
一部の「element」だけデザインを変えたい場合は「element」に
という様に使い分ける事が可能です。

総括

他にも調べると色々とテクニックがありますが、
全部網羅するのは、かなり時間が掛かりそうなので、
とりあえずここまでにしておきたいと思います。

CSS設計は、BEM以外にも様々な手法がありますが、
どれも一長一短なので、開発環境に合わせて、
最善の手法を利用するのが、最も効果的だと感じました。

《今日の学習進捗》

チーム開発:4日目
目コピでメルカリのトップページを作成。
Hamlの使い方で戸惑う場面が多々あった。

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

残り・・・「9489時間!」