y-103のブックマーク - はてなブックマーク

y-103 id:y-103

ブックマーク / hijiriworld.com (3)

CSSの5つの分類 | hijiriworld Web
※OOCSSについては過去記事を参照のこと OOCSS（オブジェクト指向CSS）のススメ難しいOOCSS（オブジェクト指向CSS）の設計再利用性の範囲を2つに分けて考える OOCSSはとにかくクラスを細分化すればいいってもんではない。クラス=プロパティレベルまで細分化されたCSSは、煩雑になるばかりかコストも高くなる。だが、細分化すること自体が悪いわけではない。失敗に陥るのは、再利用性の範囲を明確にしていないため。再利用可能な範囲とは？いま製作しているサイト内？それともあらゆるサイト？まずはこの線引きをしっかりすることが重要だと思う。プロセッサー型CSSフレームワークmaple.cssのヘルパーには以下のようなクラスが定義されている。（抜粋 .ref { position: relative; } .abs { position: absolute; } .fl {
y-103 2015/08/31
oocss

CSS
リンク
OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？この考え方を体系化してまとめたものがOOCSSです。では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
y-103 2015/08/31
oocss

CSS
リンク
難しいOOCSS（オブジェクト指向CSS）の設計 | hijiriworld Web
OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 Twitter Bootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで
y-103 2015/08/31
css

oocss
リンク
1