はじめに

この記事は、CSS設計手法を選択する時の「こうしておけばよかった」という内容をまとめた記事です。

対象となるのは、CSS設計手法と呼ばれる記法でCSSを書ける状態くらいのレベルの人です。

自分と同じような後戻りや無駄に手を動かす人が同じ道を歩まなくて良いように、自分自身が同じミスをしないようにアウトプットすることが狙いです。

結論を先に言うと、技術選定がコーディング等の工数を左右してしまう点で重要である、という内容です。

発信者のレベル感

基本的な静的Web制作を経験し、動的な処理について学習をやり始めたレベル感です。

これはHTMLページが単一のチャット型アプリケーションを開発する時に感じたことです。
CSSの設計手法としてはFLOCCSを選択しました。
時間が経ってリファクタリングに着手する際、不要なコーディングや修正範囲も多いと感じたことから、当時の選択理由を振り返ることにしました。

技術選定や開発初期の設計方針によって、後工程のコーディングや、リファクタリングの工数が左右されてしまうことを実感しました。

HTML単一ページのチャット型アプリケーションでは、着手前にも下記のようなことを想定できるのではと考えました。

上記のことから、接頭辞で分類することにより共通化を図るFLOCSSは、オーバースペックな選択ではないかと感じました。

これを書いている段階で、効率的にコーディングを進めることを考えた場合、いくつか選択肢が出てきました。

こうして、初めに思いついた内容以外にも、もっと良い方法はないか、と一度立ち止まることが遠回りのようで近道なこともあるのだと学びました。

またその当時はベストな技術選定でも、新しい技術の台頭によって、過去の開発案件のコードがレガシー化してしまうということにも繋がっているのではないかと、初学者ながら感じました。

設計段階での技術選定によって、後工程のコーディング、リファクタリング等の工数が左右される。

単純ですが、技術選定時には各技術におけるメリットデメリットを並べるなどをし、効果的な選択を行うための対策をしてみようと思います。
また技術を「知ったつもりでいる状態」であったことも要因と言えるので、「理解している状態＝人に教えられる状態」になれるようにアウトプットの習慣を作っていきます。