SQLのEXPLAINをCSSにも。スタイルシートデザインのお供に「CSS Explain」 // MOONGIFT Archived

CSS Explainはセレクターを入力すると、その解析結果を表示してくれるライブラリです。

CSSはWebデザインと構造とを切り離すために使われていますが、JavaScriptから指定することも多くある意味でプログラマブルな存在です。そんなスタイル設定をSQLのExplainライクに解析するのがCSS Explainです。

トップページです。

bodyはTagとして認識されています。

細かな情報はconsoleで確認すると分かります。

CSS Explainでは入力したセレクター、個別のパーツに分解した結果、セレクターの詳細度、id/tag/クラスおよびユニバーサルのカテゴリー、キー、スコア、メッセージが返ってきます。そのまま使うというよりも、デザインする上で詳細を調べたいという時に使えそうなソフトウェアです。

CSS Explainはnode.js/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

MOONGIFTはこう見る

スタイルシートでデザインする際にidでの指定は使わない方が良いという意見もあります。また、アンダーバーを使ったりハイフンを使ったりという指定を織り交ぜたりするとメンテナンス性がとても悪くなります。適切なルール決めが必要です。

元々デザインを指定するためのスタイルシートですが、今ではプログラミングと密接に関わっています。Webデザイナーの方もそういった開発時の視点を含めたWebデザインのセンスが求められているのではないでしょうか。