2015年1月20日火曜日

CSSの配色のパターンと命名規則

良いものはOSSから盗む

管理画面やWebアプリ用のBootstrapベースのテーマには色々と学ぶことが多い。
PagesのColorを見ていて、普段思っていることを書いてみる。


配色の変数の定義は色の名前ではなく機能で

$redとか、$blue、なんてのはNG!!

いずれ色を変えることもあるかもしれないけど、それよりもまず、base-colorとかcomplete-colorとか、配色の基本に沿った名前の方が汎用性がある。

Sassもコードなので、変更に強いコードを書くべき。
変更に強いコードを書くための鉄則は、変わりやすいものと変わりにくいものを分けること。
$whiteとすれば、背景色を黒に変更する時に、全て$blackに変えないとおかしなコードになってしまう。
$base-colorとしておけば、値を変えるだけで済む。


基本色のバリエーションは比較級を使う

配色では、基本となる色の明度や鮮度を上げ下げすることが多い。
SassやCompassでもそれ用の関数が用意されている。
(参考:A visual guide to Sass & Compass Color Functions
明度以外の関数も載っているので知らない人は見てみると良いかも)


変数名やクラス名には、比較級を使うとうまく収まる。

例) $color-success $color-success-darker $color-success-darkest ...


スタイルガイドを作成する

余談だけど、CSSは秘伝のタレのように、放っておくと継ぎ足されることが多い。
厄介なのは、タレと違って、コードが増殖するということ。
データは熟成するけど、コードは腐敗していくものなので、きちんとスタイルガイドを用意しておくべき。

スタイルガイドにどういったものがあるかは、The Style Guide Guideにまとまっている。

2015/02/09追加:

含まれていないものがあったので、追加。
SC5 Style Guide Generator

個人的には、

  • JavaScriptも絡むかなり動的なWebアプリ、がっつりドキュメント化したい時はHologramでがんばる
  • そうでなければとりあえずKSS
  • もしくはStyleDoccoかな...
といった感じ。


2015/12/28追加:

hologramの代わりにaigisという選択肢も出てきた。こちらはNode.jsで動くので環境を整えやすい。今後はaigisを使うと思う。

0 件のコメント: