CSS設計ってどんなもの？
コーディングをする際、CSS設計を導入していますか？
小規模なサイトやLPでは、CSS設計は意識せずとも大きな問題はありません。
しかし、サイトの規模が大きくなるにつれCSS設計は必須になります。
良いCSSとは
GoogleのエンジニアであるPhipi Walton氏が言及した「良いCSS」が以下4点。
・予測可能な
・再利用できる
・保守可能な
・拡張しやすい
予測可能
1つのサイト制作で関わる人は必ずしも自分1人ではないですよね。
自分以外の人がそのコードを見たときにどのようなコードなのか読み解けることが重要です。
・クラス名を省略しない
<p class="txt">テキストが入ります。</p><p class="text">テキストが入ります。</p>text以外にも
・button → btn
・title → ttl
・description → desc
などなど。
チーム開発の際、チーム内でどの単語は省略する・しないとルールが決まっているなら大丈夫ですがそうで無い場合、「ここは省略しているのにここは省略していない」なんてことがほとんどです。クラス名に一貫性がなく可読性の低い読みにくいコードになってしまいます。
基本的にクラス名を省略するメリットはクラス名を短くする以外、ほとんど無いので誰が読んでも理解できるように省略しないクラス名を推奨します。
再利用可能
既存のパーツを別の箇所でも使用したいとき、スタイルを書き直したりする必要がない状態を再利用可能な状態と呼びます。
See the Pen
Untitled by sakurai-ex (@sakurai-ex)
on CodePen.
例えば上図のように、一番上のhtmlを見てみるとcardの中身にテキストとボタンがあります。
ボタンはカードの中身以外でも使う場面は想定されますが、CSSを見てみると
.card .button {
padding: 10px 40px;
background: orange;
text-decoration: none; color: #fff;
}上図のように.cardの中の.buttonと限定的な使用方法になっています。
これではCSSSは再利用ができないです。可能な限りCSSの詳細度は低くしましょう。
なので今回の場合の理想的なCSSは
.button {
padding: 10px 40px;
background: orange;
text-decoration: none; color: #fff;
}上記のようになります。
保守可能
サイト内で新しい機能を追加・更新をする場合に既存のCSSを変更しないと表示崩れが起こってしまう状態は望ましくありません。
See the Pen
Untitled by sakurai-ex (@sakurai-ex)
on CodePen.
例えば上図のように、cardというブログ記事がcotainerに囲まれています。ブログ記事が5個の時、下の2記事が両端に離れてしまい思った通りの見た目になりません。
しかし、ブログ記事は常に更新されていくものなので、ブログ記事がいくつあるときでも期待通りの表示にしなくてはなりません。
拡張可能
拡張可能なCSSとはCSSに携わる人が何人でも問題なく、管理できる状態を指します。
そのため、CSS設計のルールは分かりやすく、新たにチームに加わる人がいても学習コストが小さくなる状態である必要があります。
つまり可能な限り分かりやすく、簡単なルールで設計を行いましょうというものです。
まとめ
HTML, CSSは奥が深いと言いますが、まさにそうだと思います。
今までCSS設計をあまり意識してこなかったという方はこれを機に意識してみるとコーディングの速度も楽しさも倍になると思います。。。！
次回は具体的なCSS設計方法について書いていきます。
