Blog ブログ
Sassは非常に効率よくCSSを書けますが、FLOCSSを使うと可読性が高まりさらに効率アップするので人気です。
管理もしやすくチームでの作業に最適な一方、FLOCSSの概念やルールが細かく理解しづらい点もある為、今回はSassとの相性が最強なFLOCSSについてまとめます。
FLOCSSのディレクトリ構成
FLOCSSとは、Sassファイルを複数に分けたりクラス名を規則的に書くことで可読性を高めるCSS設計です。
foundation layout object の３つで構成されており、Sassファイルを分割します。
scss
├── foundation
│ ├── _base.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
└── object
├── component
│ ├── _button.scss
│ └── _ttl.scss
├── project
│ ├── _nav.scss
│ ├── _hamburger.scss
└── utility
Foundation
ベースとなる記述を書いたscssファイルのディレクトリで、大抵、_base.scssが入ります。
中身はこんな感じで、ページ全体で使用するスタイルやfont読み込みなどを記述します。
html {
color: #262626;
background: #fff;
font-size: 16px;
line-height: 1.6;
word-break: break-all;
}
a {
color: #333;
text-decoration: none;
}Layout
headerやfooterなどの共通パーツを記述するディレクトリです。
Object
最小単位の共通パーツを記述するディレクトリです。
Layoutと違い、ボタンなどの小さいパーツの共通パーツを記述します。
objectには
- component
- project
- utility
がありますが、弊社では活用していないので割愛します。
※Layoutも使ってない
基本の構成ルールはこんな感じですが、弊社ではもっと使いやすいようアレンジしたものを使用していますので最後にご紹介します。
FLOCSSの命名規則（BEM）
BEMの考え方に基づいたクラス命名をし、”l-” “c-“などの接頭辞をつけます。
接頭辞
基本的には、componentなどのディレクトリの頭文字をハイフンで繋げてクラス名をつけます。
c-btn というクラス名の場合は、componentに記述するという感じです。
<div class="c-btn"></div>BEM
Block Element Modifier の頭文字を取ったもので、それぞれ「__」などを使用して分割して考えます。
<div class="c-btn">
<a class="c-btn__link" href=""></a>
</div>Block__Element のように、BlockとElementは「__」で繋ぎます。
上記のコードだと、c-btnがBlockでlinkがElementです。
それぞれの特徴やルールについて解説します。
Block
- sectionなど、要素を囲む大枠
- 単語を繋げるときはハイフン１つで繋げることが多い（例：c-btn-wrap）
- Blockのみの使用OK
Element
- 必ずBlockの子要素に使用
- 「__」（アンダーバー２つ）で繋ぐ
Modifier(使用頻度低い)
- Block Element どちらに繋げてもOK
- プラスアルファの指示をするときに使用
- 「–」（ハイフン２つ）で繋げる
このように命名することでSassの可読性が格段にあがります。
次章ではSassの記述について解説します。
FLOCSSとSass
FLOCSSとSassの使用例をご紹介します。
Elementを「&__」で入れ子にするイメージです。
まずは以下のようにクラス命名↓
<div class="c-header">
<ul class="c-header-list">
<li class="c-header-list__item">
<a class="link" href="">ブログ</a>
</li>
<li class="c-header-list__item">
<a href="">お問合せ</a>
</li>
</ul>
</div>Sassは以下のようになります↓
.c-header {
background: #000;
}
.c-header-list {
display: flex;
justify-content: space-between;
&__item {
width: calc((100% - 40px) / 2);
.link {
display: inline-block;
padding: 20px;
background: #fff;
color: #000;
}
}
}間違ってもBlockの「-」で区切らないように注意です。
※可読性が最悪です
NG例↓
.c-header {
background: #000;
&-list {
display: flex;
justify-content: space-between;
&__item {
width: calc((100% - 40px) / 2);
}
}
}弊社のFLOCSS
FLOCSSは便利な反面、細かなルールが多いのが難点です。
弊社ではよりシンプルでわかりやすいものを使用しているので紹介します。
ディレクトリ構成
scss
├── base（foundationの役割。全体のスタイルを記述）
│ └── _base.scss
├── mixin（関数定義）
│ └── _mixin.scss
├── modules（共通パーツ）
│ ├── _c-animation.scss
│ ├── _c-footer.scss
│ ├── _c-header.scss
│ ├── _c-layout.scss
│ ├── _c-pagetop.scss
│ ├── _c-paging.scss
│ ├── _c-parts.scss
│ ├── _c-side.scss
│ └── _index.scss
├── page（各ページの記述）
│ ├── _home.scss
│ └── _index.scss
├── plugins（プラグインのcss上書き）
│ └── _index.scss
├── setting（色の定義など）
│ └── _setting.scss
└── style.scss命名規則
命名規則もシンプルでとてもわかりやすいので紹介します。
接頭辞
“p_” ”c-“ の２つのみ使用します。
“p_”は、各ページのみで使用するスタイルの場合
“c-“は、共通パーツの場合
です。
シンプルでわかりやすいです！
BEM
Modifierは使用しません。
Block__Element が基本です。
結論以下のようになります↓
<section class="p_home-about">
<div class="p_home-about__box">
<h2 class="c-ttl01">About</h2>
<div class="p_home-about__img">
<img src="/img/home/home_about01.jpg" alt="" />
</div>
<div class="p_home-about__txt">
<h2 class="c-ttl01">About us</h2>
<p class="p_home-about__cap">
テキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="c-link-wrap">
<a href="/" class="c-link">
<span class="c-link__txt">リンク</span>
</a>
</div>
</div>
</div>
</section>-解説-
<section class="p_home-about">
<div class="p_home-about__box">
//省略
</div>
</section>“p_home-about”はBlockで、「homeページのaboutというsection（大枠）」です。
homeというページでしか使用しないスタイルなので接頭辞は”p_”となります。
“p_home-about__box”は、「homeページのaboutというsectionの中のbox」です。
Sassはこのようになります↓
.p_home-about {
background: #000;
margin-top: 80px;
&__box {
padding: 0 20px;
text-align: center;
}
}まとめ
いかがでしたでしょうか。
ルールが複雑なFLOCSSですが、使いやすいようにアレンジして生産性をあげることも可能です。
- MHWORKSについて (1)
- サイト制作 (1)
丁寧にお答えします！