みなさんは普段、CSS設計（命名規則）は既存の設計手法を利用していますか？独自ルールを利用していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［CSS設計（命名規則）］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．CSS設計（命名規則）

１）基本的に、BEM・OOCSS・SMACSS・FLOCSSなどのCSS設計手法を利用します。

意図１：
CSSは自由に設計が行えますが、制作途中や運用時に破綻する可能性が高く、一定のルールに基づいた設計を行うことが好ましいです。

２）独自の設計を利用する場合は、構築前にCSS設計のルールを決定します。そして、決定したルールをドキュメント化することを推奨します。

２．策定までの流れ

［CSS設計（命名規則）］について行ったSlackでの流れを、公開議事録として掲載します。

吉永さん：
CSSの命名規則はどれを採用してますか？

ヒカル：
僕はSMACSSを利用しているので、SMACSSの命名規則を使っています（CSS設計思想の事ですよね？？）。
過去にFLOCSSとBEMは使ってみました。
・SMACSS → ちょうどいい
・FLOCSS → ルールが厳密すぎて小規模サイトに向かない気がする
・BEM → 作法通りに使うとクラス名が長くなりすぎる
OOCSSはまだ試していないです。
先日のMTGでBEMとSassの相性の話を聞いて、上手に使えばBEMも良さそうだなぁと感じています。

吉永さん：
はい。そうです！
自分はフリーランスになる前に働いてた会社の命名規則が SMACCS + BEMだったので今もそれをベースとしています。

桑島さん：
私cssの命名規則はまったく意識してなかったので、なんかSMACSSっぽいけどSMACSSではないよねって感じの独自の書き方してると思います。
ちゃんと規則にのっとった書き方をしたい…

稲富さん：
BEM・OOCSS・SMACSS・FLOCSS のウチ優先して利用するモノなんてありますかね？

ヒカル：
んー、個人的にですが、案件の規模で向き不向きがあるかなぁと…
（大規模サイトはコンポーネント化する印象で、小規模サイトは独自のレイアウトが多いという前提で…）
BEMとSMACSSはどの規模にも合う印象ですが、OOCSSは同じパーツが多く出る中・大規模、FLOCSSもSMACSSより大規模な案件で使うかなぁと。
なので、どれかを優先するというより、よく受ける案件の規模によるかもしれないです！

ホナミさん：
私まだ、この単語の理解が浅いです。
「よく受ける案件の規模による」
私の場合、コーポレートサイト、10ページぐらいが多いです。どちらを採用するのがいいのでしょうか？

ヒカル：
10ページのコーポレートサイトなら、吉永さんが使われている、BEMとSassの書き方が一番良さそうな気がします！

桑島さん：
共有ガイドライン制作を始めてから、CSS手法を意識してサイトを作っているのですが、最適な書き方ってないですよね。
私は考え方的にはFLOCSSが好きなのですが、サイトによっては適用しづらかったり…。

桑島さん：
［素案②］についてですが、「独自の設計をする場合、構築前にCSS設計のルールを決める。そしてそのルールをドキュメント化することを推奨します。」
みたいな感じにした方がいいかなと思いました。
過去の私は「ルールを決める」という事を意識していなかったので、「_」「-」の使い分けもできていないし、英単語ではなくローマ字書きの命名になってたり、英単語が被ってきたらいきなり数字で分けてみたりとか、他の人には見せられないCSSを書いています。
「ルール決め」はとても重要なことなので、ドキュメント化は必須ではないけれども、「ルールを決める」は言いきっちゃった方がいいのかなーと思いました。

ヒカル：
僕もはじめはFLOCSSを使ってみたんですが、途中で煩雑になり諦めました…
確かに ［素案②］の件は、ルールを決める事と、ドキュメントは分けて、ルール決めの重要性を伝えた方が良いですね！
ありがとうございます。

以上が、Slackでの流れです。

実際は参考サイトを参照したり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！