WordPress のテーマ開発をプラグインの wp-scss から node.js 上で gulp を走らせる方法に変えましたので、この際、CSS の設計思想に FLOCSS というものを取り入れてみようと思います。

• FLOCSS とは
• FLOCSS のディレクトリ構成
• クラスの命名規則
• Sass @use と @forward で効率化
  • 省略のルール
  • _index.scss
  • @use
  • @forward

01FLOCSS とは

FLOCSS とは、CSS の保守性を高めて再利用を可能にするための設計思想です。詳細は私が説明しなくても公式サイトや解説サイトがたくさんあります。

• FLOCSS（フロックス）

基本は、パーシャルファイルを次の3つのレイヤーと Objectレイヤーの子レイヤーに構成して管理することです。ですのでディレクトリもこのレイヤー通りにつくります（次項以降参照）。

• Foundation
• Layout
• Object
  • Component
  • Project
  • Utility

ただ、これを実際にやってみますと何をどこに入れるかは結構難しく、結局のところ手探りでやりながら自分なりのいい方法を見つけるしかないということです。

そしてもうひとつ、この FLOCSS には各要素にどんなクラス名をつけるかの命名規則というものがあります。Block、Element、Modifier の頭文字をとって BEM と言います。

• Block： ブロック
• Element： 要素
• Modifier： スタイル

各要素を上記に照らし合わせて block__element–-modifier というように命名していきます。ただ、これもかなり難しく、とにかく手探り状態で進むしかありません。いろいろググったとしても頭がクリアになるようなサイトはありません（笑）。できるだけ原則に則って自分のやりやすい方法を見つけるしかありません。

02FLOCSS のディレクトリ構成

まずは基本原則通りにディレクトリをつくります。

• foundation には、ブラウザスタイルの初期化やフォントサイズや行間、背景などの基本設定ファイル、変数ファイル、mixinファイルなどを入れます
• layout には、ヘッダー、メイン、フッターなどページを構成する大枠のブロックを定義するファイルを入れます
• object は、component, project, utility の3つのディレクトリをつくります。ただ、これが難しく、何をどこに入れるかはかなり迷います。基本は、
  • component には、再利用可能な小さなモジュール
  • project は、公式には「例えば、記事一覧や、ユーザープロフィール、画像ギャラリー」などとなっています
  • utility は、公式には「わずかなスタイルの調整のための便利クラス」などとなっています。ただ、現時点では、作成途中ということもあり何も入れていません（笑）

各ディレクトリの _index.scss については次項以降で説明します。

├─ foundation
   ├─ _reset.scss
   ├─ _base.scss
   ├─ _variable.scss
   ├─ _mixin.scss
   ├─  ...
   └─ _index.scss
   
├─ layout
   ├─ _header.scss
   ├─ _main.scss
   ├─ _sidebar.scss
   ├─ _footer.scss
   ├─  ...
   └─ _index.scss
   
├─ object
   ├─ component
       ├─ _icon.scss
       ├─  ...
       └─ _index.scss
   ├─ project
       ├─ _card.scss
       ├─  ...
       └─ _index.scss
   └─ component
       ├─  ...
       └─ _index.scss

└ style.scss

03クラスの命名規則

基本は block__element–-modifier です。ただ、現在のところ –-modifier はほとんど使っていません。たとえば、layout/_main.scss の例ですと、

<article class="l-main__article">
	<header class="l-main__articleHeader">
		<p class="l-main__articleDate">2023年10月7日</p>
		<h1 class="l-main__articleTitle">自然あふれる永保寺と美濃焼祭で歴史文化ある伝統工芸を満喫しよう</h1>
	</header>
	<div class="l-main__articleBody">
		<p>さわやかウォーキング、先週の幸田に続き多治見です。なんと、わずか1週間前は熱中症一歩手前になるほどの過酷なウォーキングでしたが、今回はややひんやりするほどで、歩けば「さわやかウォーキング」そのものの絶好のウォーキング日和です。</p>

以下略

こんな感じの html に対して、次の scss ファイルとなり、そしてコンパイルしますと、その下の表示になります。

