CSS設計でコンポーネント指向

Ryunosuke Oguri

Published in

axis-motion-tech

6 min readApr 27, 2018

FLOCSSを使ったCSS設計に注目します。

こんにちは。

アクシスモーションというITベンチャー（不動産業もやっている）でフロントエンド開発を担当している小栗です。

最近はVue.js楽しいです。

さて本題ですが、CSSってウェブサイトを作る上でかかせないものですが、自由すぎて難しくないですか？

CSSはハードルが低い

CSSは取り掛かりのハードルが低く、ウェブにおいては基礎中の基礎なので、サイトを作る上で必ず必要ですが、すべてがグローバルなので簡単に自由にかけてしまう分、影響範囲も広く、破壊的になりやすいです。

CSSで気をつけていきたいこと

1. プロジェクトルールを決めることが大事。

プロジェクト開始段階にCSSの設計を行い、ルールを明確にします。

・使用するフレームワークの選定 ( Bootstrap, spectre.css, Materialize.css )

・CSS構造の作成 ( OOCSS,SMACS, FLOCSS )

・命名規則ルール( BEM )

2. コンポーネント指向

ページごとにCSSを書いていくと、CSSの量が増えるし、影響範囲が狭いものの、同じようなデザインの場合、対応しなければ行けない箇所もページごとに増える。

なのでモジュールやコンポーネント単位でパーツ化してくことが重要です（alert, button, card, nav… etcなどのパーツ化）

かといってこれを再現するにはデザインも重要になってくるので、デザイナーにもぜひこの指向を取り入れていただきたい。

3. CSSクラス名の命名規則

IDを使ってはいけない？

基本的に最近のCSSではIDセレクタを使うことは絶対禁止という意見があります。僕はまったく使わないです。

理由は、 IDセレクタは、１ページに１つまでの使用を宣言しているので、どのセレクタよりも優先されてしまうため書き換えれない。

FLOCSSの設計がおすすめです

FLOCSS（フロックス）は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

scss
├── _settings.scss　......... 変数、設定ファイル
├── application.scss ......... メインファイル
├── foundation ......... ベースディレクトリ
├── layout ......... レイアウトファイルディレクトリ
└── object　 ......... オブジェクトファイルディレクトリ
    ├── component　 ......... コンポーネント
    ├── project　 ......... プロジェクト単位
    └── utility　......... 汎用性・ヘルパー

layout — スタイルの先頭に.l-付けます。
Component — スタイルの先頭に.c-付けます。(パーツ) 再利用できるパターンとして、小さな単位のモジュールを定義します。一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。
Project — スタイルの先頭に.p-付けます。プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。例えば、記事一覧や、ユーザープロフィール、画像ギャラリーなどコンテンツを構成する要素などが該当します。
Utility — スタイルの先頭に.u-付けます。 ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。
settings.scss — カラースキームなど変数を設定します。
applicattion.scss — 各ファイルを読み込む大元のファイルです。

これで進めていくとこんな感じです。

├── frontend/stylesheets/
    ├── applicattion.scss
    ├── _settings.scss
    ├── foundation
    │   ├── bootstrap
        │ ...
    ├── layout
    │   ├── footer.scss
    │   ├── header.scss
    │   ├── main.scss
    │   └── sidebar.scss
    └── object
        ├── component
        │   ├── _alert.scss
        │   ├── _button.scss
        │   └── _navbar.scss
        │   └── _table.scss
        ├── project
        │   └── _media.scss
        └── utility
            ├── _align.scss
            ├── _animation.scss
            ├── _color.scss
            ├── _loading.scss
            ├── _margin.scss
            ├── _overwrite.scss
            └── _position.scss

このようにclass名の先頭にprefixを必ずつけます

.l-header, .c-button, .c-alert, .p-article, .u-align-center

僕のやり方としては

先頭に必ずprefixとファイル名をつけることをルールとして徹底しています。

button.scssなら`c-botton`から始まる→ .c-button-group

1. ↑にするとどこで書かれているCSSか見つけやすい2. 自然とパーツ化ができる3. これ＋BEMの記法にするとユニークになりやすく、破壊されにくい

まとめ

CSS自体ってそんなに難しくないんだけど、良いCSSの設計ってかなり難しいんです。でも設計をしっかりやるとデザインやプロジェクトの質も上がっていくと思っているので、重要だと僕は思っています。

特にパーツ単位の考えはCSSフレームワークがまさにそれなのでフレームワーク(Bootstrap)のドキュメントとかを見るのが一番の近道です。

よくわからないという方は、FLOCSSの概念を参考にして見て下さい。僕も色々な設計方法を試しましたが、FLOCSSの概念が一番しっくりきています。

あととにかくルールを決めてレビューで徹底するのが大事ですね！

参考文献：

FLOCSS（フロックス）https://github.com/hiloki/flocss