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"

BEMとFLOCSSとは？

BEMとFLOCSSとは

BEMについて

FLOCSSとは

BEMとFLOCSSの組み合わせ