« PSDをXHTMLとCSSにしてくれるサービス、PSD2CSS Onlineを試してみた | Back To Blog Top | 『マイクロフォーマット』出版記念セミナーに行ってきた »
浅漬けCSS
最初に結論
ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない?
きっかけはTwitter
昨日、@reaさんがTwitterにポストした一言がきっかけです。
最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。
それに対する@hamashun(僕)の反応がこんな感じです。
@rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。
ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。
Twitterのログだけだと説明不足だったのでここで追記。
@reaさんから頂いた更なる反応。
@hamashun 自分も最近はそんな感じです。浅漬け CSS いいですね!
そもそもぬか味噌CSSとは
@reaさんのポストが解りやすいです。
@hamashun ぬか味噌はデフォルトスタイルをできる限り統一しよう、っていう考えですよね。
「ぬか味噌」というネーミングは、上ノ郷谷さんのエントリ、スタイルシートを分けて管理する方法をまとめるが恐らく初出です。
上ノ郷谷さんのサイト、2xup.orgのぬか味噌CSSを見てみると、実際にどのような指定をしているのかが分かります。
言うなれば「オレオレデフォルトスタイル」って感じですね。
(もし誤解されると困るので念の為に書いておくと、この「オレオレ」にネガティブな意図はありません)
浅漬けCSSについて色々
浅漬けCSSの定義
必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。
サイトによって記述する内容が変わる事もあります。
ぬか味噌CSSと浅漬けCSSは、どっちが優れているの?
優劣はありません。 慣れやサイトの種類によって使い分けるといいと思います。
サンプルコード
div,span,h1 ...(必要な要素が並ぶ)... p {
margin: 0;
padding: 0;
}
a img {
border: none;
}
謝辞的な
Twitterで言及くださった皆様(非公開にしている人は表示されません)