色やサイズを変数にしたら、後から変えるのが楽になった

• 同じ値が散らばっていると、変えるときに漏れる
• 1か所にまとめると、全体を一度に変えられる
• 役割で名付けると、中身を変えても名前が合う

色を変えようとして、何十か所も直すことになった。値を1か所にまとめてから、変更が数分で済むようになった。

散らばっていた状態

整理する前は、こうだった。

• 同じ色の値が、20か所以上に書かれていた
• 微妙に違う値が混ざっていた
• どこを直せばよいか分からない

2つ目が問題だった。同じつもりの色が、実は少し違っていた。

まとめる

値を1か所に集めた。

• ファイルの先頭に、まとめて書く
• 以降は、その名前を使う
• 変えるときは、先頭だけ直す

3つ目が目的だ。1行変えれば、全体が変わる。

名前の付け方

名前は、役割で付けている。

• 「地の色」「文字の色」「強調」のように
• 「青」「黄色」のような色名にしない
• 役割なら、中身を変えても名前が合う

3つ目が理由だ。強調を青から赤に変えたとき、名前が「青」だと食い違う。

まとめる対象

色以外も、同じようにまとめた。

• 余白の値
• 文字の大きさ
• 枠線の太さ
• 画面幅の区切り

4つ目が効いた。画面幅の数字が散らばっていると、揃えるのが難しい。

段階を決める

余白や文字の大きさは、段階で持つようにした。

• 小・中・大の3段階
• その都度、違う値を使わない
• 揃っていると、見た目が整う

3つ目が副次的な効果だった。値が揃うだけで、デザインとしてまとまって見える。

頼むときの伝え方

変数を使う前提で頼んでいる。

次のCSSを書いてください。

- 色とサイズは、既存の変数を使う
- 新しい値を直接書かない
- 既存に無い値が必要なら、その旨を教えてください

既存の変数一覧：（貼る）

3つ目を書くと、勝手に新しい値が増えない。

既存のコードを直す

散らばった値を、まとめる作業も頼んだ。

• 使われている値を、すべて抜き出させる
• 同じ値をまとめる
• 近い値は、統一してよいか確認する

3つ目は自分で判断している。意図的に少し違えている場合がある。

他の人が見る前提で書く

自分しか触らないサイトでも、形を整えている。

• いつか誰かが引き継ぐ可能性がある
• 半年後の自分は、他人と同じ
• 整えるコストは、書くときに払うのが一番安い

3つ目が理由だ。後から整理しようとすると、何を書いたか思い出すところから始まる。書いている最中なら、意図が頭にあるので説明を添えるのは数秒で済む。

変えるときの確認

値を変えたら、全体を確認している。

• すべてのページを見る
• 画面幅を変えて見る
• 意図しない場所が変わっていないか

3つ目に注意が要る。1か所にまとめた分、影響範囲も広い。

名前を揃える

変数の名前にも、規則を作った。

• 種類を頭に付ける。色なら色、余白なら余白と分かる形
• 段階がある場合は、数字か大小で示す
• 略語を使わない。後から読めなくなる

3つ目で失敗した。短く書こうとして略した名前が、半年後に何を指すか分からなくなった。打つ手間より、読めることを優先する。入力の補助機能があるので、長い名前でも打つ手間は変わらない。

一覧をコメントで書く

変数の定義には、説明を添えている。

• 何に使う値か
• どこで使われているか
• 変えるときの注意

3つ目が後で効く。影響範囲が広い値は、変える前に確認が要る。定義の場所に書いておけば、変えようとした人の目に入る。自分が半年後に見る場合も同じだ。

やりすぎない

何でも変数にすると、かえって分かりにくくなる。

• 複数箇所で使う値だけ、変数にする
• 1回しか使わない値は、そのまま書く
• 変数が多すぎると、どれが何か分からない

3つ目が実感だ。十数個までが、把握できる数だった。

まとめ

• 同じ値が散らばっていると、変えるときに漏れる
• 1か所にまとめると、1行で全体が変わる
• 役割で名付けると、中身を変えても名前が合う
• 余白や文字の大きさは、段階で持つと揃う
• 1回しか使わない値は、変数にしない