CSSの書き方について考える(インライン編)

最初に、この記事は後から思いついたり考えが変わったら追記修正する可能性があります。アトリエシリーズを初めてプレイしてます。フィリスちゃん可愛い


先日WordPressのビジュアルエディタでCSSレイアウトを弄りたい部分が発生したため(いうてテキストベースでだが)書いていたんです。

ここで悩んだのが「この一部分のために果たしてクラスを使っていいものなのか…?」というところです。

またこういう場合に限らず例外的にCSSを使う場面はあると思うのです。一般的にHTMLに直接styleを記述するのはNGという風潮があるのは重々承知ですが…(カオスになるからね(」・ω・)」うー!(/・ω・)/にゃー!

同じような悩みを持つ方もいらっしゃるみたいで。どうなんだろ?素人目線ではありますが「部分的にインラインで記述」するメリットを考えます。

1.CSSの管理

例外的にCSSを設定する場合に多いパターン、それは余白(margin, padding)に関する設定だと思います。でもこれ「この要素のmarginは基本は0pxでいいけどここだけ1行空けたいからmargin-bottom: 1em;が欲しい!」って時に.mrgbtm1emみたいなクラスを作りますかって話。いや作る人は作るんでしょうけど。

個人的に何が嫌いかって、

  • 名前管理の問題。つまり先ほどの例だとわりとまんまだから困らなそうだけど、「トップページにあるliタグのこの部分をcssで目立たせたいからtop-li-juuyouってクラスにしよう」みたいなのが増えていくと。。。??「どうなるかぜんぜんわからん!」
  • あの例の続きでいくと、やっぱり1.2emにしたかったとなったとき、修正する箇所が「クラス名・クラスの中身・htmlに指定するクラス名」 の3箇所。それに対しインラインで指定していたら勿論1箇所。

2.CSSの概念的な話

CSSは本来「htmlをシンプルにする」「使いまわせる指定を書く」ためにあるものだと思っています。

使いまわせないし逆にCSSをぐちゃぐちゃにしかねない例外的な指定はこれに反すると思います。

まぁ追記修正の過程で使えまわせるじゃん!みたいなことはあり得ない話ではないですが。

3.さらに例外な場合

冒頭で書いた通り、WordPressのようなCMSを使っていた場合です。

「この投稿」でしか使わないようなstyle設定をCSSファイルに書き込む時、メリットよりもデメリットが多いんじゃないかなぁって。そりゃ何行もいるようなものの場合かえってインラインでは見にくくなる原因なんですけど、実際そんなことなかなかないと思いますし。

まとめ

こんな感じの理由で使いたいときはインラインでもいいんじゃないかなぁ?と思います。もちろん乱用はNGですけど。なにかまた気付いたことがあったら追記修正します。