css - 最高の CSS フレームワークとは何ですか? また、努力する価値はありますか?

Question

CSS フレームワークの世界に出くわした別のフォーラムを読んでいます。私が特に注目しているのはBluePrintです。他の誰かが CSS フレームワークに出くわしたことがあるかどうか、どれが最適か、努力する価値があるかどうかを考えていましたか?

score 140 · Accepted Answer

CSSの「フレームワーク」は完全に要点を失っています。

CSSはJavaScriptとは異なり、ベースライブラリ/フレームワークを含めて、そこから関数やオブジェクトを呼び出して、より高いレベルの作業を行うことができます。CSSフレームワークが提供できるのは、宣言型のルールだけです。デフォルトのブラウザルールリセットのもの、ページの作成を強制されるクラススタイル、および「float」と「clear」を使用したレイアウトルールです。100のフレームワークルールの肥大化を引き起こすのではなく、CSSの数行で自分でそれを書くことができます。

特に「グリッドレイアウト」は、プレゼンテーションをマークアップにミックスするという古き良き時代にまでさかのぼります。'div class = "span-24"'はテーブルに勝るものはありません。そこに戻って、レイアウトに影響を与えるようにマークアップを変更する必要があります。そして、私が見たすべてのフレームワークは、固定ピクセルのフロートボックスに基づいているため、さまざまなウィンドウサイズでアクセス可能な液体レイアウトを作成することは不可能です。

これは逆方向のオーサリングであり、CSSルールを作成するのが怖すぎる人にのみ使用されます。

score 27 · Accepted Answer

~~したがって、この質問にはまだ誰も回答していません（ただし、いくつかの賛成票を見たことがあります）。~~少なくとも、このプロンプトの2番目の質問に取り組むつもりです。

CSSフレームワークは素晴らしいです。他のフレームワークと同様に、開発時間を短縮し、サイト固有の設計とCSSにすぐに取り組むことができます。彼らは難しい決断について考えるので、あなたはそうする必要はありません。

残念ながら、フレームワークを使用することには2つの欠点があります（一般的に）。

フレームワークは、CSSコードの全体的な構造と仕組みを決定します。今、私はCSSリセットについて話していません（これらはそれ自体で便利ですが、真のフレームワークではありません）。正直で良いフレームワークについて話しているのですが、ドキュメントで使用するセマンティックタグなどについては、すでに決定されています。そのため、フレームワークに依存するようになり、バグが発生した場合フレームワークでは、通常、自分で修正する必要があります。
フレームワークは、クロスブラウザー/高度なCSSの問題を忘れる言い訳にはなりません。PHPまたはJavaScriptフレームワークで作業する場合と同じように、常にそれらに遭遇します。そして、あなたはそれらに対処する方法を知る必要があります。他の人のフレームワークを使用する前に、まず独自のフレームワークを作成する必要があるという一般的な言い方があります。

ブループリントをざっと見てみると、私はそれをフレームワークとは呼びません。たぶん、いくつかの追加のグッズを上に置いてリセットします。

score 18 · Accepted Answer

私はBluePrintと他のいくつかを見てきましたが、私がお勧めする唯一のCSS「フレームワーク」はYUIグリッドです。

長所：

そこにある最高のフロントエンドエンジニアの1人によって書かれた（IMO）（Nate Koechley）
非常に少ない。4KB
非常に柔軟（1000の異なるレイアウト）
流体幅（100％）レイアウト、および750px、950px、974pxのプリセット固定幅レイアウトをサポートし、任意の数に簡単にカスタマイズする機能。
固定幅レイアウトの幅の簡単なカスタマイズをサポートします。
テンプレート列はソースの順序に依存しないため、最も重要なコンテンツを最初にマークアップレイヤーに配置して、アクセシビリティと検索エンジン最適化（SEO）を向上させることができます。
セルフクリアフッター。どの列が長くても、フッターは下部に留まります。
100％未満のレイアウトは自動的に中央に配置されます。
ややセマンティックなクラス名（上、左、右などよりも優れている）

短所：

手書きのHTMLやCSSと比較して多くの余分なマークアップ
複雑なレイアウトを行う方法を理解するためにいくつかの学習が必要です

他の人が投稿したように、CSSの実際の「フレームワーク」はありません。スタイルシートのリセットは、レイアウトにも大いに役立ちます。私は通常、リセットされたスタイルシートに固執し、そこから行きます。ただし、CSSの経験があまりない場合は、YUIグリッドを使用すると時間を節約できます。

score 16 · Accepted Answer

Compassは、テンプレート（YUIとブループリントの両方）だけでなく、使い慣れたCSS構文を提供しながら、再利用可能な構造と高レベルの宣言を提供するという意味で、実際のCSSフレームワークです。

score 12 · Accepted Answer

時間をかけて、BluePrint や YUI などのいくつかの css フレームワークと、Eric Meyer のような css リセットを学習して理解してください (本当に理解しています!)。次に、自分の作業方法や構築するサイトの種類に基づいて、独自のリセットやフレームワークをまとめてください。

