こんにちは、中村です！

「FLOCSSで始めるCSS設計」の第二回目です。

前回は、FLOCSSを紹介するにあたり「なぜFLOCSSを紹介するのか」「FLOCSSとは」という内容でした。

FLOCSSとは？ – FLOCSSで始めるCSS設計

第2回目では、ObjectレイヤーのComponentについて実際に使い回しの効く手法を交えて書いていきます。

Componentとは

ドキュメントを見ると以下のように書かれています。

再利用できるパターンとして、小さな単位のモジュールを定義します。

一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。

出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。

Component実例

実際に、「to-R Media」で使用されているComponentの一つに、トップページやアーカイブページにある記事カードがあります。
下記がデモです。

See the Pen Component：記事カード by nayu (@nayucolony) on CodePen.

Componentを作ってみる

FLOCSSも含め、CSS設計で悩みがちなのは「これ、なんて名前にしたらいいの？」というところ。

とくにBEMなんかはElementにそれぞれ名前をつけるという特徴があります。

ここでは、私がどういう考えでマークアップしていったかを説明します。

俯瞰してみる

まず、サイトのデザインカンプがあがってきたor参考サイトを見たなどして、こういうパーツを使い回すという考えはなんとなく浮かんでくると思います。

私もこのメディアを立ち上げる際にいろんなブログをみましたが、そこで必要だと感じたパーツが「記事カード」だったのでまずはそれをComponentとして作ることにしました。

そこで、この「記事カード」を見渡してみるとどんな構造になっているかリストアップしてみます。

• アイキャッチ
• カテゴリ
• タイトル
• 著者情報（アイコン、名前）
• 日付

以上のようなパーツで構成されていることがわかりました。

とりあえずマークアップしてみる

構成がわかったら、まずはマークアップしてみましょう。

いろいろ悩む必要はありません。まずは構造をそのまま書いていきましょう。

今回は「.c-card」という名前でコンポーネントを作っていくことにします。

「.c-article-card」など名前が長くなっても問題はありません。ユニークな名前をつけるといいと思います。

私なりに行った初期マークアップは以下の通り。

<div class="c-card">
    <div class="c-card__photo"></div>
    <div class="c-card__category">
        <i class="fa fa-folder"></i>
        <a href="#">FLOCSS</a>
    </div>
    <div class="c-card__title"><a href="#">とりあえずコンポーネントを作ってみよう</a></div>
    <div class="c-card__avatar"></div>
    <a href="c-card__name">nayucolony</a>
    <div class="c-card__date">2016.09.14</div>
</div>

このように、さきほど作ったリストを素直にマークアップしていきます。

class名をみて欲しいのですが、さきほどの構成要素リストはMindBEMdingでいう「Element」として扱います。それぞれにユニークなElement名をつけていきましょう。英単語力が問われますが、まずは参考サイトをみつけどのようなネーミングを行っているか見て引き出しを増やしていくのがいいと思います。

よくしがちですが「.c-card__right-box」「.c-card__left-box」など、一目で何を表しているかわからないクラスではなく、役割をネーミングしていくのがMindBEMdingにおけるネーミングの肝です。

また、最初に紹介したデモと少し違いますが、フローをたどっていくと同じになりますのでご心配なく。

CSSでスタイリングする

ひとまず、HTMLができたのでCSSでスタイリングしていきましょう。

ここで思い出して欲しいのが

出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。

幅などは、Componentを入れるWrapperなどに定義してやればいいのです。

デモにおいても、コンポーネントとはまったく関係のない.outer-boxというクラスで囲まれています。

この.outer-boxの幅に対応して変化するのがわかります。

では、Elementごとに考えを追っていきましょう。

アイキャッチ

このようにしました。

.c-card__photo {
  padding-bottom: 56%;
  width: 100%;
  background: url("http://lorempixel.com/400/400") no-repeat;
　　　　background-position: center;
  background-size: cover;
}

backgroundに画像を指定するとき、ボックスが高さを持っていないと背景画像が表示できません。

しかし、縦横比だけを決めておきたい、pxで固定したくないというときにheight:56%などとしたところで、heightは親要素のheightの何%という計算を行うため縦横比という考え方が使えません。

