CHROMA

世の中の "当たり前" を確認する

SMACSS を使ってみた話

Dev
  1. プロジェクトで適用した SMACSS のルール
  2. 使って良かったと思える点
  3. 使い方が難しいと感じた点

1. プロジェクトで適用した SMACSS のルール

CSS ルールのカテゴライズ を意識しました。

こんな感じです:

  • CSS ファイルのカテゴライズ
  • モジュールを意識した作り
  • テーマファイルの分離
  • プロパティ記述の順序

順に見て行きましょう。

CSS ファイルのカテゴライズ

本に書いてあった通りの分類です:

  1. ベース
  2. レイアウト
  3. モジュール
  4. ステート（状態）
  5. テーマ

後の 3. 使い方が難しいと感じた点 でも説明しますが、レイアウトとモジュールカテゴリーの切り離しが何処で行ったら良いかわかりづらかったです。それと、テーマカテゴリーを他のルールと上手く切り離して指定するのにも何度も手直しを加えることになり、時間がかかりました。

モジュールを意識した作り

Pure や、twitter の CSS なんかがモジュールを作る際に参考になりました。

こんな感じで作りました:

.table {
  width: 100%;
}

.table th,
.table td {
  padding: 8px 13px;
}

.table th {
  background-color: #FAFAFA;
}

.horizontal_table th {
  width: 25%;
}

.table_bordered {
  border-collapse:collapse;
}

.table_bordered th,
.table_bordered td {
  border-width: 1px;
  border-style: solid;
  border-color: #D9D9D9;
}

テーマカテゴリーの分離

今回はサービス毎にロゴや配色を変更する必要があったので、テーマファイルを作成しました。 テーマファイル内ではこんな指定をしています:

.{theme name}_text {
  color: #333;
}

.{theme name}_strong_text {
  color: #D80000;
}

.{theme name}_border {
  border-color: #FFEBB3;
}

.{theme name}_bg {
  background-color: #FFFEE7;
}

.{theme name}_btn {
  border-color: #FF5A00;
  background-image: -webkit-linear-gradient(top, #FF7114 0, #FF5A00 100%);
  background-image: -moz-linear-gradient(top, #FF7114 0, #FF5A00 100%);
  background-image: -o-linear-gradient(top, #FF7114 0, #FF5A00 100%);
  background-image: -ms-linear-gradient(top, #FF7114 0, #FF5A00 100%);
  background-image: linear-gradient(top, #FF7114 0, #FF5A00 100%);
  background-color: #FF771D;
  color: #D53E00;
}

プロパティ記述の順序

個人で色々思う所合ってプロパティの順序を決めている（アルファベット順など）と思うのですが、プロジェクトの中では統一させたかったのでルールを決めました。
ただ、がっちり決めても守れる自身がなかったので、グループを作り、それを書く順序を決めるところまでをルールとし、グループ内での順番は特に気にしなくても良いことにしました。

グループ、順序はこんな感じです:

  1. 表示、ポジションに関する指定
  2. 大きさに関する指定
  3. ボーダーに関する指定
  4. 背景に関する指定
  5. テキストに関する指定
  6. その他

1. 表示、ポジションに関する指定 のグループに入るのは、例えば以下の様なものになります:

  • visibility
  • content
  • position
  • top
  • right
  • left
  • bottom
  • z-index
  • display
  • margin
  • padding
  • float
  • overflow

2. 使って良かったと思える点

以下に書いている SMACSS を使って良かった点は、しっかりとルールを守れた上で思うことです。
今回はテーマカテゴリーと他カテゴリーを上手く分けきれなかったこと等.. いろいろあったので、今回作ったものに以下のメリットがすべて当てはまるとは思えません..

読み込む必要のない CSS ファイルを特定しやすい

モジュールカテゴリーのファイルが特にそうで、例えば table デザインを使っていないページでは table.css を読み込む必要がないなど、不必要なファイルが特定しやすかったです。

あとはレイアウトカテゴリーのファイルでも、 grid.css ファイルなんかは必要・不必要というのがページを見ただけで区別がつきました。

CSS ファイルが再利用可能

レイアウトカテゴリー、モジュールカテゴリーの CSS ファイルは上手く作れば他のプロジェクトで再利用することも可能かと思いました。

3. 使い方が難しいと感じた点

「お前の作り方が悪いから、お前だけの問題じゃないの」と言われればそれまでです。

テーマファイルの独立のさせにくさ

単純な色指定でさえも上手くいかないことがありました。
例えばモジュールファイルで border-color: #444; としていて、テーマファイルで border-color: red というのを上書きしたい時、色が #444 から変わらないことがありました。

HTML はこんな感じで書いていました:

<!--
heading_border => #444
{theme name}_border => red
-->

<h2 class="heading_border {theme name}_border">Hello</h2>

HTML 内で それぞれの要素に振るクラスがめっちゃ多い

HTML 内で class="A B C .." と、多い時で 5 つくらいクラスを指定する時がありました。
ある程度増えるのは SMACSS を使う時から予想できていましたが、あまりに多い！HTML 見難い！

これを少しでも少なくするには、テーマファイル内で border-color と background-color の指定を別々で書くのとは別に、2 つをまとめたものを 1 つのクラスとして持つとかだと思います。

.border-color {
  border-color: Blue;
}

.bg-color {
  background-color: lightBlue;
}

.box-color {
  border-color: Blue;
  background-color: lightBlue;
}

box-shadow の色の指定とかがきもい

普段 box-shadow プロパティを指定するならこんな感じでかくと思います:

.box {
  box-shadow: 10px 10px 5px #888;
}

ただ、今回はテーマカテゴリーと分けるために box-shadow の色の指定もわけました。そうすると box-shadow の色は以下のように color プロパティで指定するとになります。

/* モジュールカテゴリーのファイルとかに書く */
.box {
  box-shadow: 1px 2px 3px;
}

/* テーマカテゴリーのファイルに書く */
.box-shadow-color {
  color: #a00;
}
box-shadow に 色を指定するときの参考

レイアウト、モジュールカテゴリーの分けにくさ

レイアウトカテゴリーのファイルに何処まで指定を書くのか. というのが理解できずに CSS を書き始めてしまったから起こった問題だと思います。

最終的には layout.css に書く内容はこのくらいに落ち着きました:

/* header */
#header {
  position: fixed;
  z-index: 99999;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 3px rgba(0,0,0,.2);
}

/* page_container */
#page_container {
  padding-top: 124px; /* header height*/
}

/* footer */
#footer {
  background-color: #fff;
}

height や margin の高さの指定をしていないのは、レイアウトの中に含めるモジュールで高さを取るようにしたからです。

モジュールカテゴリー内のファイルの分けにくさ

1 つめは、そもそもモジュール名を知らないと分けるのも難しいという問題、
2 つめは作り出す前にモジュールごとのルールを決めておかないと、 list.css とか navigation.css とか合った時にどちらに何を置いていいのかわからなくなると問題がありました。