個人的には、Eric Meyer のリセットのほとんどを、いくつかのクラスと独自のリセットに加えて、BluePrint と YUI からのアイデアをいくつか使用しています。

私は最近、Eric Meyer が CSS フレームワークに関するプレゼンテーションを行うのを見ました。その中で、彼は次のような質問をしました。その後、彼は空白のスライドを見せて質問に答えました。彼の要点は、ほとんどのリセットとフレームワークには確かにいくつかの有用な概念が組み込まれているが、自分に最も適したものは自分で作成したものであるということでした (努力する価値があります)。

score 9 · Accepted Answer

利用可能なフレームワークが問題の解決にどれほど効果的かを自問する必要があります。それらはあなたの要件を満たしていますか？

フレームワークを使用することで、いくつかのルールや詳細をピクセルレベルで設定し、残りの時間を実装と作成に費やすことができます。これは生産性の大幅な向上です。プロジェクトの後半で数ピクセルの調整に時間を費やしていることに気付いた場合 (設計のマイクロ管理)、それはフレームワークが役立つ可能性があることを示しています。

The Pragmatic Programmer のヒント #17 は次のように述べています。「問題領域に近いプログラムを作成する」。抽象化のレイヤーを使用すると、レイアウトの実際の問題の解決に近づくことができます。たとえば、ピクセルの微調整ではなく、余った時間でユーザーエクスペリエンスの向上に集中できる場合があります。

これは、量のために質を犠牲にしなければならないということではありません。それは効率についてです。

最近のプロジェクトで、私は独自のフレームワークを作成しました。リソースが非常に限られており、一般的なフレームワークでは私の望みどおりの結果が得られなかったからです。次に、デザインチームの PSD をセットアップして、展開した同じグリッドにスナップします。

フレームワークは、CSS の特定の実装である必要はありません。インターネットからダウンロードした肥大化したものや、時代遅れのアイデアを実装したものである必要はありません。あくまでも仕事をこなすためのテクニックです。一部のコーダーがすでに独自のフレームワークを持っていて、それを知らないとしても驚かないでしょう。実際、DOM を CSS で拡張するデフォルト要素のセットと考えると、それは定義上フレームワークです。

score 6 · Accepted Answer

私は実際に過去24時間のかなりの部分を自分で調査することに費やしました。私の結論は、素晴らしいリセット（私はYUIリセットを使用しました）、そしておそらくベースラインのものを設定するための何か他のもの（私の場合はYUIフォントは価値がありました;おそらくBluePrintの「余分なもの」はあなたのものになります）は良い考えです。ただし、「フレームワーク」（通常はYUIグリッドのようなもの）は制限が厳しすぎるため、クラス名やIDなどを使用する必要があり、手作りのCSSのようにサイトに適合することはめったにありません。

つまり、リセットはかなりいいようです。たとえば、リストのマージンとパディング、段落の間隔などのすべてのバリエーションを排除することをお勧めします。しかし、それは私がそれを取る限りです。

score 6 · Accepted Answer

はい、使用していませんが、 emasticはチェックする価値のある良い代替手段であると思います. 範囲はブループリントに似ていますが、エラスティックレイアウト (名前の由来) もサポートしており、値を px、em、または % で指定したり、それらを混在させたりすることもできます。

score 5 · Accepted Answer

コンパスはすごいと思います。スクリーンキャストが表示されていることを確認してください。

私はいくつかの Web サイトで960.gsを使用していますが、非常にシンプルで簡単で、努力する価値があると思います。レイアウトに関する多くの作業を節約できます。960 ピクセルの固定幅でなくなるカスタム CSS ジェネレーターを確認してください。

score 4 · Accepted Answer

Site Point の CEO である Kevin Yank によるこのビデオプレゼンテーションがあなたの質問に答えてくれると思います。見ることを本当にお勧めします。

score 4 · Accepted Answer

Compass を使用すると、フレームワークのクラスと ID の名前を独自のセマンティック名に変更できるので、ぜひチェックしてみてください。また、ミックスインなどの普通の CSS では得られないものへのアクセスも提供します。

私は、これらのツールを実際に掘り下げて使用することなく批判する、いわゆる「CSS の専門家」に驚いています。それらは不可欠ですか？いいえ。独自のフレームワークが好きな場合 (独自のフレームワークをお持ちですよね? CSS フレームワークは慎重に定義されたライブラリにすぎません。誰もが使用する必要があります)、ぜひともそれを使い続けてください。他のフレームワークの使用を強制する人は誰もいませんし、フレームワークを使用している人が CSS 純粋主義者に「やり方が間違っている」と言っているのを見たこともありません。

このような観点からフレームワークを批判することは、不安と無知を明らかにするだけです。たとえば、CSS を知らずに Compass のようなツールを使用するという考えはばかげています。通常、フレームワークがすべての CSS を作成するわけではないことをご存知ですか? ほとんどのフレームワークのコンテキスト内で、独自の CSS を作成して記述することができます。実際、CSS を知らないとすぐにイライラしてしまうかもしれません。

