Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSS複合セレクタなしでは保守性の高いサイトは作れない】

f:id:wp-lesson:20160818105223p:plain

「クラスだけでお願いします。」
「IDは使わないで。」
「importantもNG。」
 
と言われたことがあって困りました。
 
サイトとして、HTML構造もCSS
使い回しが効くように汎用的に設計
された既存サイトのカスタマイズ。
 
そもそもカスタマイズするページの
新デザインが、既存のHTMLとCSS
に込められた設計方針に合ってない。
 
というか、デザイナーが「設計」と
いう視点を持っていない。
 
例えるなら、カップラーメンを作る
工場の生産ラインに突然、レトルト
カレーを作るラインをごちゃ混ぜて
 
「はい、明日から同時に動かして」
「ラインがぶつからないようにね」
「もとのライン動かしたらダメよ」
 
と言われるようなものです(笑)
 
そもそも設計の思想がズレてるのに
新旧ラインが干渉し合わないように
作ろうと思ったら、
 
「複合セレクタの使用」
 
これは仕方がないことだと思います。
汎用性や保守性を維持するために
複合セレクタはあるのだから。
 
それを、
 
「classの階層が深いと分かりにくい」
 
という理由で避けたがるのは、
何か本質を見誤ってるように感じます。
 
複合セレクタがなかったら、
複数のページからなるウェブサイトは
作れません。
 
単独のclassだけで全てのスタイルが
指定できるとしたら、似たような名前の
classがたくさん生まれてしまいます。
 
xxx-wrapper
yyy-wrapper
zzz-wrapper
 
とかね。
 
それって id 使ってるのと同じことです。
classは複数の箇所に同じスタイルを
一括指定できるためにあるのだから、
id のような固有名詞的な使い方は間違い。
 
どうも、
 
『classは1階層であるべき論』
 
を唱える人は、設計ということをあまり
理解しておられないようです。

複合セレクタを理解してこそ、
本当に最小限のスタイルでサイト全体を
効率よく管理できるのに。