最高のCSSフレームワークとは何ですか？
CSSフレームワークの世界に出会った別のフォーラムを読んでください。具体的に見てきたのは BluePrint です。他の誰かがCSSフレームワークに出会ったのか、どれが最良であり、努力する価値があるのかを提案しましたか？
CSSの「フレームワーク」には、ポイントが完全に欠けています。
CSSはJavaScriptとは異なり、ベースライブラリ/フレームワークをインクルードし、そこから関数やオブジェクトを呼び出してより高度な作業を行うことができます。 CSSフレームワークが提供できるのは、宣言的なルールです。デフォルトのブラウザルールリセットのもの、ページのオーサリングを強制するクラススタイル、「float」と「clear」を使用したレイアウトルールです。数百のフレームワークルールの肥大化を引き出すのではなく、CSSの数行でそれを書くことができます。
特に「グリッドレイアウト」の要素は、プレゼンテーションをマークアップに混在させるという昔の時代に遡ります。 'div class = "span-24"'はテーブルに勝るものはありません。そこに戻って、レイアウトに影響を与えるためにマークアップを変更する必要があります。そして、私が見たすべてのフレームワークは固定ピクセルのフロートボックスに基づいているため、さまざまなウィンドウサイズでアクセス可能なリキッドレイアウトを作成することはできません。
これは、CSSルールを書くのが怖すぎる人にのみ使用される、逆向きのオーサリングです。
したがって、まだ誰もこの質問に回答していません（私はいくつかの賛成票を見ましたが） 少なくとも、このプロンプトの2番目の質問に取り組むつもりです。
CSSフレームワークは素晴らしいです。他のフレームワークと同様に、開発時間を短縮し、サイト固有のデザインとCSSをすぐに使用できるようにします。彼らは難しい決定を考えるので、あなたはする必要はありません。
残念ながら、フレームワークを使用することには（一般的に）2つの欠点があります。
フレームワークは、CSSコードの全体的な構造とメカニズムを決定します。今、私はCSSのリセットについて話していません（これらはそれ自体で便利ですが、本当のフレームワークではありません）;私は、あなたがドキュメントでどのセマンティックタグを使用するかなどの決定をすでに下している、良いフレームワークについて正直に話している。そのため、フレームワークに依存するようになり、バグがあるときフレームワークでは、最も一般的には自分で修正する必要があります。
フレームワークは、クロスブラウザ/高度なCSSの問題を無視する言い訳ではありません。 PHPまたはJavaScriptフレームワークで作業するのと同じように、常にそれらに遭遇します。そして、それらに対処する方法を知る必要があります。他の誰かのフレームワークを使用する前に、まずフレームワーク。
ブループリントを少し覗いてみると、私はそれを実際にはフレームワークとは呼びません。おそらく、いくつかの特別な機能が追加されたリセットです。
BluePrintと他のいくつかを見てきましたが、私が推奨する唯一のCSS 'framework'は YUI Grids です
長所：
- 最高のフロントエンドエンジニア（IMO）（Nate Koechley）が執筆
- 非常に少ない。 4KB
- 非常に柔軟（1000種類のレイアウト）
- 750px、950px、974pxのプリセット固定幅レイアウトに加えて、流体幅（100％）レイアウト、および任意の数に簡単にカスタマイズする機能をサポートします。
- 固定幅レイアウトの幅の簡単なカスタマイズをサポートします。
- テンプレート列はソースの順序に依存しないため、アクセシビリティと検索エンジン最適化（SEO）を改善するために、マークアップレイヤーで最も重要なコンテンツを最初に配置できます。
- 自己消去フッター。どの列が長くても、フッターは下部に残ります。
- 100％未満のレイアウトは自動的に中央に配置されます。
- ややセマンティックなクラス名（上、左、右などよりも良い）
短所：
- 手書きのHTMLやCSSと比較して余分なマークアップがたくさん
- 複雑なレイアウトを行う方法を理解するためにいくつかの学習が必要です
他の人が投稿したように、CSSの本当の「フレームワーク」はありません。 リセット スタイルシートは、レイアウトにも非常に役立ちます。私は通常、リセットされたスタイルシートに固執してそこから行きます。ただし、CSSの経験があまりない場合は、YUI Gridsを使用すると時間を節約できます。
コンパス は、テンプレート（YUIとブループリントの両方）だけでなく、使い慣れたCSS構文を提供しながら、再利用可能な構造とより高いレベルの宣言も提供するという意味で、実際のCSSフレームワークです。
なぜcss 'frameworks'を使用するのですか？
時間にプレッシャーがかかっている場合。
あなたがCSSを知らず、あなたのためにそれを書くことができる誰かを知らないなら。
あなたが標準などについて過度に貴重ではない場合.
フロントエンド開発者に頼ることなく、自分でレイアウトを組み立てることができるので、ブループリントまたは960を使用して本当に満足しているプログラマを知っています。これは、個人プロジェクト、またはリソースが限られているスタートアップに最適です。
CSSについて十分な知識がある場合は、ストックレイアウトの適切なライブラリが既にあるため、フレームワークは必要ありません。
ただし、初心者で何かを実行する必要がある場合は、フレームワークを使用すると、基本的なレイアウトがはるかに簡単になり、ブラウザーの互換性にも取り組むことができます。
とは言っても、多くのフレームワークはすぐに使用できますが、いくつかの恐ろしいクラス名などを使用します。しかし、明らかに、その書き換えにも少しの作業が関係しています。前述のコンパスのようなものを使用すると、それを回避するのに役立ちます。
CSSフレームワーク-セマンティクスを犠牲にして時間を節約できます。また、CSSの知識を損なう可能性もありますが、それは、一般的な主題の学習にどれだけ投資するかによります。それらを利用するかどうかはあなた次第です。
BluePrintやYUIなどのいくつかのcssフレームワーク、およびEric Meyerのようなcssリセットについて、時間をかけて理解してください（本当に理解してください！）。次に、作業方法と構築するサイトの種類に基づいて、独自のリセットおよび/またはフレームワークをまとめる時間を取ります。
個人的に、私はEric Meyerリセットのほとんどを自分のクラスとリセットで使用し、さらにBluePrintとYUIからのいくつかのアイデアを使用しています。
最近、Eric MeyerがCSSフレームワークに関するプレゼンテーションを行っているのを見て、そこで彼は質問をしました。その後、彼は空のスライドを見せて質問に答えました。彼のポイントは、確かにほとんどのリセットとフレームワークに組み込まれたいくつかの有用な概念がありますが、あなたに最も合ったものはあなた自身のために書くものです（努力する価値があります）。
使用可能なフレームワークが問題を解決するのにどれほど効果的かを自問する必要があります。彼らはあなたの要件を満たしていますか？
フレームワークを使用すると、ピクセルレベルでいくつかのルールや詳細を設定し、残りの時間を実装とプロデュースに充てることができます。生産性が大幅に向上します。プロジェクトの後半で数ピクセルだけ物事を調整することに時間を費やしていることに気付いた場合（デザインのマイクロ管理）、フレームワークが有用である可能性があります。
The Pragmatic Programmer のヒント＃17には、「問題のあるドメインに近いプログラム」と書かれています。抽象化レイヤーを使用すると、レイアウトの実際の問題をより近くで解決できます。たとえば、ピクセルのわずかな調整ではなく、余分な時間でユーザーエクスペリエンスを向上させることに集中できる場合があります。
これは、量より質を犠牲にしなければならないという意味ではありません。それは効率についてです。
最近のプロジェクトでは、リソースが非常に限られており、人気のあるフレームワークが私が望んでいたことを実行しなかったため、独自のフレームワークを作成しました。次に、展開した同じグリッドにスナップするように設計チームのPSDを設定しました。
フレームワークはCSSの特定の実装である必要はありません。インターウェブからダウンロードした肥大化したものや、時代遅れのアイデアを実装したものである必要はありません。それは仕事を成し遂げるための単なるテクニックです。一部のコーダーが既に独自のフレームワークを所有していて、それを知らなくても驚かないでしょう。実際、DOMをCSSで拡張するデフォルト要素のセットと見なす場合、それは定義によるフレームワークです。
はい、使用していませんが、 emastic はチェックする価値のある代替手段かもしれません。スコープのブループリントに似ていますが、弾性レイアウト（名前の由来）もサポートしており、px、em、または％で値を指定したり、それらを混在させることもできます。
実際、過去24時間のうちかなりの時間を自分で調査しました。私の結論は、ナイスリセット（ YUIリセット を使用）、およびベースラインの設定に他の何か（ YUIフォント を使用する価値がありました。 「BluePrintがあなたのものになります）をお勧めします。しかし、「フレームワーク」---- -（YUI grids ---など）は制限が強すぎるため、クラス名やIDなどを使用せざるを得ず、サイトのように手に収まることはめったにありません作成されたCSS.
要するに、リセットはかなりいいように思えます。すべてのバリエーションを排除するのは良いことです。リストのmargin-vs-padding、または段落の間隔など。しかし、それは私がそれを取る限りです。
コンパスは素晴らしいと思います。 screencast が表示されていることを確認してください。
私は 960.gs をいくつかのWebサイトに使用していますが、非常にシンプルで簡単で、努力する価値があります。レイアウトに関する多くの作業を節約できます。 960ピクセルの固定幅でなくなるカスタムCSSジェネレーターを必ず確認してください。
Compassでは、フレームワークのクラスとIDを独自のセマンティック名に変更できるため、チェックアウトすることをお勧めします。また、mixinなどのプレーンバニラCSSでは得られないものへのアクセスも提供します。
私は、これらのツールを実際に掘り下げて使用することなく批判する、いわゆる「CSSエキスパート」に驚かされます。それらは不可欠ですか？いいえ。独自のフレームワークが好きな場合（独自のフレームワークがありますか？CSSフレームワークは、慎重に定義されたライブラリです。誰もが使用する必要があります）、ぜひ使用してください。他のフレームワークを使用することを強制する人はいません。また、フレームワークを使用している人が、CSSの純粋主義者に「間違っている」と言っている人はいません。
このような観点からフレームワークを批判することは、不安と無知を明らかにするだけです。たとえば、CSSを知らなくても人がCompassのようなツールを使用するという概念は笑えます。あなたは、フレームワークが一般的にあなたのためにすべてのCSSを書くわけではないことを知っていますか？それでも、ほとんどのフレームワークのコンテキスト内で、独自のCSSを作成して作成できます。実際、CSSを知らなければ、すぐにイライラするかもしれません。
私にとっては、フレームワークが既に文書化され、他の何百人ものユーザーによってテストされており、Compassを介して独自のクラスとIDを適用できるため、フレームワークがあることに感謝しています。フレームワークが適していないものが必要な場合は、自分でコーディングします。
このビデオプレゼンテーション Site Point CEOのKevin Yankがあなたの質問に答えると思います。私はそれを見ることを本当にお勧めします。
CSSフレームワークを使用してセマンティックマークアップを保持する唯一の方法は、高レベルの抽象化を使用することです。現時点では、コンパスは使用できるほど成熟していることを私が知っている唯一のものですが、ニコル・サリバンは彼女の「オブジェクト指向CSS」プロジェクトで興味深いことをしているようです。
CompassがSassミックスインを巧みに使用しているのは素晴らしいことであり、保守可能なセマンティックマークアップの聖杯への大きな一歩だと思います。プレゼンテーションクラスをマークアップから保護するために、Compassなどの抽象化なしでBlueprintやYUIのようなフレームワークを使用したいとは思わない。
ところで、Elasticと呼ばれる見栄えの良いCSSフレームワークがあります。これは、Compassに追加することを検討するのに十分な外観です。
私が見つけた良いリンク： トップ12のCSSフレームワークとそれらを理解する方法
AppFuseの名声のMatt Raibleは、しばらく前にAppFuseのCSSフレームワークを開発するためにCSSフレームワークコンテストを開催しました。結果は公開されます ここ 。いくつかのバリエーションがありますが、AppFuseを使用して非常に優れているため、自分で使用しました。
これらのCSSフレームワークはテーマアプリケーションで使用されるため、うまく機能することを付け加えます。つまり、ルールに固執する場合、プロパティファイルの1つの値を変更するだけで、あるルールから次のルールに切り替えることができます。
サイトでBluePrintを使用して大成功を収めました（このサイトについてはここで言及できますが、投稿がスパムとしてマークされることは間違いありません！）。 CSSのアイデアの1つは、レイアウトロジックをハードコーディングしないことだと考えていたため、将来使用するかどうかはわかりません。レイアウトを定義するためのspan-24やspan-12というCSS要素はなく、searchBoxやmainContentのようなものが必要です。少なくともそれは私がそれを見る方法です。
CSSフレームワークに関する私のブログ投稿はこちらです CSSフレームワークを使用するタイミング？
クレイグ、
Compassはあなたが探しているものです。「span-24」のようなBlueprint CSSクラスの名前を自分の名前に変更できます。また、変数とミックスインを使用してCSS機能を拡張します。本当に、Compassをチェックアウトせずにフレームワークを時期尚早に判断する人は、「ポイントを逃しています」。これは、レイアウトにHTMLテーブルの代わりにCSSを使用することでポイントを逃していると数年前に言った人々のようなものです。
-マット
CSSはシンプルさに関するものだと思います。目標は、HTMLとスタイルシートを参照するときに確認する場所を1つまたは2つ持つことです。より多くの行、特に記述しておらず、おそらくあまり馴染みのない行を追加すると、指数関数的に複雑さが増し、CSSコードのボラティリティが高まります。
レイアウトを作成し、そこから汎用テンプレートシステムを開発するときに、レイアウトを提案します。私はCSSをよりモジュール化するのが大好きですが、多くの場合、設計によっては、CSSは非常にケース固有であり、モジュール化されていない場合があります。
私はいくつかの一時的なサイトでブループリントを使用しましたが、主にクロスブラウザーテストで間違いなく時間を節約しました。
マークアップにプレゼンテーションコードを追加するのは間違いなく面倒ですが、明るい面では読みやすくなっています。 「マークアップに触れることなく再設計できる」というコンセプトが大好きですが、どうしてもそれが実際には起こらないサイトを作成していて、昨日それを行う必要がある場合、ブループリントは注目すべきものです。
ただし、実行可能なレイアウトのタイプにはトレードオフがあります。厳密なグリッドで最初からサイトをワイヤフレーム化すると、最小限の手間でフレームワークにトランスポーズすることがはるかに簡単になります。
BluePrintとYUIを使用しましたが、IDとクラスに付けられた名前のいくつかにいつもイライラしています。
それぞれ独自に、しかし私はゼロから物事を行うことを好むが、しばらくすると、以前の仕事を使用して新しいプロジェクトに適用するプロセスを開発し、ウェブサイトをあなたが望むように見えるように微調整するだけですそれが好きです。
他の誰かがCSSを編集するために来た場合に備えて、適切な命名規則を必ず使用してください。そうすれば、各スタイルの名前が何を指しているのかがわかります。
このデモをご覧ください。 http://www.richstyle.org/demo-web.php このフレームワークは、「HTMLタグで十分だ」という考えに基づいています。再利用可能性は、Webフレームワークを含むソフトウェアコンポーネントを選択するための最も重要な要素だと思います。 Webフレームワーク開発者の場合、標準にコミットするほど、再利用性が保証されます。
http://www.ez-css.org/ をご覧ください。最も簡単で軽量なCSSフレームワークの1つです。 :)