私自身、フレームワークがあることを高く評価しています。フレームワークはすでに文書化されており、他の何百人ものユーザーによってテストされており、Compass を介して独自のクラスと ID を適用できるからです。フレームワークが適していないものが必要な場合は、自分でコーディングします。

score 3 · Accepted Answer

AppFuseで有名なMattRaibleは、AppFuse用のCSSフレームワークを開発するために、しばらく前にCSSフレームワークコンテストを開催しました。結果はここに公開されます。いくつかのバリエーションがありますが、AppFuseを使用していて非常に優れているため、自分でいくつか使用しました。

これらのCSSフレームワークは、テーマのあるアプリケーションで使用されるため、うまく機能することを付け加えておきます。つまり、ルールに固執する場合、ある値から次のルールに切り替えるのは、プロパティファイルの1つの値を変更するのと同じくらい簡単です。

score 3 · Accepted Answer

私はサイトでBluePrintを使用して多くの成功を収めました（ここでサイトについて言及することはできますが、投稿はスパムとしてマークされると確信しています！）。CSSのアイデアの1つは、レイアウトロジックをハードコーディングしないことだったので、将来使用するかどうかはわかりません。レイアウトを定義するためにspan-24およびspan-12と呼ばれるcss要素を使用するのではなく、searchBoxやmainContentのようなものを使用する必要があります。少なくともそれは私がそれを見る方法です。

score 3 · Accepted Answer

私が知っている CSS フレームワークを使用してセマンティックマークアップを保持する唯一の方法は、より高いレベルの抽象化を使用することです。現時点では、Compass だけが使用できるほど成熟していると認識していますが、Nicole Sullivan は彼女の「オブジェクト指向 CSS」プロジェクトで興味深いことを行っているようです。

Compass の Sass ミックスインの巧妙な使用は素晴らしく、保守可能なセマンティックマークアップという聖杯に向けた大きな一歩だと思います。プレゼンテーションクラスをマークアップから除外するために、コンパスなどの抽象化なしでブループリントや YUI などのフレームワークを使用したいとは思いません。

ところで、Elastic と呼ばれる見栄えの良い CSS フレームワークがあり、これを Compass に追加することを検討しています。

score 3 · Accepted Answer

私が見つけた良いリンク：トップ12のCSSフレームワークとそれらを理解する方法

score 2 · Accepted Answer

私はいくつかの1回限りのサイトでブループリントを使用しましたが、主にブラウザー間のテストで時間を確実に節約できました。

明るい面では読みやすいですが、マークアップにプレゼンテーションコードを追加するのは間違いなく面倒です。「マークアップに触れることなく再設計できる」というコンセプトは気に入っていますが、それが実際には起こらないサイトを作成していて、昨日それを実行する必要がある場合は、ブループリントを検討する必要があります。

ただし、どのタイプのレイアウトを実行可能に作成できるかについてもトレードオフがあります。厳密なグリッド上で最初からサイトをワイヤーフレーム化すると、最小限の手間でフレームワークに転置するのがはるかに簡単になります。

score 2 · Accepted Answer

私は、CSS はシンプルさが重要だと考えています。目標は、HTML とスタイルシートの間を参照するときに、チェックする場所を 1 つか 2 つ持つことです。さらに行を追加すると、特に自分が書いたことがなく、おそらくあまりなじみのない行を追加すると、指数関数的に複雑さが増し、CSS コードの揮発性が高くなります。

レイアウトを作成し、そこから一般的なテンプレートシステムを開発する際に、レイアウトを提案します。私は CSS をよりモジュール化するのが好きですが、多くの場合、デザインによっては、CSS は非常にケース固有であり、まったくモジュール化されていない場合があります。

score 2 · Accepted Answer

クレイグ

Compass はあなたが探しているものです。これを使用すると、Blueprint CSS クラスの名前を「span-24」のように独自の名前に変更できます。また、変数と mixin を使用して CSS 機能を拡張します。本当に、Compass をチェックアウトせずにフレームワークを時期尚早に判断する人は、「要点を見失っています」。レイアウトに HTML テーブルの代わりに CSS を使用することは、要点を見落としていると何年も前に私たちに言った人々のようなものです。

-マット

score 2 · Accepted Answer

I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.

To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.

Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.

score 1 · Accepted Answer

http://www.ez-css.org/をチェックしてください。最も簡単で軽量な CSS フレームワークの 1 つです。:)

score 1 · Accepted Answer

次のデモをご覧ください: http://www.richstyle.org/demo-web.php このフレームワークは、「HTML タグで十分」という考えに基づいています。Web フレームワークを含め、ソフトウェアコンポーネントを選択する上で最も重要な要素は再利用性だと思います。Web フレームワークの開発者にとって、標準にコミットすればするほど、再利用性が保証されます。

css - 最高の CSS フレームワークとは何ですか? また、努力する価値はありますか?

23 に答える 23

Related

Reference