CLASSの無いCSS

筆者は、CSS で CLASS セレクターを使用しなければ、ソースが小さく簡潔になり、サイトの保守性も高まると考へてゐます。

HTML/CSS でサイトを作る時は、DIV 要素などに CLASS 屬性を附けて、CLASS セレクターでスタイルを定義する事が多いです。ところが當サイトでは CLASS 屬性を全く使用せず、P や UL-LI などの要素タイプに直接スタイルを定義してゐます。この方式をしばらく續けて、幾つかの利點が見えてきました。

1

CLASS を使用しない最大の利點は、CLASS のための DIV や SPAN などが消えて、HTML が小さくなる事です。小さな HTML は書くのが簡單で、保存や轉送にかかる資源も少ないです。

他の利點は HTML と CSS とが互ひに獨立する事です。外観を変更する時は CSS だけを修正すればよく、HTML を書く時は外観の事を忘れ、文章に集中できます。HTML と CSS とを繋ぐ CLASS が無くなり、兩者が疎結合になるわけです。

2

HTML と CSS とが互ひに獨立してゐれば、デザインの再利用も容易です。例へば任意の HTML に對して當サイトの CSS を使用すれば、當サイトと同じデザインにできます。これは WordPress のテーマに似てゐますが、仕組みはより簡單です。

これは初心者がサイト作りを學ぶ時にも役立つはずです。もし、CLASS の 無い CSS の素材が沢山あれば、初心者は先づ HTML の書き方だけを學び、書いた HTML に好きな CSS 素材を適用すればサイトを完成できます。世間のデザインテンプレートは、HTML と CSS がセットになつてゐて、これを初心者が使ふと HTML をよく分らないまま、HTML をコピーしてタイトルや本文を書き換へて終りになり易いと感じます。

3

とはいへ、CLASS を全く使用しなければ、サイトの外観には制約ができます。

それでも制約の中で個性的なサイトを作る事はできると考へます。CSS にはたくさんのセレクターやプロパティがあり、意外と様々な表現ができるからです。CSS3 以降を使用すれば尚更です。

參考

關聯

  1. ウェブサイトの設計方針
  2. CLASSの無いCSS
  3. HTMLのパターン集