CSSを複数人で管理しやすく！ FLOCSSの紹介
CSS を扱う際、地味に悩むのが class の名前を決めることだと思います。
・どんな class 名にすればいいかわからなかったり…
・class 名がいつの間にか重複してしまったり…
同じ CSSの記述を何箇所も書いてしまい、おかげで何箇所も修正しなきゃいけない！なんてことも。
そういった悩みを解決してくれるのが【 FLOCSS（フロックス）】
CSSファイルの構成と命名規則を共通認識にすることで、CSSの管理がしやすくなるということです。
「個人が管理するWebサイトで、CSSの修正も自分１人。」という場合は必要ありません。
ですが、管理する人が複数人の場合は何かしらの共通ルールが欲しいところ。
つまり、
思いやりのある CSS記述、それが FLOCSS ！
出来るだけ簡単に FLOCSS を紹介します。
目次
FLOCSS 覚える前に…
CSSファイルを分割して管理できる、SCSSを使える環境であることが望ましいです。
class名ごとにファイルが分割できることで、視認性の良さが変わってきます。
SCSSの記事も書いているので、よろしければどーぞ。
以下では 、SCSSありきで FLOCSSの説明をしていきます。
FLOCSS（フロックス）とは
Foundation → ファンデーション、基礎
Layout → レイアウト、枠組
Object → オブジェクト、内容物
で構成された CSSのこと。
頭文字をとって FLOCSS です。
階層構造（例）
foundation フォルダ（基礎）
Webサイトの基礎となる SCSSファイルを入れる場所。
_reset.scss → ブラウザ特有の CSSを解除する
_base.scss → Webサイト共通の CSS
_font-face.scss → @font-face の記述
_mixins.scss → ＠mixin の記述
_variable.scss → Webサイト共通の変数入れ
layout フォルダ（枠組）
Webサイトを構成する枠組みとなる SCSSファイルを入れる場所。
_l-site-wrapper.scss → サイト崩れを防ぐ記述
_l-header.scss → ヘッダー用
_l-nav.scss → Gナビゲーション用
_l-main.scss → メイン用
_l-article.scss → アーティクル用
_l-section.scss → セクション用
_l-footer.scss → フッター用
library フォルダ（JSライブラリ用｜お好みで）
JSライブラリに使っている SCSSファイルを入れる場所。
（ splide.scss, swiper.scss など ）
object フォルダ（内容物）
Webサイトの内容物（コンテンツ）に使う SCSSファイルを入れる場所。
Objectフォルダの中には、さらにフォルダがあり、
・component フォルダ
・project フォルダ
とあるのですが、
人それぞれの解釈違いでファイルが少し変わるためご注意を。
component フォルダ
繰り返し使う SCSSファイルを入れる場所。
_c-anime.scss → アニメーションに関する CSS
_c-button.scss → ボタンに関する CSS
_c-card.scss → カード型のレイアウト用
_c-heading.scss → 見出し用
_c-img.scss → 画像用
_c-list.scss → ul, ol 用
など。
project フォルダ
１つのまとまり（ページごと等）に使う SCSSファイルを入れる場所
_p-bread-crumb.scss → パンくず用
_p-contact.scss → コンタクトページ用
_p-loading.scss → ローディング画面用
_p-main-visual.scss → メインビジュアル用
_p-news.scss → お知らせページ用
_p-product.scss → 製品ページ用
_p-top.scss → トップページ用
など。
utility フォルダ（お好みで）
調整用に使う SCSS ファイルを入れる場所
_u-utility.scss ___ スマホ時に非表示や改行させる CSSを記述
接頭辞（prefix）について
接頭辞とは簡単にいうと「推測させる」ために付けるものです。
各ファイル名の頭に、
l-〇〇.scss → Layout の L
c-〇〇.scss → Component の C
p-〇〇.scss → Project の P
と付けることによって「どのファイルが、どこに属する」かハッキリさせます。
これは、class名にも付けます。（後述）
FLOCSS の構成に関する説明は以上です。
classの命名規則について
FLOCSS における classの命名規則は【 BEM 】を軸に使っています。
Block → ブロック、外枠
Element → エレメント、Block より内側の要素
Modifier → モディファー、異なる状態やバージョンを表す
頭文字をとって BEM です。
書き方のルールは【 MindBEMding 】が採用されています。
class名の決め方
基本的には、
Block の名前を Block-name のように ﾊｲﾌﾝ で繋げたり、
__Element（ｱﾝﾀﾞｰｽｺｱ 2つ ｴﾚﾒﾝﾄ）または __Element-name を Block名に繋げたり、
--Modifier（ﾊｲﾌﾝ 2つ ﾓﾃﾞｨﾌｧｰ）を Block名 や Element名 に繋げる感じです。
（例）
・Block__Element
・Block-name__Element-name
・Block--Modifier
など。
※ こういった使い方はしません。
・Block__Element__Element
・Block--Modifier--Modifier
（例１）header
<!-- ヘッダー -->
<header class="l-header c-anime--header">
<div class="l-header__inner">
<h1 class="l-header__logo">
<a class="l-header__logo-link" href="〜〜〜〜〜">
Webサイト名
</a>
</h1>
</div>
<nav class="l-nav">
〜略〜
</nav>
</header>こちらは headerの例です。
headerの CSSは【 layout フォルダ 】に属しているため、class名に接頭辞の［ l- ］を付けます。
３行目からは Elementを繋げる
l-headerという枠（ Block ）の中に、
__inner ｜ __logo ｜ __logo-link という要素（ Element ）がある。といった具合です。
２行目の c-anime--header
anime用CSSは【 objectフォルダ → componentフォルダ 】に属しているため、接頭辞の［ c- ］を付けて c-animeと命名。
アニメ用CSSを headerで使いたいから、
異なる状態を表すModifierを繋げたclass名、--header を記述。といった具合です。
（例２）main
<!-- メイン -->
<main class="l-main">
<section id="activity" class="l-section p-activity">
<div class="l-inner">
<div class="l-inner__heading p-activity__heading">
<h2 class="c-heading__primary c-heading__primary--activity">
活動内容
</h2>
</div>
<div class="l-inner__body p-activity__body">
<div class="p-activity__content p-activity__content--hoge">
<div class="p-activity__text-wrap">
<h3 class="c-heading__secondary">
ほげほげ
</h3>
<div class="p-activity__text">
<p>吾輩は猫である。名前はまだ無い。</p>
</div>
</div>
<div class="c-img__wrap c-img__wrap--p-activity">
<img class="c-img" src="〜〜〜.png" alt="〜〜〜" width="400" height="400">
</div>
</div>
<div class="p-activity__content p-activity__content--geho">
<div class="p-activity__text-wrap">
<h3 class="c-heading__secondary">
げほげほ
</h3>
<div class="p-activity__text">
<p>吾輩は猫である。名前はまだ無い。</p>
</div>
</div>
<div class="c-img__wrap c-img__wrap--p-activity">
<img class="c-img" src="〜〜〜.png" alt="〜〜〜" width="400" height="400">
</div>
</div>
</div>
<div class="l-inner__link p-activity__link">
<div class="c-button__wrap">
<button class="c-button">
活動内容ページへのリンクボタン
</button>
</div>
</div>
</div>
</section>
<section>〜略〜</section>
<section>〜略〜</section>
</main>こちらは main内にある sectionの例です。
sectionも、内枠にある innerも【 layout フォルダ 】に属しているため、class名に接頭辞の［ l- ］を付けています。
l-inner内は
6行目、l-inner__heading ___ 見出しの枠
12行目、l-inner__body ___ 内容物の枠
42行目、l-inner__link ___ ページ遷移する枠
という構成になっています。
３行目、p-activity
この sectionは「活動内容」をまとめているため【 objectフォルダ → projectフォルダ 】に属する activityとして、p-activityと命名しています。
p-activityという枠（ Block ）の中に、
__heading ｜ __body ｜ __content という要素（ Element ）などがある。といった具合です。
必要であれば、
異なる状態を表すModifierを繋げたclass名、--hoge などを記述します。（13行目・27行目のように）
共通のCSS
共通で使いまわせそうな所には、
・c-heading__primary → h１見出し用
・c-img → 画像用
・c-button → ボタン用
と、あらかじめ用意しているCSSを適用することで、保守性の高い記述ができます。
（例３）footer
<!-- フッター -->
<footer class="l-footer">
<div class="l-footer__inner">
<aside class="l-footer__contact-address">
<p class="l-footer__contact-text">テキストテキスト</p>
<h3>株式会社〇〇〇〇</h3>
<div class="c-button__wrap">
<a class="c-button c-button--tel" href="tel:+81-xxx-xxx-xxxx">電話番号：555-555-5555</a>
</div>
<div class="c-button__wrap">
<a class="c-button c-button--email" href="mailto:xxxxxxx@xxx.xx" target="_blank" rel="noopener noreferrer">メールはこちらをクリック</a>
</div>
</aside>
</div>
<!-- コピーライト -->
<a href="〜〜〜"><small class="u-c-w">©pazfinder</small></a>
</footer>こちらは footerの例です。説明は繰り返しになるので省略します。
SCSS記述の注意点
ファイル名に沿った class名しか書かないこと！
/* ダメな例 ------------------------------- */
// p-activityファイルに、異なるclass名が混在している
.p-activity.l-section {
margin-top: 20px;
margin-bottom: 20px;
// p-activityファイルに .l-innerが書かれている
.l-inner {
padding: 20px;
}
// p-activityファイルに .c-heading__primaryが書かれている
.p-activity__heading .c-heading__primary {
font-size: 24px;
}
}p-activity.scssファイルには、class名 .p-activityの Elementや Modifierしか書いてはいけません。
/* 良い例 ------------------------------- */
.p-activity {
margin-top: 20px;
margin-bottom: 20px;
}
.p-activity__body {
&__text-wrap {
display: flex;
flex-direction: column;
}
// .p-activity__body内の p 要素にCSS
& p {
font-size: 16px;
}
}class名をまたぐようなことはせず【 .p-activity内の p要素にCSSを適用する 】などは大丈夫です。
FLOCSS の命名規則に関する説明は以上です。
参考サイト
クラス名に悩む場合
FLOCSSを詳しく
![[CSS設計] 私のためのFLOCSSまとめ - Qiita](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJUU4JUE4JUFEJUU4JUE4JTg4JTVEJTIwJUU3JUE3JTgxJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFRkxPQ1NTJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02ZDM5YjIwMzMyYTA2MmUzN2JlMGFlMzFiODMyYzJjNw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlci1tYW5hLWNoYW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlNDlhODYxNzE0NTQ0ZjcxODg2MDI1NWZlMThlNzVl&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g5qCq5byP5Lya56S-U09SSUNI&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=44419bc9378d79f85072a2fe09bcb02d)
保守力を上げたい
最後まで読んでいただきありがとうございました。
