CSSすこし書ける人が考えていること・気をつけていること

はじめに

こんにちは、業務でCSSも書いているものです。
アドベントカレンダー駆動執筆で記事を書いていますが、書けることを書いているので何の人か段々とわからない次第になってきました。

私はこの記事執筆時点ではSIの現場でWebシステムの開発を行っていますが、SIerに綺麗なCSSライブラリなんてものは当然ありません。さまざまな新人が試行錯誤で触ってきたことによって生成された摩訶不思議CSSファイルを読み解き、頑張ってRAWでゴリゴリと書いています（いつの時代？）

CSSがプログラミング言語かどうかという点は置いておいて、CSSを躊躇せず書けるようになるという過程は個人的には結構つかみどころがなくて難しかった記憶があります。静的型付け言語のC#を使いこなせるようになるよりも、動的型付け言語のRubyやPythonを触るよりも、です。結構難儀です。

QiitaでCSSについてググってみたところ、どうやらCSSはエンジニアに嫌われているそうです。そうなの？

とはいえ、その気持ちも少しわからんでもないというのと、今は「これ実装しておいて」と言われれば「はーい」とひとつ返事でひととおり実装できる程度にはCSSと仲良くなれたので、そのレベルの人が何を考えて実装しているか、書き起こしてみようと思います。

なお、筆者はフロントエンドエンジニアとしてゴリゴリとやっているわけではないため、この実装をすると読み込みが遅くなるなどの詳細は語れません。また、CSS設計論等も現状知識がないです。お手柔らかにお願いします。

何を考えるか

前提条件

• CSSはHTMLに色をつけてあげたり、配置してあげたりするための補助的存在

考えること

• HTMLの入れ子構造
  • 前提条件を加味すると、CSSはHTML色付け係なので、まず脳内に大元の構造がないといけない
  • Reactのコンポーネントの概念にも繋がってくるが、どういう要素を積み上げたら自分が求めるものが出来上がるのか？の設計図は最低限想像できておく必要がある

• 画面サイズ・解像度が変化した時に、要素がどのように配置されることが望ましいか
  • 要は、画面サイズが変わったときにも適切に表示されるようにするのが大前提だよね、という話
  • 横幅が1000px以下になった時・2000px以上になった時もコンポーネントが崩れずに表示されるようにする
  • そのときに画面サイズに連動して動く要素は、要素が伸び縮みした時に伸び縮みする形が綺麗でなくてはならない
    • 変なコンポーネントが大きくなったら嫌だから
  • 画面の縦に関しては、基本的にスクロールされる世界線だからあまり気にしない（個人的には）
    • 強いていうなら、スクロール速度は気にする
    • が、それはJavaScriptさんの役割なので割愛
  • 表示されている範囲に表示されている・収まっている、というのは前提条件

• 今後どのように要素が増えていく可能性があるか
  • あんまり今回の実装ばかりに最適化された構造にしないということ
  • これは設計全般に当てはまることです

考えていること・気を付けていること

• まず大枠を作る
  • 主に新規で何かを作る場合はここから
  • 画面とか、モーダルとか、ポップアップとか
  • とりあえず要素を配置するための土台を作る

• 次にF12を押して開発者ツールを開く
  • 主に改修の場合はここから
  • 摩訶不思議CSSファイルには綺麗な命名規則など存在しません
  • さまざまな意図が詰まっているものをCSSファイルから読み解くのは無理なので、開発者ツール > Element > Style からとりあえず現状認識をする
    • カーソルでElementを触ってみて、どういう入れ子にしているのかを知る
    • 文句は言わない

• HTMLの入れ子構造を頭の中に思い浮かべる
  • 外側の要素は一旦にブロック要素、一番内側の要素はインライン要素にする
    • 新規で要素を追加するにしろ、改修するにしろ
    • 入れ子の順番で、中にある要素がインライン要素でないとこのCSSはかかってくれません、などがあるので、それらは適宜調整する
  • 要素と要素の配置を調整したい都合上、どうしてもpaddingやmarginを要素に設定する必要があるので、基本的に個人的にはブロック要素を使いがちかもしれない

• 一旦 display:flex で要素を配置
  • 画面サイズを変えたときにいいかんじに要素に動いていただきたいので、動いてもらえるように設定
  • 細かい調整で、ここは固定であってほしい箇所などは block や fixed などに適宜変更

• その後に padding/margin を設定して、まずは配置場所を調整
  • padding は要素の内側に対して、margin は要素の外側に対して
  • この段階で何も要素が見えないとちょっとつらいので、適当に仮で要素には色をつけておく

• いいかんじになってきたら、フォントをいじったり色をつけたり角を丸くしたりする
• カーソルを載せたら浮かんだり色が変わったりさせてもいい
• 書きつつ、マテリアルデザインの原則に沿っているかな、みたいなところは気にする

• 完成！

いつかやるかもしれない宿題

• CSS設計論について調べる・理解する
  • とはいえ自分の中での優先度は低め

まとめ

個人的にフロントエンドよりもロジックをゴリゴリいじれるバックエンドの方が実装していて楽しいので、今のところCSSを極めていく予定はないですが、現状何を考えているかを書いてみました。というか、今のWeb開発で生CSSをゴリゴリ書く方が珍しいのではないでしょうか？ 適当言っていたらすみません。

ざーっと書いたので、いつか加筆修正するかも。これが正解というわけではないので、一個人の思考として参考になれば幸いです。