2つのcssファイルのマージ
- (2021-01-15 06:01:04)
ワンカラムだから楽になる？
近年の html/css の高度化はもはやボクみないな片手間でやっている素人が扱えるレベルを超えていて、webのフロントエンドを専門とするデザイナーやコーダーに書いてもらう時代となっている。
スマホ普及でモバイルファーストとなった2015年くらいから、webもワンカラムが主流。
レスポンシブがいいのだろうけど、面倒なので、PCも含め「基本ワンカラム」で書いとけばいい。
ワンカラムなので、もはやレイアウトという考え方はなくなり、デザインなんて考えなくてよくなるのかな？と思っていた。
情報を伝えるだけでよいという意味なら、ワンカラムで、上からコンテンツを順々に書いていくだけでOKである。なので、ワンカラムは入りやすく簡単。
しかし、消費者に対してインパクトがあるページを制作しようと思えば、それなりに高い技術が必要ということは変わりなかった。
それにワンカラムといったって、PC表示とその操作性を考慮すれば、やはり、レスポンシブは避けがたい。
小企業は自分でやるしかない
ボクらのような小企業の場合、秀逸なデザインを創作し、デザインに忠実なコーディングができる専任スタッフは通常いない。
外部にお願いしたいが、なかなかよい人が見つからない。
というわけで、相変わらず、自社のwebページは未だボクが制作することが多い。
作り替えの原則：旧CSSは廃棄？
今回、あるページに新しいレイアウトを導入することにした。
それで古いページからのマージが必要だが、古いページの一部はレイアウトごとまるまる転用したい。
新ページの制作の原則は「旧cssは廃棄し」かつ「新ページにはコンテンツだけを流し込む」が理想。
しかし、部分部分が、それなりに作り込まれており、まだまだ使える場合などはなかなか捨てられないケースもある。今回はそれ。
そういう部分はhtml/css ともに、そのまま移植したい。
こういうケースは今回はじめてで、いろいろ試香錯誤中である。
(1) 旧ファイル名の変更：古い html/css のファイル名に「.old」を付けた：
(新) index.html style.css
(旧) index.old.html style.old.css
(2) 旧ファイルのゴミ整理
cssは1,000行程度。相当、ゴミがたまっている。通常、cssファイルは時間とともにゴミだらけになる。以前はゴミが嫌で、不要なコードは削除するようにしていた。
しかし、そのメンテナンスのコストを考えれば、ゴミなど放置して、不具合が多くなってきたら、どこかのタイミングでバッサリと新しいものにした方が効率的だと最近は思う。
今回は1,000行あるcssファイルも、おそらく半分程度も使用していないだろうから、 html/css に関して、大ざっぱに不要・未使用部分を削除して、ある程度見やすいファイルに成形。
(3) 旧cssファイル：オリジナルのid名・class名の変更
オリジナルのid名・class名は新ファイルとの重複を避けるため、接頭子(prefix)として「2021-mergedxxx-」という名称に変更。index.old.htmlに対して、id・class名を一括置換。
(4) id名・class名以外のセレクタ
たとえば、「body, img, ul, li, h1, h2, a, a:hover, input・・」は名称変更が許されないので、原則、古い方をあきらめるが、レイアウトやデザインが大きく壊れるものはセレクタごと個別に移植する。