いつCSSフレームワークを使用すればよいですか?


11

CSSフレームワークを使用するためのベストプラクティスシナリオは何ですか?フレームワークを使用するよりも、CSSを最初から「ロール」する方が良い場合はいつですか。

回答:


11

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

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

ただし、ブループリントには、フレームワーククラスとセマンティッククラスを組み合わせた後で役立つツールがいくつかあります。

私はいつも自分のCSSを使います。


4
私はこれでThorn007と一緒にいます。CSSに取り掛かると、CSSは非常に単純です。適切なCSSリセットを使用して、独自のCSSをロールバックしてください。
jessegavin 2010

3

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

特にこれ。

* { margin:0; padding:0; }

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

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

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


1
Eric MeyerとYahooのWeb開発者はCSSを理解しており、CSSリセットを使用しています。私の経験では、ブラウザ間の一貫性を実現しようとすると、時間と頭痛の多くを節約できます。-しかし、CSSフレームワークは不十分です。
jessegavin 2010

h1タグを追加すると、特定のことを期待します。残念ながら、各ブラウザで異なることを期待する必要があります。したがって、cssリセットの必要性(フレームワークではない
Gabriele Petrioli

h1はかなり悪い例です。ブラウザは異なるマージンを使用する傾向があるためです。個人的には、リセットより「セット」を好む-つまり、すべてを0にリセットする代わりに、最初に自分のスタイルシートに設定するだけだ!
DisgruntledGoat

* {margin:0; padding:0;}すべての中で最も重要なCSSリセットです。margin-top/maring-bottomすべてのタグの下でもタグを削除するpので、各行の間に大きなスペースが表示されなくなります。このWebサイトでさえ、おそらくp {margin:0;}他の方法で使用しているため、ブラウザは各行の間に大きなスペースを占めます。彼らがいらいらしているとはどういうことだと思いますか。
Marco Demaio、2011年

2

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


2

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

言及されている欠点もありますが、たとえば、カスタムコードをローリングする代わりにCMSからWebサイトを構築することについても同じことが言えます。


1

実際に独自のデザインを実装している場合は、独自のCSSを記述します(他の誰かがたまたまあなたが望む正確なデザインを書いていない限り)。

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

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

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

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

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

自分で「フレームワーク」を書くのもいいと思います。CSSはそれほど大きな言語ではないので、「フレームワーク」を引用符で囲みました。CSS:The Definitive Guide(Eric Meyer)を1日で読んでから、たとえばBlueprint(CSSの「フレームワーク」)のすべてのコードを読んで、何が起こっているのかをよく理解してください。IEの回避策を少し調査する必要があるかもしれませんが、ここでは例としてjQueryよりも1桁少ない複雑さで話しています。


1

CSSにはブループリントを使用します。
上記の誰もが言うように、CSSは非常に単純です。

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

CSSを使用すると、レンダリングエンジンがさらに複雑になります。

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

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

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

だから、質問に答えるために、私は任意のフレームワークを選び、それがあなたのために機能するかどうかを確認すると思います。それだけかもしれない。その後、あなたは金色であり、あなたが実際にやりたかったことは何でも取り戻すことができます。そうでない場合は、CSSを使用して拡張し、機能しなかったものを変更します。これにより、クロスブラウザーの利点を維持しながら、カスタマイズを行うことができます。

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

「はい、私はフレームワークABCを使用しました。ドキュメントはここにあります。コードはそこにあります。トレーニングは終わりです。頑張ってください。」


0

それがあなたのすべてのニーズを解決するとき。(これは仕立ての考え方に基づいています。)

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


リンク先のページの関連部分を切り取って貼り付けることができれば最適かもしれません。そうでなければ、答えとして、これは一種の光です。リンクは時間とともに壊れることが多いため、リンクのみの回答はここではお勧めしません。この回答を更新して、OPと将来のユーザーが歯を磨くことができる何かを支援することができますか?前もって感謝します!
closetnoc 2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.