SCSSのファイル設計について Vol.2

settingディレクトリ

初期設定で必要なパラメータなどが定義されているSCSSファイルを格納するディレクトリです。

- scss
  - base
    _base.scss
    _reset.scss
  - mixin
    _btn.scss
    _font.scss
    _animation.scss
    _over.scss
    _etc.scss（その他）
  - module
    _header.scss
    _gnav.scss
    _main.scss
    _content.scss
    _snav.scss
    _side.scss
    _footer.scss
    _fnav.scss
    _share.scss
    _etc.scss（その他）
  - page
  - pulgins
  - setting
    _config.scss
    _function.scss
  style.scss

基本的には上のように_config.scssと_function.scssの2つのSCSSファイルが必要となります。
_config.scssは、ファイル名通り「設定」ファイルになります。
サイト共通で必要になる設定値を変数で定義しておくファイルです。
よく使用する変数として、次のような変数があります。

//ブレイクポイント
$breakPointList: 767px, 768px;

//メディアクエリ
$mq: (
  'sp': 'screen and (max-width: #{nth($breakPointList, 1)})',
  'pc': 'print,screen and (min-width: #{nth($breakPointList, 2)})'
) !default;

//画像格納ディレクトリ
$imgDir: '/img/';

//PCレイアウト時の最小横幅
$minPcContentWidth: 1000px;

//サイトで使用するカラー
$colors: #027744, #e43d60;

その他、案件によって必要になる変数はこの_config.scssに定義します。

続いて、_function.scssですが、ファイル名から想像できると思いますが、functionを定義するSCSSファイルになります。
ここでは例を挙げませんが、案件によっては、多く利用することになります。

pulginsディレクトリ

外部プラグインのスタイルを格納するディレクトリです。
jQueryのプラグインでcssファイルも付随してくることがあります。
そのような場合、html側で直接指定してしまっても良いのですが、もしimportしたい場合は、ここにCSSファイルを格納します。

- scss
  - base
    _base.scss
    _reset.scss
  - mixin
    _btn.scss
    _font.scss
    _animation.scss
    _over.scss
    _etc.scss（その他）
  - module
    _header.scss
    _gnav.scss
    _main.scss
    _content.scss
    _snav.scss
    _side.scss
    _footer.scss
    _fnav.scss
    _share.scss
    _etc.scss（その他）
  - page
  - pulgins
    slick.css
  - setting
    _config.scss
    _function.scss
  style.scss

上の例では、jQueryのプラグインslickスライダーを使用した場合、付随してくるslick.cssをpulginsディレクトリに格納し、該当のSCSSファイルからimportします。
ただ、pulginsディレクトリに格納せず、slick.cssをカスタマイズする目的で、mixinディレクトリに_slick.scssを作成し、定義するというやり方もあります。

pageディレクトリ

ページ単位で使用するスタイルが定義さているSCSSファイルを格納するディレクトリです。
このディレクトリが、最もボリュームが出てくるディレクトリになります。
CSSファイルを分割する場合、次のような分け方が一般的かと思います。

1. サイト共通で使用するCSSファイル
2. そのページ単体で使用するCSSファイル

「サイト共通で使用するCSSファイル」に該当するSCSSは、scssディレクトリ直下に格納しているstyle.scssとなります。

- scss
  - base
    _base.scss
    _reset.scss
  - mixin
    _btn.scss
    _font.scss
    _animation.scss
    _over.scss
    _etc.scss（その他）
  - module
    _header.scss
    _gnav.scss
    _main.scss
    _content.scss
    _snav.scss
    _side.scss
    _footer.scss
    _fnav.scss
    _share.scss
    _etc.scss（その他）
  - page
  - pulgins
    slick.css
  - setting
    _config.scss
    _function.scss
  style.scss

上の赤字になっているstyle.scssファイルです。
このSCSSファイルを、ルート直下にあるcssディレクトリにstyle.cssというファイル名で出力し、全ページのHTMLに読み込ませます。

出力元：/scss/style.scss
↓
出力先：/css/style.css

このSCSSファイルに定義する内容としては、サイト共通で使用するスタイルですので、baseディレクトリ、moduleディレクトリに格納されているSCSSファイルをimportすることになります。
また、それに必要なmixinディレクトリのSCSSファイル、settingディレクトリやpulginsディレクトリのSCSSファイルになります。
具体的には次のようになります。

@import './setting/config';
@import './setting/function';

@import '../../mixin/xxx'; //必要なmixinファイル

@import './base/reset';
@import './base/base';

@import './module/header';  //必要なmoduleファイル
・・・
@import './module/footer';

続いて「そのページ単体で使用するCSSファイル」に該当するSCSSファイルが、pageディレクトリに格納されるSCSSファイルになります。
例えば「株式会社xxxとは」というページがあったとします。

このページのディレクトリは、

/about/index.html

だとします。
このindex.htmlに必要なCSSファイルは次の2つになります。

■サイト共通で使用するCSSファイル
/css/style.css

■そのページ単体で使用するCSSファイル
/css/about/style.css

