ファニプロTech

ファニプロTech CSSコーディングを考える（1） 2021.06.30 採用サイト

はじめまして、フロントエンドエンジニアの松崎です。

僕自身が勝手にシリーズ化を決めた『CSSコーディングを考える』の第1回の記事になります。
『CSSコーディングを考える』では、CSS設計を通して個人的にどのようなコーディングルールで書くのがいいのかを考えながら書いていく予定です。

第1回の記事は「CSS設計の前提」についての話。

CSS設計とは

CSSはグローバルスコープしか持たないという特徴があります。
グローバルスコープは「どこからでも参照できる」「上書きができる」という特徴があり、デメリットとして「全てのスタイリングが干渉し合う可能性がある」というものがあります。
スタイリングが干渉する可能性を極力なくし、運用保守をしやすくするために「どのようにCSSを管理するか」というのがCSS設計です。

良いCSSで書く

良いCSSとは何か。
GoogleのエンジニアであるPhilip Walton氏が「CSS Architecture」で言及したのが以下の4点。

・予測可能
・再利用可能
・保守可能
・拡張可能

以下、引用部分はDeepL翻訳に100%頼りきった日本語訳です。
分かりにくい箇所もあると思いますが、その辺はニュアンスで…！

・予測できる

”予測可能なCSSとは、ルールが期待通りに動作することを意味します。ルールを追加・更新しても、意図しない部分に影響を与えることはありません。変化の少ない小規模なサイトではそれほど重要ではありませんが、何十ページ、何百ページもある大規模なサイトでは、予測可能なCSSが必須となります。”
引用元：CSS Architecture

将来の自分や自分以外の第三者が運用保守を任されたときに、すぐにどのようなコードか読み解けるのが最善です。
運用保守の際にコードを読み解くことに必要以上の労力を使わせるのは無駄なので、その無駄を事前に避けるようにコードを書く必要べきです。

例えば、「命名規則が分かりやすい」「よりシンプルなスタイルで書く」ことで、コードを読み解く時間が最小で済みます。

・再利用できる

”CSSのルールは抽象化され、分離されていなければなりません。そうすれば、すでに解決されたパターンや問題を再コーディングすることなく、既存のパーツから新しいコンポーネントを素早く構築することができます。”
引用元：CSS Architecture

CSSの量をなるべく減らすことで、表示速度を上げることができます。
また、共通する部分の変更を一つ一つ行うより、一括で行える方がミスも減り、時間もかかりません。

テーマカラーやフォント、ボタン、見出し…など、共通部分は変数やパーツとしてまとめておき、それを再利用することで、CSSの記述量を減らし、変更への対応にも強くなります。

・保守できる

”新しいコンポーネントや機能を追加したり、更新したり、配置を変えたりする必要がある場合、既存のCSSをリファクタリングする必要はありません。コンポーネントXをページに追加しても、それだけでコンポーネントYが壊れてしまうことはありません。”
引用元：CSS Architecture

全体的に管理されているコードを書くことで、運用保守で不要なコストをかけずに済みます。

・拡張できる

”サイトの規模が大きくなり、複雑になると、通常はメンテナンスのために多くの開発者を必要とします。スケーラブルなCSSは、一人でも大規模なエンジニアリングチームでも、簡単に管理できることを意味しています。また、サイトのCSSアーキテクチャは、膨大な学習を必要とすることなく、簡単にアプローチできることを意味します。今、CSSを触っている開発者があなただけだからといって、今後もずっとそうだとは限りません。”
引用元：CSS Architecture

上記の「保守できる」と通ずるところがありますが、自分以外の第三者が更新や修正を行う際に、機能やスタイルの加筆修正が容易にできることが理想的です。

以上の4点が守られないと、運用保守をする際に不要なコストを割くことになりかねません。
「将来のリソースを奪わないように、良いCSSで書こう」というのがCSS設計の根幹でしょうか。

無駄に将来のリソースを奪わなければ…
・より質の高い提案ができたり
・より質の高い制作ができたり
・リソース不足で受注できなかった案件を受注できたり
・外注しているものを自社で解決できたり
・もっと勉強できたり
・プライベートをより良く過ごせたり
etc.

夢が広がりますね。

今回は以上になります。

次回からは、具体的なCSSの書き方について考えたいと思います。

カテゴリー：ファニプロTech

タグ：採用サイト　