「効率のいいCSS」は管理しやすさ重視で

たまにはカスオタらしい記事を書く。自作CSSがあまりにも酷い(質的な意味でも量的な意味でも)ので、少しずつ修正している。自分のCSS記述ルールは、以前CSS版ホワイトスミスのスタイルに書いた通りだ(1年半以上経ったので今と考えが変わったところもあるが)。そして、今回主に参考にしたのは以下の2ページとそのリンク先。

分かりやすくまとまっており、自分のCSSを振り返るとき参考にさせていただいた。ただ、「ハイパフォーマンスCSSの記述方法」とあるが、

ここで言う「効率的」というのは、あくまで実行時のパフォーマンスにフォーカスしたものです。運用やメンテナンスなどの管理効率とは相反する場合があるかと思います(「子孫セレクタを使わない」など)。

ハイパフォーマンスCSSの記述方法 -- SimpleIsm

というところに注意したい。JavaScriptなどは表示速度に大きく影響するのは想像できるが、ハイパフォーマンスのCSSはそうでないCSSと比べてどのくらい速くなるのか具体的に知らないので、データがほしいと思った。はてなブックマークに参考として挙げられていたCSSセレクタのパフォーマンスへの影響 -- warikiruによるとあまり変わらないようで……。

しかし0.0001秒でも速い方がいいのでCSSの可読性や管理しやすさを考えて、

あたりは意識してCSSを書くことにする。多分。

あと、edvakfさんのTwitterで気になるツイートを見つけたので引用する。

CSS っていうのが全部バッドノウハウの固まりにしか見えなくなってきた。「これを実現するためにはこうするのが正しい」というのを誰も知らずに、「それっぽく見えるから OK」だけでみんな書いてる気がする。

edvakf -- Twitter

バッドノウハウというか、CSSは余分なもの・無駄の塊だと思っている。HTML文書がポテトチップス(本体)ならCSSはその袋(包装)、のような。例えが謎すぎるかな。HTML文章(というかコンテンツ)が一番大切で、CSSはシンプルでコンテンツの邪魔をしないデザインであればいいと。制作者CSSがあれば美しいサイトなどになるが、それはあくまでおまけ。私はValidなHTMLを書こうとしているが、CSSはValidでなくても気にならない。流石に特定ブラウザ対策のハックを使うのは抵抗があるが。

コンテンツの可読性の高いデザインは素っ気なくなりがちで――閲覧側としては気にならないのだろうし、元は私のデザインセンスの問題なのだが――、私としてはもう少し可愛く飾りたい!という気持ちがあるので、そこそこ自分好みの可愛い(?)デザインで、そこそこ読み込みが速く、なるべく管理しやすいCSSを書きたいと思っている。何事もバランスが大切という面白みのない結論で終わる。

配布用ウェブテンプレート制作者は多くの要素にスタイルを指定しておこう

再利用しやすいCSSの話。あまりに酷い自作CSSの記述量が多い理由の一つは、printやhandheldなど複数メディア用CSSを書いているのと、滅多に使わない要素(samp、valなど)のスタイルも指定しているから。使わないならわざわざ書く必要はないだろうと思われるかもしれないが、一応うちはテンプレサイトなので他の人が私のCSSを使うとき不自由しないように、自分が使わない要素も指定するようにしている。

そうするようになった理由は、CSS着せ替えテンプレートプロジェクト画像の使用を極力控えてかっこいいCSSデザインをやってみようなど着せ替え企画サイトを見で不便な思いをしたからだ。CSSファイル1枚を変更するだけでデザインを変えられるはいいのだが、「好みのCDPデザインがあった。でもtable要素にスタイルが指定されていない…」、「この画像(中略)大会のデザインが素敵だ。でもstrong要素にスタイルが指定されていない…」のように、サイト全体のデザインは整っているが、細部はあまり手が加えられていないものがあって残念な思いをした。

ないなら自分でスタイル指定しろと言われればそれまでだが、他人に使われること前提で作っているのなら、利用者に手間をかけさせないよう多くの要素にスタイルを指定した方がいいのではないか。なので、なぜ多くのテンプレートがtable要素に対応していないのか? -- Pinky:blog開発雑記にも同意する。…と書きつつ私のCDPデザインもtable要素にスタイルをしていしていないものが多いので人のことを言えない。因に指定していない理由は公式サイトからダウンロードしたCSSにtable要素などのスタイルがなかったから。今後作るテンプレートやリメイクするときはスタイルを指定したい。

CSSの量が多いとそれはそれでメンテナンス性が下がるので、利用者が使いやすい記述について考えている。

リソース情報

分類
web
新しい記事
古い記事
URL
http://az-store.nrym.org/note/2010/02/13/90
SAKATORI Kihiro www@nrym.org
Published: 2010-02-13Last modified: 2010-02-14
分類
月別ログ
2010年8月2010年6月2010年5月2010年3月2010年2月2009年12月2009年11月2009年10月2009年9月2009年8月2009年7月2009年5月2009年3月2009年2月2009年1月2008年12月2008年11月2008年10月2008年9月2008年8月2008年7月2008年6月2008年5月2008年4月

案内

広告

広告

このページについてつぶやく コメント一覧