上の「サイト共通で使用するCSSファイル」に該当するSCSSファイルは、先ほど述べたscssディレクトリ直下に格納されているstyle.scssになります。
「そのページ単体で使用するCSSファイル」は、pageディレクトリに、該当htmlファイルと同じディレクトリで、style.scssを作成します。

//サイト共通で使用するCSS/SCSSファイル
/css/style.css
/scss/style.scss

//そのページ単体で使用するCSS/SCSSファイル
/css/about/style.css
/scss/page/about/style.scss

例えば、次のようなページディレクトリがあった場合
/about/greeting/index.html
/about/history/index.html
/product/index.html

この場合、SCSSのファイル設計は次のようになります。
/scss/page/about/greeting/style.scss → 出力先 /css/about/greeting/style.css
/scss/page/about/history/style.scss → 出力先 /css/about/history/style.css
/scss/page/product/style.scss → 出力先 /css/product/style.css

- scss
  - base
    _base.scss
    _reset.scss
  - mixin
    _btn.scss
    _font.scss
    _animation.scss
    _over.scss
    _etc.scss（その他）
  - module
    _header.scss
    _gnav.scss
    _main.scss
    _content.scss
    _snav.scss
    _side.scss
    _footer.scss
    _fnav.scss
    _share.scss
    _etc.scss（その他）
  - page
    - about
      -block
      style.scss
  - pulgins
    slick.css
  - setting
    _config.scss
    _function.scss
  style.scss

上のディレクトの赤字になっている箇所は、
/about/index.html
このページの「そのページ単体で使用するCSSファイル」に必要なSCSSファイルです。
style.scss以外に、blockディレクトリを用意します。
このblockディレクトリには、ページのコンテンツ部分のBlock要素と対になるSCSSファイルが格納されます。
例えば、このページの大枠のアウトライン要素が次のようなソースコードだとします。

<body>

<!-- header -->
<header class="header"></header><!-- /header -->

<!-- main -->
<main class="main">

<!-- content -->
<div class="content">

///about/index.htmlのコンテンツエリア

</div><!-- /content -->

</main><!-- /main -->

<!-- footer -->
<footer class="footer"></footer><!-- /footer -->

</body>

赤字のコンテンツ部分がこのページ特有のコンテンツになります。
そのほかに出てくるheader要素、footer要素、main要素、content要素は、サイト共通の要素になりますので、これらの要素に対応するSCSSファイルは全てmoduleディレクトリに格納されます。
それ以外の赤字部分のコンテンツのBlock要素に対応するSCSSが、
/scss/page/about/block/
こちらのディレクトリに格納されます。
もう少し具体的にこちらの部分を見て行きます。
例えば、次のようなソースコードになったとします。（content要素の中のソースコードのみを抜粋します。）

<!-- content -->
<div class="content">

<!-- sec -->
<section class="sec">
<h1 class="sec-tit">株式会社xxxとは</h1>
<p class="sec-txt">テキストテキストテキスト</p>

<!-- message -->
<section class="message">
<h2 class="message-tit">挨拶タイトル</h2>
<p class="message-txt">テキストテキストテキスト</p>
</section><!-- /message -->

<!-- history -->
<section class="history">
<h2 class="history-tit">沿革</h2>
<p class="history-txt">テキストテキストテキスト</p>
</section><!-- /history -->

</section><!-- /sec -->

</div><!-- /content -->

上のようなソースコードになった場合、Blockはsec、message、historyの3つあり、それぞれ対応するSCSSファイルは、次のようになります。

/scss/page/about/block/_sec.scss
/scss/page/about/block/_message.scss
/scss/page/about/block/_history.scss

- scss
  - base
    _base.scss
    _reset.scss
  - mixin
    _btn.scss
    _font.scss
    _animation.scss
    _over.scss
    _etc.scss（その他）
  - module
    _header.scss
    _gnav.scss
    _main.scss
    _content.scss
    _snav.scss
    _side.scss
    _footer.scss
    _fnav.scss
    _share.scss
    _etc.scss（その他）
  - page
    - about
      -block
        _sec.scss
        _message.scss
        _history.scss
      style.scss
  - pulgins
    slick.css
  - setting
    _config.scss
    _function.scss
  style.scss

これが吉本式BEM設計（BEM設計ベース）のSCSSファイル設計になります。
このようなSCSSファイル設計になった理由は、要素に設定されているスタイルがどのSCSSファイルで設定しているかが迷わない。
これを追求した結果になります。

例えば、上のソースコードで、message-txtのクラスに対して、スタイルの修正が入った場合、

1. ページ特有のコンテンツ部分　→ /scss/page/
2. ページのディレクトリが/about/　→ /scss/page/about/
3. messageというBlockの中のElement　→ /scss/page/about/message.scss
4. txtというElement ↓

message{
  &-txt{
    //修正対応箇所
  }
}

という流れで、該当のスタイル箇所に迷わずに見つけることができます。
SCSSファイルを細かく分けることに抵抗があるかもしれませんが、細かく分け、ルールに基づいて設計することで、見やすいSCSSファイル設計になります。
これが吉本式BEM設計（BEM設計ベース）のSCSSファイル設計です。