４日目：FLOCSSとBEMを混ぜること、その他（初学）

本日の業務での学び

・CSS設計において、FLOCSSとBEMを混ぜ合わせることについて　←メイン
・pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

今日は作業中心だったため少なめです。

CSS設計において、FLOCSSとBEMを混ぜ合わせることについて

まず二つについておさらい。

FLOCSS

-Foundation
　初期化やタイポグラフィなどの土台作り

-Layout
サイドバーやメインコンテンツエリアなどのブロックのスタイルを定義（接頭辞l-)

-Object
・Component 再利用できるパターン(接頭辞c-)
・Project プロジェクト固有のパターン(接頭辞p-)
・utility わずかな調整などのお助けクラス(接頭辞u-)

<header class="p-headBlock">  /*FLOCKSS例*/
   <div class="p-wrapper">
      <div class="c-btn">
      </div>
   <div>
<header>

フロックスは、
再利用性:無限大
保守性　:かなり低
の印象を受けた。

BEM

-Block 塊（もっといい表現が思いつかない)

-Element Blockを構成する要素。

-Modifier blockまたはelementのバリエーション違い

自分の勤め先では、mindBEMdingの命名規則通り、
block__Element--modifierで記述する。

<header class="headBlock">  /*BEM*/
   <div class="headBlock__wrapper">
      <div class="headBlock__wrapper__btn--ok">
      </div>
   </div>
</header>

ベムはは、
再利用性:どん底
保守性　:超高
の印象を受けた。

FLOCSSとBEMのキメラ？

実務では、命名規則：BEM中心
　　　　 設計思想:FLOCSS中心でいいとこ取りをするらしい。
→一体どういうこと？？

解）BEMのBLOCK ＝FLOCSSのELEMENTとして扱う。
小さなBEMの部品がいっぱい集まってるイメージ！（多分）
例を見ていきます。

<header class="l-headerBlock">
   <div class="p-headBlock__wrapper">
      <div class="c-btn--ok"><div>
      <div class="c-btn--no"><div>
   </div>
</header>

この例では、再利用したいボタン部分をBLOCK = ELEMENTと見做すことで、
再利用が可能になっている。（.l-headerBlock外、.p-headBlock__wrapper外でも使用可）
そしてBEM表記によってクラスのダブりが起きにくい&どれがどの入れ子かわかりやすい。

まぜこぜにすることで、BEM表記部分は繋がりがわかりやすい&CSSで指定が被りにくいし、
FLOCSS設計によって、再利用やユーティリティの恩恵にあずかることができる！
パチパチ。

pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

そんなことできるのでしょうか。 できました。

<!-- HTML -->
<p class="memory">
   <a class="memory__link">こちら</a>
   <p class="memory__txt">記憶を飛ばしたいかたはこちら</p>
</p>

/*CSS*/
.memory {
   position: relative;
   width: 100px;
   height: 100px;
}
.memory__link {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2; /*親タグにもよるが、スマホ版で押しにくくなる対策*/
}

こうすると、親タグごとクリックすることができます！
どうしても親タグをaタグにして、要素を入れ子にできない時に効果的です。

今日は以上！