flocssを使ったコーディングルールについて

他社様と協業する機会がありまして、その際にflocssを使ったコーディングルールで案件を進めることになりました。
なかなか社内でコーディングルールを統一することが少なく、新人さんが入社したときに
「どういったルールでコーディングするのが適切ですか」と聞かれても
「担当者各々で異なるので、ひとまずは自分のルールで進めてもらってもOK」という感じで進めてきました。

これまでは技術者集団だったので、それでもよかったですが今後未経験の方が入社したときは
そうも言ってられないな～と思いflocssを使ったコーディングルールについてまとめておこうと思います。

正直、flocssを使ったコーディングルールは他にもわかりやすくまとめているサイトがあるので、
そっちのほうが参考になります。

あくまで私個人のメモ用のブログという感じなので、悪しからず…笑

class名はBEM（Block・Element・Modifier）ベースで作成する

BEM（Block・Element・Modifier）方式とはなんぞ！？
という方は、詳しくは下記をご覧ください。

BEM（Block・Element・Modifier）

flocssはBEM（MindBEMding）方式をベースとしてclass名を付けていきます。
書き方としてはこんな感じ。

[プレフィックス]-[Block]__[Element]–[Modifier]

▼参考例


<header class="l-header"><h1 class="l-header__logo-type"></h1></header>

BEMベースの場合、必ず頭にプレフィックス（接頭辞）を付けます。
使用するプレフィックスは以下のように決まっています。

【Layout】
l-
ページを構成する要素に対して使用するクラス
l-headerやl-footer、l-sidebarなど

【Component】
c-
複数のページで再利用できるパターンとして、小さな単位のモジュールを定義するクラス
c-button、c-linkなど

【Project】
p-
プロジェクト固有のパターンに対して使用するクラス
p-about、p-historyなど

【Utility】
u-
ComponentとProjectで定義した内容を、一時的に変更した場合に
強制的にスタイルを当てたりする調整用のクラス

マルチクラスは可能

flocssを用いたコーディングではでは一要素に対して複数のclassを指定（マルチクラスが）できます。


<div class="p-button p-link-pc"><a></a></div>

JavaScriptを定義する場合のclassは「is-」や「js-」を使用する

JavaScriptやjQueryでclassを付ける場合、「js-XXX」を付けます。
そして、そのJavaScriptやjQueryにCSSを当てる要素には「is-XXX」を付けます。

原則「js-XXX」というclassにCSSを充てるのは禁止です。

カスケーディングは禁止

カスケーティングってなんぞ？って感じの方が多いと思います。
公式のほうでは下記のように記載されています。

『後ろのレイヤーになるほど具体的になり、カスケーディングにおいて強いルールである必要があります。そのため、レイヤーの順序を前後させてはいけません。』

つまり、

// Component
.c-button {　←これだけはいいけど
  ...
}
.c-dialog .p-button { ←これはダメ
  ...
}

// Project
.p-comments {　←これはいいけど
  ...
}
.p-articles .c-comments { ←これはダメ
  ...
}

ということです。ソース見たほうが断然わかりやすいですよね。
上記の例ように、「p-」が含まれたクラス名の中に「c-」が含まれたクラスが入っていたり、その逆があると混乱してしまいます。
これは禁止だよ～ということです。

ざっとflocssの使用方法についてまとめてみました。
あまり長くならないように心掛けたつもりが長くなってしまいましたね笑

みなさんも試してみてください～

Share: