CSS
CSS設計

CSSはこう書く

CSSはこう書く

「こう書く」、というより「こう書いてほしい」という個人の価値観の押し付けです。
が、それでも誰かの役に立てば幸いです。
ご意見もどんどん下さい!

伝えたいこと

  • 何も考えずにスタイルの追加をしないで!
  • 何も考えずに数値を決めないで!
  • 後先考えずにスタイルを当てないで!
  • 少しでも疑問に思ったら聞いて!

何も考えずにスタイルの追加をしないで!

私がCSSを書く時は、大まかに以下のような順で書いています。

セレクタ {
  外枠
  配置
  余白
  見た目
  機能
}

外側から内へ内へと当てていくイメージです。
ダミーで書いてみると

.btn {
  display: block;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 15px 0;
  border-radius: 3px;
  background-color: #069;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  transition: opacity 150ms linear;
  cursor: pointer;
}

こんな感じです。

見た目の部分は更に細かく分けることができますが、大まかな順が意識されていればそんなには気になりません。

これがチーム内の共通意識としてあれば、修正するときに目的のプロパティがどこにあるのか、すぐに見つけることができます。

が、実際これは個人の感覚に依存するもので、難しい場合はアルファベット順にしておくのが無難かと思います。
CSScombで自動化してしまえば楽です。

ここで伝えたいのは、何も考えずにスタイルを下に追加するのはやめてね!ということです。

何も考えずに数値を決めないで!

最近はデザインツールからCSSを抽出できたり、簡単に余白やサイズを知れるようになりました。
それをそのまま使えば見た目通りにブラウザで表示されます。

が、ちょっと待ってください。
余白、サイズが半端な数値になっていませんか?

経験上、デザイナーさんが5の倍数以外の数値を余白やサイズに使用するということはあまりありません。
もしも5の倍数以外の数値になっている場合は、どこかが綺麗な数値で指定されていないかを確認してみてください。

例えば、ボタンの上余白が23px、下余白が22pxだった場合、高さが60pxなどの綺麗な数値になっていませんか?
この場合はline-height: 60px;でスタイルを当てた方が良いです。(改行されないことが明確な場合に限る)

半端な数値に遭遇した場合はそれを疑う癖を付けてください。
(単にデザイナーさんが急いでいてそこまで拘れていなかった・・・というパターンもあると思います)

後先考えずにスタイルを当てないで!

WEBサイトの運営をしていると、トルツメ想定外の改行は十分に起こり得ます。
これを考えずにスタイルを当ててしまうと

  • 「このパターンの場合はこの要素は消しますねー」 → 「なんか要素がくっついてるんですけど・・・」
  • 「この項目は文字列最大長60文字かー」 → 「なんかすっごい行間空いてるんですけど・・・」

なんてことが起こります。

これをできるだけ回避するために

  • marginは常に下(または上)に取るようにして、トルツまっても常に余白が確保される
  • 高さ固定だけど改行が想定される場合はline-heightで高さを取らず、paddingで調整したりflexを使った中央揃えをする

などと考えてスタイルを当てていきます。

これは経験によって変わるもので、完全に防ぐことも難しいのですが、できるだけ配慮したいです。
とにかく、その場限りの「見た目が整えばいいやー」でスタイルを当てないでください。

少しでも疑問に思ったら聞いて!

エンジニアは(少なくとも私は)技術系の話をするのが好きです。
知識を見せびらかすのが好きです。(少なくとも、私は!)
なので、少しでも疑問に思ったら聞いてください。

ただごめんなさい、丸投げの質問は嫌います。
なので

「これって方した方がいいですかね?」

といった感じで、自分で予め考えをまとめたり、調べたりした上で聞いてみてください。
気持ちよく教えてくれると思います。
それでもムッとする人はきっとそもそものコミュニケーションが苦手な人なので、好きにやりましょう

おわりに

本投稿は個人の価値観の押し付けだと言われればそこまでだなーと思っています。
そうならないために、実際の現場ではコーディングガイドラインをチーム全員で決めておきたいですね。
そうしたらコードレビューも捗ります。