@use "../foundation/variable" as v; // 説明は次項以降

.l-main{
    &__article{
	padding: 70px 0 20px;
    }
    &__articleHeader{
	position: relative;
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 50px;
        a{
            color: v.$text;
        }
    }
    &__articleDate{
        font-size: .6em;
        margin-bottom: 10px;
    }
    &__articleBody{
        p,
        figure{
            margin-bottom: 2em;
        }
 以下略

04Sass @use と @forward で効率化

以上のように、FLOCSS という設計思想にもとづいて開発を進めますと当然ディレクトリも階層化されファイルも細かく分割されることになります。その場合に、上の例のように @use で他のファイルを読み込んで使うことになります。

以下、そのもっとも（かな…？）効率的な方法です。

省略のルール

まず、省略のルールです。すでに上で使っていますが、Sass では次のものは省略して書くことができます。

• ファイル名の先頭の _
• 拡張子 .scss
• ディレクトリ内の _index.scss

ところで、暗黙の前提として拡張子を .scss としていますが、Sass にはもうひとつ .sass という拡張子があります。ややこしいですね。

まず表記ですが、言語の Sass を表記する時は1文字目のみ大文字です。そして、その言語表記に SASS記法 と SCSS記法の2つがあり、それぞれ拡張子が、.sass と .scss を使うということです。その違いはいろいろありますが、あまりごちゃごちゃ考えずに SCSS記法を使えばいいと思います。実際、情報も多いです。

_index.scss

上の項目「FLOCSS のディレクトリ構成」の各ディレクトリに _index.scss というファイルがあります。このファイルにはそのディレクトリ内の各ファイルをすべて @use または @forward で読み込んでおきます。たとえば、foundation/_index.scss は次のようになっています。

@use "reset";
@forward "variable";
@forward "mixin";
@use "base";

@use と @forward の違いは後述しますが、こうして _index.scss にディレクトリ内のすべてのファイルを読み込んでおけば、他のファイルからは _index.scss ひとつを読み込めば記述されているファイルすべてを読み込んだことになります。

ですので、最上位の style.scss は次のようになります。

@use "foundation";
@use "layout";
@use "object/component";
@use "object/project";
@use "object/utility";

ディレクトリ名だけになっているのは省略ルールにもとづいて _index.scss を省略出来るからです。これでコンパイルすればすべてのファイルを読み込んだ css ファイルが出来上がります。

こうすることで、各ディレクトリ内に新しいファイルを追加した場合には、そのディレクトリの _index.scss に新しいファイルを追加すればいいことになります。

また、上記「クラスの命名規則」で上げたサンプルコードも

@use "../foundation/" as f;

.l-main{
    &__article{
	    padding: 70px 0 20px;
    }
    &__articleHeader{
	    position: relative;
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 50px;
        a{
            color: f.$text;
        }
    }
以下略

とすれば、foundation ディレクトリ内のファイルをすべて読み込んだ状態になります。

@use

DartSass では、@import が廃止になり、@use または @forward を使います。たとえば、上のディレクトリ構成で _main.scss で foundaiton/_variable.scss に定義している変数を使う場合は、

// text color
$text: #454545;

@use "../foundation/variable";
// または
@use "../foundation/variable" as v;

.l-main{
    &__article{
	color: variable.$text;
	// または
	color: v.$text;
    }
}

というように、@use でファイルを読み込み、変数には名前空間をファイル名で指定する必要があります。名前空間は as を使って簡略化することができます。

@forward

@use で読み込んだファイルはそのファイル内のものしか引き継がれません。ですので、たとえば上にあげている foundation/_index.scss を例にとりますと、

@use "reset";
@forward "variable";
@forward "mixin";
@use "base";

を @use "variable"; としますと、最上位の style.scss は foundation/_index.scss しか引き継ぎませんので、_variable.scss は読み込めなく、そのファイルに定義している変数も使えなくなり、コンパイルはエラーとなります。

ということで、すでに完成しているテーマも含めすべて FLOCSS で書き直そうと思います。作業効率化を目指して、さらなる作業を増やしている毎日です（笑）。