現在ECサイトの小規模な変更を行っているのですが、CSSをちゃんとしたスタイルにするのに気合いを入れて作業しました。
CSSは面倒
CSSはWebアプリケーション作成では避けて通れないものです。CSS自体にもいろいろと難しさがあります、とくにレイアウトは昔のFloat、最近はFlextboxやGrid Layoutなどあり思ったようにならずに毎回悩みます。
CSSとHTMLの関連付けは通常HTMLのclass属性（クラス名）を使いますが、CSSの設定はクラス名のネスト（AND結的？）に対して設定します。またHTMLのclass属性には複数のクラス名でき、こちらはOR的？に扱われます。
この性質（仕様）は利用者に柔軟性を与えますが、混乱ももたらします。さらにHTMLファイルは必要なCSSファイルのみ参照するようにできますが、Ruby on Railsのようなフレームワークを使うと複数のCSSファイルが結合・圧縮されるので、クラス名が重複していたり、クラス名の組み合わせの優先順位により思わぬCSSが適応されてしまう事もままあります。
さて、このECサイトのPC版はお客様がデザインしたPhotshop画像を元に、私がHTML/CSSを作成しました。最初のバージョンは2009年に作りましたがCSS設計の知見が無くかなり適当でした。
さらにデザインの大規模変更やメンテナンスを繰り返しました。ときどきCSSを整理する事もありましたが、設計思想が無かったのでゴチャゴチャになってしまいました。
BEMを正しく保つのには気合いが必要
2018年にスマフォ版ページを作る事になり、PC版での問題を引き継がないようにCSS設計にBEM (Block、Element、Modifier)を導入しました。これにより、CSSの量は増えましたが体系化されスッキリしました。
当初のもくろみで、はスマフォ版が完成したらPC版にもBEMを導入する予定でした・・・まだ実施されていませんが・・・
さて今回の変更ではPC版、スマフォ版両方を変更したのですが、PC版のCSS変更は運良く簡単に変更・追加できました。スマフォ版の方も画面デザイン確認用にBEMルールを無視しHTMLのstyle属性でチョコチョコと作ったところ簡単にできました😊。
さて、画面デザイン変更のOKが出て正式版を作るにあたり、BEMなど無視してstyle属性で良いのでは！ という悪魔の囁きが聞こえました😊。 しかし ここで妥協するとCSSメンテ地獄に落ちる！ との天使の声に耳をかし、ちゃんとしたBEMスタイルで書きました。
BEMを保つには気合い・強い意志が必要ですね。
Reactはいいよね
一方Reactを使ってフロントエンドを作るには、コンポーネントにCSSを閉じ込めてしまうCSS Modulesやコンポーネントと一体化させるstyled-components、emotionなどがあり、これらのライブライリーをうまく利用する事でもっと楽にCSSのメンテナンスできるようになりそうですね！
