はじめに
この記事は、CSS設計手法を選択する時の「こうしておけばよかった」という内容をまとめた記事です。
対象となるのは、CSS設計手法と呼ばれる記法でCSSを書ける状態くらいのレベルの人です。
自分と同じような後戻りや無駄に手を動かす人が同じ道を歩まなくて良いように、自分自身が同じミスをしないようにアウトプットすることが狙いです。
結論を先に言うと、技術選定がコーディング等の工数を左右してしまう点で重要である、という内容です。
発信者のレベル感
- HTML, CSS, 簡単なJavaScriptでWebサイトをいくつか制作
- CSS設計手法としてはBEM、FLOCSS、CSSフレームワークはBootstrapの経験がある
- JavaScriptをメインに使用した動的なチャット型アプリケーションを開発中
基本的な静的Web制作を経験し、動的な処理について学習をやり始めたレベル感です。
開発全体を意識してCSS設計手法を選択する
これはHTMLページが単一のチャット型アプリケーションを開発する時に感じたことです。
CSSの設計手法としてはFLOCCSを選択しました。
時間が経ってリファクタリングに着手する際、不要なコーディングや修正範囲も多いと感じたことから、当時の選択理由を振り返ることにしました。
そもそも選択理由が合理的でなかった
- 早く手を動かして作りたい衝動のまま、合理的な判断を軽視していた
- 「どの技術を使いたいか」ではなく、「どの技術なら効果的か」の検討が不足していた
- FLOCSSを使っているにも関わらず、scssファイルは分割せずに記述→接頭辞で役割を分ける意味があまりなかった
技術選定や開発初期の設計方針によって、後工程のコーディングや、リファクタリングの工数が左右されてしまうことを実感しました。
どういったものを作るのか、から考える
HTML単一ページのチャット型アプリケーションでは、着手前にも下記のようなことを想定できるのではと考えました。
- CSS記述量は複数ページでない分、比較的少なめ
- ピクセル単位のCSS調整の必要性は高くない
- JavaScriptによるDOM操作を行うには、クラスは少ない方が良い
上記のことから、接頭辞で分類することにより共通化を図るFLOCSSは、オーバースペックな選択ではないかと感じました。
もっと良い方法はないかを考える
これを書いている段階で、効率的にコーディングを進めることを考えた場合、いくつか選択肢が出てきました。
- 不要なマルチスタイリングを極力なくす
- 単一HTMLページでスクラッチのCSSスタイリングを選択するなら、役割よりもブロック単位での可読性を重視してBEMを選択
- そもそもCSSフレームワークの方が良い場合
こうして、初めに思いついた内容以外にも、もっと良い方法はないか、と一度立ち止まることが遠回りのようで近道なこともあるのだと学びました。
またその当時はベストな技術選定でも、新しい技術の台頭によって、過去の開発案件のコードがレガシー化してしまうということにも繋がっているのではないかと、初学者ながら感じました。
まとめ
設計段階での技術選定によって、後工程のコーディング、リファクタリング等の工数が左右される。
おわりに
単純ですが、技術選定時には各技術におけるメリットデメリットを並べるなどをし、効果的な選択を行うための対策をしてみようと思います。
また技術を「知ったつもりでいる状態」であったことも要因と言えるので、「理解している状態＝人に教えられる状態」になれるようにアウトプットの習慣を作っていきます。