インラインスタイルは、本当にダメな子なのか？（CSS Architecture Advent Calendar 2014：後編）

これは CSS Architecture Advent Calendar 2014 の22日目の記事です。
昨日は naomaru さんの チームで扱う「CSS設計」 でした。

この記事は 20日 の「構造的な CSS のための命名規則とルール」の後編にあたります。

---

前回の記事 で提言したことの中に、
CSS の記述量は、できるかぎり小さく保つように努力しよう というものがある。
スタイルは使いまわしやすい定義となっていることが望ましく、
限定的な箇所でしか必要のないスタイルは、出来る限り含めないほうがよい。

そのため、わたしは、
HTML タグに対して、スタイルを直接付与（インラインスタイル）を行うことがある。

「インラインスタイル！？
全てのレイアウトが HTML に含まれていた暗黒の時代に巻き戻したいのか？」

うーん。これは素朴な疑問なんだ。
場合によっては、インラインスタイルが良い場合もあるんじゃないの？

レイアウトの微調整

例えば、HTML で次のようなボタンレイアウトを作りたいとする。

「キャンセル」と「保存」のボタンの間に、少し広めの余白があるようだ。
HTML と CSS はこのように定義してみた。

<!-- HTML -->
<div class="ui-button-control">
  <button>戻る</button>
  <button>キャンセル</button>
  <button class="last">保存</button>
</div>

<!-- CSS (Sass) -->
.ui-button-control {
  background-color: #E0E0FF;

  .last {
    margin-left: 20px; // 余白
  }
}

最後のボタンに対して、'last' というクラスを付与。
少し余白を持たせることにした。

後日、別のページをマークアップしている時、次のような画面を見つけた。

HTML はこうなった。

<div class="ui-button-control">
  <button>戻る</button>
  <button>キャンセル</button>
  <button class="last">保存</button>
  <button>下書き</button>
</div>

うーん。'last' というクラス名は、実態に対し不適当なようだ。
クラス名を、もっと汎用的なものに変えることにしよう。

<!-- HTML -->
<div class="ui-button-control">
  <button>戻る</button>
  <button>キャンセル</button>
  <button class="space-left">保存</button>
  <button>下書き</button>
</div>

<!-- CSS (Sass) -->
.ui-button-control {
  background-color: #E0E0FF;

  .space-left {
    margin-left: 20px; // 余白
  }
}

更に後日、私は気づいたのだが、
この WEB サイトでは、この 'space-left' のように、
少しだけ余白を与えるという構造が、随所に現れるということが分かった。

では、この設定は、もっと共通化を進めるべきではないか？

そして、私は、次のようなやり方に行き着いたのだ。

<!-- CSS (Sass) -->
.margin-l-16 { margin-left: 16px; }
.margin-l-18 { margin-left: 18px; }
.margin-l-20 { margin-left: 20px; }
.margin-l-22 { margin-left: 22px; }
...永遠に続く...

これがあれば、さっきの HTML を、こういう風に書けるぞ！

<div class="ui-button-control">
  <button>戻る</button>
  <button>キャンセル</button>
  <button class="margin-l-20">保存</button>
  <button>下書き</button>
</div>

この 'margin-l-20 ' のように、レイアウトに直接対応するスタイルの定義は、
汎用クラス、汎用CSS などと呼ばれることが多いようだ。

しかしこの汎用クラス。
スタイルと、ほぼ１対１で対応するものがほとんどである。
うーん、これって結局...

<button style="margin-left: 20px">保存</button>

と書くことと、何が違うんだろう？

結局

私はレイアウトの微調整には、
インラインスタイルを使っても良いのではないか、という意見である。

ただし、HTML、CSS によるレイアウトを「主」として、
インラインスタイルの利用は「従」であることは変わりない。
インラインスタイルの使用は、とても限定的だ。

私は CSS に、
margin-r-18, 20, 22 のような汎用クラスの列挙をしたり、
space-tiny や space-big など、汎用クラスの表現を抽象的にしただけのものには、懐疑的だ。

インラインスタイルの問題点

ただし、インラインスタイルには、明らかな問題点がいくつかあると思う。
これは注意するべきだと思う。

【ダメな所 １】HTML が、JavaScript から挿入される場合は、使いにくい

JavaScript から HTML を挿入する場合、
のように、
style 属性が JavaScript に入り込んでしまっているのはやり過ぎてる感じがある。

少なくとも、JavaScript から操作される要素に、インラインスタイルは用いるべきではない。

【ダメな所 ２】インラインスタイルが OK の場合と、NG の場合の境界があいまい

人によって解釈が異なり、
CSS に書いたほうが良さそうなスタイルでも、インラインに書かれてしまうという状況を抑制できない。
指摘も難しい。（私の書き方はいいけれど、あなたの書き方はイケてない論争になる）

その点では、汎用クラスは、方法が一貫しているという意味では、ありかもしれない。

【ダメな所 ３】Content Security Policy（CSP）的に NG

インラインスタイルが駄目だと言われる根拠によく使われる。
ただ、CSP がインラインスタイルを推奨していない理由については、
私ははっきりとした理由を知らない。何故なんだろう。

---

CSS Architecture Advent Calendar 2014
明日は、ksk1015 さんです。