web-dev-qa-db-ja.com

CSSフレームワークはいつ使用すべきですか?

CSSフレームワークを使用するためのベストプラクティスシナリオは何ですか?フレームワークを使用するよりも、「独自に」CSSをゼロから作成したほうがよいのはいつですか?

11
Mark Hatton

CSSフレームワークは、私にとって実際にはフレームワークではないため、少し注意が必要です。それらは単に事前定義されたクラスです。しかし、これはあなたの質問ではありません。

CSSフレームワークは、モックアップやワイヤーフレームに最適です。マークアップに無意味なクラスを追加するため、ライブサイトで使用することはお勧めしません。 「.span3」はコンテンツについては何も言わず、デザインだけを教えてくれます。

ただし、ブループリントには、フレームワーククラスとセマンティッククラスフレームワークを一度組み合わせて使用​​できる便利なツールがいくつかあります。

私は常に自分のCSSをロールバックします。

11
Kevin

それらを避けてください、彼らは迷惑です。

特にこれ。

* { margin:0; padding:0; }

私の最大の不満は、リセットおよび/またはフレームワークを使用するサイトを継承/維持する場合、サイトを変更する前にそのフレームワークを学習する必要があるということです。

H1タグを追加すると、特定のことが期待されます。ほとんどのリセットでは、パディング、マージン、ブロックなどがすべて削除されるため、h1タグはデフォルトでは正常に機能しなくなります。だから私は戻って、そもそもそこにあったすべてのものを追加する必要があります。

一般に(私の経験では)リセットとフレームワークを使用するCSSを理解していない人は、その人のためにより多くの作業を引き起こします。

3
corymathews

CSSフレームワークが提供する唯一のサービスは、CSSにあまり詳しくない人にとっての出発点であると私は思います。

2
Soleil

Eric Meyerのreset.cssを使用することもお勧めしますが、CSSの「フレームワーク」はレイアウトにとって有益だと思います。ブループリント、YUIグリッド、および960グリッドは、CSSを自分で記述することなく、非常に複雑なレイアウトを実現するのに役立ちます。

言及された欠点がありますが、たとえば、カスタムコードをローリングする代わりにCMSからWebサイトを構築することについても同じことが言えますが、それらは依然として有用である可能性があり、多くのサイトで得られた利点は外部のCSSまたはパフォーマンスの問題を上回ります。

2
Steve Tranby

実際に独自のデザインを実装している場合は、独自のCSSをいくつか作成します(他の誰かが偶然必要なデザインを作成していない限り)。

独自のCSSを記述していると仮定すると、「フレームワーク」は次のようなスタイルがある場合に役立ちます。

  1. 複数の場所で使用されます。そして
  2. 独自のクラスに分割できるほど複雑

本当にシンプルなスタイルの場合、クラスを使用してwhat何か(たとえばclass="navigation")を示し、スタイルシートでそのクラスにスタイルルールを適用して外観を定義することをお勧めします。

しかし、必ずしもどの要素にも結び付けられていないより複雑なスタイル(たとえば、レイアウト関連のスタイル、フレームワークが.span3などの名前を付ける種類)の場合、それらをクラスに入れて適用することには何の問題もありませんCSSのクラス。両方のアプローチを一緒に使用できます。

要素が予測不可能な方法で結合される可能性が高い、より大規模で複雑なサイトでは、フレームワークのようなアプローチがコードを管理しやすくするのに役立ちます。

ただし、独自の「フレームワーク」を作成することもできます。 CSSは実際にはそれほど大きな言語ではないため、「フレームワーク」を引用符で囲みます。 1日でCSS:The Definitive Guide(Eric Meyer)を読んでから、たとえばブループリント(CSSの「フレームワーク」)と何が起こっているかをほとんど理解しています。 IEの回避策を少し調査する必要があるかもしれませんが、少なくとも1桁以上複雑ではありません。ここにjQuery。

1
Paul D. Waite

私はCSSにブループリントを使用しています。
CSSは、上記の誰もが言っているように、本当に簡単です。

ただし、実際には、プラットフォームを考慮する必要があります。

CSSを使用すると、レンダリングエンジンによって複雑さが増します。

Gecko対WebKit対Presto対Trident ...そんなことをしたいのは誰ですか?

ここで「フレームワーク」が提供するのは、すべてのブラウザで動作する可能性が最も高いレイアウトを作成できるため、「WTF-am-I-doing = -this-crap」を探し回る必要はありませんIE 7 quirksmodeの修正、または同様にばかげたこと。

フレームワークは、希望するレイアウトの90%を実行します。その後、いつでも独自のスタイルを追加できます。

それで、質問に答えるために、私はフレームワークを選んで、それがあなたのために働くかどうか見ると言うでしょう。それだけかもしれない。そうすれば、あなたは黄金色になり、あなたが実際にやりたいことに戻ることができます。そうでない場合は、cssを使用して拡張し、機能しなかったものを変更します。このようにして、クロスブラウザーの利点を維持しながら、カスタマイズすることができます。

小さな利点として、1つを選んでそれを常に使用した後、病気にかかったり、昇進して後継者を訓練する必要がある場合は、次のように言うことができます。

「はい、フレームワークABCを使用しました。ドキュメントはここにあります。コードはそこにあります。トレーニングは終了しました。幸運を祈ります。」

1
chiggsy

すべてのニーズを解決するとき。 (これは、調整の考え方に基づいています。)

フレームワークに関する唯一の本から? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp 。 (ここでは無料で関連性があるため、リンクのみ。)

0
Shawn Northen