BEMとFLOCSSとは
BEM（MindBEMding）は一意なクラスを作るための命名規則
FLOCSSはCSSファイルをモジュール化するための命名規則
（参考：https://backlog.com/ja/blog/how-to-write-markdown/）
この命名規則に従うことで、
1.クラス名に悩む必要がなくなる
2.クラス名を見ることである程度何に対応しているかわかる
3.各要素を管理しやすくなる
などなど…
BEMについて
BEMとはBlock Element Modifierの略称。この3つを組み合わせてクラス名を決めること。（調べた結果、Modifierは２つに比べてあまり使われない模様）
各説明は以下の通り。
Block：大きな要素
Element：Blockを構成する要素
Modifier：BlockとElementのスタイルの一部を変えるもの
BEMを取り入れることで
保守性が高くなる
BEMの規則上block要素が1つになるので、各要素のまとまりごとに管理することができ、要素の追加、削除を簡単に行うことができる
可読性が上がる
BEMはblock__element--modifierと、記述する規則があるため、SCSSで記載する際にネストが深くなりすぎず、すぐに読み解くことができる。
再利用がしやすい
BEMはblockを起点として1つの塊で使用しているため、ページ内でコンテンツを移動したときや、同じデザインでコンテンツを追加した際に、他のスタイルによる影響を受けないため再利用がしやすくなる
（参考：https://qiita.com/ryo_cy/items/a328ea7779f8f52e5f22）
また、記入の仕方は以下の通り
class="block__element–-modifier"
blockとelementはアンダースコア2つで区切る
Elementとmodifierはハイフン2つで区切る
ハイフンとアンダースコアは2つ
block, element, modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る
ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用
例）
class="sidebar__title"←サイドバーのタイトル
class="article__text"←記事のテキスト
FLOCSSとは
1つのCSSファイルにまとめて記述するのではなく、スタイルを適用するレイヤーやパーツごとに、ファイル単位で分割・モジュール化して管理しやすくする。
Foundation Layout Objectの頭文字をとったもの。
３つの説明は以下の通り。
Foundation←reset.cssなどデフォルトのスタイルを記述するCSSファイルを格納
Layout←ページを構成するheader, main, footerという大きな枠のスタイルを記述するCSSファイルを格納
Object←プロジェクト内で繰り返し使われるビジュアルパターン。さらに「component」「project」「utility」のレイヤーに分けられる。
各々を分割してファイルをまとめる。
例）
css
┣ Foundation
┃ ┗ base.scss
┣ Layout
┃ ┣ footer.scss
┃ ┗ header.scss
┗ Object
┣ Component
┃ ┣ background.scss
┃ ┣ btn.scss
┃ ┣ module.scss
┃ ┗ section.scss
┣ Project
┃ ┣ article.scss
┃ ┣ grid.scss
┃ ┣ icon.scss
┃ ┗ media.scss
┗ Utility
┣ display.scss
┗ text.scss
（参考：https://tech.playground.style/workstyle/css-design/）
BEMとFLOCSSの組み合わせ
クラス名に接頭辞（layoutなら「l」、objectなら「c(component)」「p(project)」「u(utility)
」）をつける。
例）
class="l-header__title"
class="c-botton"
↧