Home > CSS > CSSを多重継承してみる

CSSを多重継承してみる

  • Posted by: ryow
  • 2007年8月 9日 22:45
  • CSS

りんごりらのエントリーで使ったCSS多重継承だけど、2コまでかなーと思ってたらそれ以上もいけるっぽい。

.text-red{
  color:#c00;
}
.text-bold{
  font-weight:bold;
}
.bdr-dbl{
border:3px double #999;
}
.w300{
width:300px;
}
.text-underline{
text-decoration:underline;
}

こういうスタイルを用意した上で、<div class="text-red text-bold bdr-dbl w300 text-underline">りんごりら2!!!!<div>と書いてみる。
予想では2重枠線で幅300pxのDIVのりんごりらが赤くて太字で下線が入っている、というものができるはずなんだけど…

で、結果は以下に続く！！

りんごりら2!!!!

多重継承恐るべし！！

今回のりんごりらは5個のスタイルを継承したわけだけど、これをうまく使えばマークアップエンジニアの境地に立てると思う。
実際にXHTMLから読み込むCSSはimport.cssにして、デフォルトセット（ブラウザ間の差異をなくしてリセットするスタイル）、テキストセット（色、太さ、下線、大きさ、書体などを細かく定義したスタイル）、レイアウトセット（幅、高さ、フロート、ボーダーを細かく定義したスタイル）の3つをインポートして、XHTML上でクラスを読み込むときに動的にクラスを作るようになれば超絶だと思う。

CSSクラスの抽象化って、意外と進んでないんじゃないかな。多重継承も。
XHTML+CSSで論理的に書くかどうかっていう議論ばっかりで、使いこなしてるって言ってる人が、必要になったら新しいDIVクラスを追加しちゃってたり、box1、box2、box3…なんてのがつらつら並んでるんだけど指定の違いはborderだけだったり、とか、アホなCSSを書いてるマークアップエンジニアがまだまだいっぱいいると思います。

「その先の技術」はCSS多重継承の先にある、と思う。どうだ。

関連エントリー

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://ryow.net/mt/mt-tb.cgi/214
Listed below are links to weblogs that reference
CSSを多重継承してみる from ryow.net Blog

Home > CSS > CSSを多重継承してみる

最近の記事
Categories
Archives
AD
About

りょうどっとねっとブログ

Twitter :ryownet

はてな :ryownet

Search

Return to page top