一方、paddingは自信の横幅に依存するため横幅に対していくらという風に高さを確保できます。

padding部分にもbackgroundは効くので、このやり方は覚えておくといいかと思います。

（ちょっとずるいなと思う方もいそうですね、私もそうでした。paddingって、余白みたいな使い方じゃないのかよ、っていう）

カテゴリ、タイトル

特別レイアウトするような要素はありません。便宜的に名前をつけているだけです。

（実務では文字サイズを変えたり余白をとったり、スタイリングしたりいろいろあるかと思うのでスタイルが全くないことはないと思います。）

アイコン、著者名、日付

<div class="c-card__footer">
    <div class="c-card__author">
        <div class="c-card__avatar"></div>
        <a href="c-card__name">nayucolony</a>
    </div>
    <div class="c-card__date">
        2016.09.14
    </div>
</div>

.c-card__footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.c-card__avatar {
  display: inline-block;
  height: 28px;
  width: 28px;
  border-radius: 14px;
  background: url("http://lorempixel.com/400/400") no-repeat;
  background-position: center;
  background-size: cover;
  vertical-align: middle;
}

.c-card__name {
 display: inline-block;
 vertical-align: middle;
}

出ました、Flexboxです。

要素Aを左寄せ、要素Bを右寄せ、というふうにしたいとき、それぞれにfloat:left,float:rightを指定することが多いと思うのですが、あえて今話題のFlexboxを使用してみました。

それに伴い、アイコンと著者名を「著者情報」としてラップ、著者情報と日付の親ボックス（Flex指定用）として”c-card__footer“という名前のボックスを作成しました。

それぞれの要素の横軸は中心出揃っています。floatだと左右に寄せてさらに横軸も中央に揃えるということができないので、こういうときにはFlexboxは便利ですね。

また、あえてアイコンについては28pxで固定しています。

「さっき固有のpx値は持たないほうがいっていたのに！」と思われる方もいらっしゃるかもしれませんが、これはフォントサイズが固定値を持っていることによります。

そこに並ぶ画像も固定値としています。%で指定してしまうと、著者名はサイズ変わらず、アイコンだけが大きくなったり小さくなったりしてしまうのでこの様にしています。

さて、一通り、Componentの作成が完了しました。もう一度、最初にお見せしたデモを見ていただくと、なるほどと思っていただけるのではないでしょうか。

横幅を変えてもくずれないか確認

これはレスポンシブwebデザインの話とは少し違って、Componentで使い回しを前提とする以上、決まった横幅以外では崩れてしまうのでは使いまわせません。

ちょっとサイドバーにいれたいけどメインカラム幅向けにつくったので使いまわせない！ではもったいないのです。

Developer toolsなどで横幅を変えて挙動を見て、問題ないか確認はしておきましょう。

（想定できる範囲の横幅での挙動は最低限保証できるようにしましょう）

まとめ

流れをおさらいすると

• まず俯瞰。構成要素は何かな？と考える
• とりあえずマークアップする
• CSSでレイアウトする（必要に応じてマークアップを変える。命名はめんどくさがらない。）
• 横幅を変えても崩れないかチェック

となります。

こう見ると普段のサイト制作となんら変わりはないですね。

それだけに、少なくともComponentという考え方が超特別な物ではないということも分かっていただけるかと思います。

---

いかがだったでしょうか。

私自身、FLOCSSに限らずコードを書くときに色んなサイトを参考にしてきたのですが、どういう思考の末にこのコードになったんだ、ということがわからずやきもきしていたことがあったため、今回はコンポーネントを作ってみるというテーマで「私ならこうする」という思考順序を書かせていただきました。

あくまでこれは一例ですが、これを叩き台に「ここはこうしたほうがいい」「私ならこう考える」と思っていただくことが、これを読んでいる方のCSS設計体得のプロセスの一つになっていれば幸いです。

この連載に関するご意見やご感想がありましたら、ぜひtwitter(@nayucolony)まで！

気に入っていただけましたら、Facebookでのシェア、いいね、Tweet、はてブなど、是非ともお願い致します！