最良の CSS フレームワークは何ですか? それは努力する価値がありますか?

https://stackoverflow.com/questions/203069

03-07-2019
|

質問

別のフォーラムを読んでいると、CSS フレームワークの世界に出会いました。私が特に注目しているのは、ブループリント. 。他に CSS フレームワークに出会った人がいるかどうか、どれが最適で、努力する価値があるかどうかを教えてほしいと思っていました。

解決

CSS の「フレームワーク」は完全に的を外しています。

CSS は、基本ライブラリ/フレームワークを組み込んで、そこから関数やオブジェクトを呼び出してより高いレベルの作業を実行できる JavaScript とは異なります。CSS フレームワークが提供できるのは宣言的なルールだけです。いくつかのデフォルトのブラウザルールリセット機能、ページの作成を強制されるいくつかのクラススタイル、および「float」と「clear」を使用するレイアウトルールです。膨大な数百ものフレームワークルールを組み込むのではなく、数行の CSS で自分でそれを記述することができます。

特に「グリッドレイアウト」については、プレゼンテーションをマークアップに混ぜ合わせていた古き良き時代に遡ります。「div class="span-24"」はテーブルと何ら変わりません。レイアウトに影響を与えるには、そこに戻ってマークアップを変更する必要があります。そして、私がこれまで見てきたフレームワークはすべて、固定ピクセルのフローティングボックスをベースにしており、幅広いウィンドウサイズでアクセスできるリキッドレイアウトを作成することは不可能でした。

これは逆向きのオーサリングであり、CSS ルールを書くのが怖すぎる人にしか役に立ちません。

他のヒント

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

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

残念ながら、フレームワークの使用には (一般的に) 2 つの欠点があります。

フレームワークは、CSS コードの全体的な構造と仕組みを決定します。ここで、私は CSS リセットについて話しているのではありません (CSS リセットはそれ自体は便利ですが、真のフレームワークではありません)。私が話しているのは、文書内でどのようなセマンティックタグを使用するかなどをすでに決定している、誠実から優れたフレームワークについてです。そのため、フレームワークに依存することになり、フレームワークにバグがある場合は、ほとんどの場合、自分で修正する必要があります。
フレームワークは、クロスブラウザーや高度な CSS の問題に気づかないことの言い訳にはなりません。PHP や JavaScript フレームワークを使用する場合と同じように、必ずこれらに遭遇します。そして、それらに対処する方法を知る必要があります。他人のフレームワークを使用する前に、まず独自のフレームワークを作成するべきだというよく言われることがあります。

ブループリントをざっと覗いてみると、これはフレームワークとは言えません。おそらく、いくつかの追加の特典を加えたリセットです。

BluePrint やその他のいくつかを検討しましたが、私が推奨する唯一の CSS 'フレームワーク' は次のとおりです。 YUI グリッド

長所:

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

短所:

手書きの HTML や CSS と比較して余分なマークアップが大量にあります
複雑なレイアウトを行う方法を理解するには、ある程度の学習が必要です

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

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

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

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

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

CSS の「フレームワーク」を使用する理由

時間に追われている場合。
あなたがCSSを知らず、あなたのためにそれを書くことができる人を知らない場合。
基準などについてあまり貴重でない場合。

ブループリントや 960 を使用すると、フロントエンド開発者に頼らずに自分でレイアウトを組み立てることができるので、喜んで使用しているプログラマーを私は知っています。これは、個人プロジェクトやリソースが限られているスタートアップ企業に最適です。

CSS についてすでに十分な知識がある場合は、おそらくストックレイアウトの適切なライブラリをすでに持っているので、明らかにフレームワークは必要ありません。

ただし、初心者で、何かを立ち上げて実行する必要があるだけの場合は、フレームワークを使用すると、基本的なレイアウトがはるかにシンプルになり、ブラウザーの互換性にも取り組むことができます。

そうは言っても、多くのフレームワークはそのままではひどいクラス名などを使用しています。フレームワークを出発点として使用し、それを独自のクラスと ID タグでカスタマイズしている Web サイトをいくつか知っています。しかし、その書き換えには多少の作業が必要であることは明らかです。上で述べたように、Compass のようなものを使用すると、それを回避するのに役立ちます。

つまり、CSS フレームワークは、セマンティクスを犠牲にして時間を節約できます。また、CSS の知識が損なわれる可能性もありますが、それは、CSS 全般の学習にどれだけ投資するかによって決まります。それらを活用するかどうかはあなた次第です。

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

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

チップ #17 インチ実用的なプログラマー言います：「問題領域に近いプログラム」。抽象化レイヤーを使用すると、レイアウトの実際の問題の解決に近づくことができます。例えば：ピクセルを微調整するよりも、余った時間を使ってユーザーエクスペリエンスを向上させることに集中できるかもしれません。

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

最近のプロジェクトでは、リソースが非常に限られており、一般的なフレームワークでは私の希望どおりに動作しなかったため、独自のフレームワークを作成しました。次に、私が展開したのと同じグリッドにスナップするように設計チームの PSD を設定しました。

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

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

つまり、要するに：リセットはかなり良さそうです。たとえば、次のようなバリエーションをすべて排除するのが良いでしょう。リストのマージンとパディング、段落の間隔など。しかし、それは私が受け入れる限りです。

はい、使ったことはありませんが、そう思いますマスチックチェックしてみる価値のある良い代替手段かもしれません。スコープとしてはブループリントに似ていますが、エラスティックレイアウト (そのため名前が付けられています) もサポートしており、値を px、em、または % で指定したり、それらを混合したりすることもできます。

コンパスはすごいと思います。必ずご覧ください。スクリーンキャスト.

使っています 960.gs いくつかの Web サイトを試してみましたが、非常にシンプルで簡単で、努力する価値があることがわかりました。レイアウトに関する作業を大幅に節約できます。960 ピクセルの固定幅では消えるカスタム CSS ジェネレーターを必ず確認してください。

私はそう思いますこのビデオプレゼンテーション by Site Point CEO の Kevin Yank があなたの質問に答えます。ぜひ視聴することをお勧めします。

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

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

このような観点からフレームワークを批判することは、無知であると同時に不安を露呈するだけです。たとえば、CSS を知らずに Compass のようなツールを使用するという考えは滑稽です。一般に、フレームワークがすべての CSS を自動的に作成するわけではないことはご存知ですか?ほとんどのフレームワークのコンテキスト内で独自の CSS を分割して作成することもできます。実際、CSS を知らないとすぐに挫折してしまうかもしれません。

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

AppFuse で有名な Matt Raible は、AppFuse 用の CSS フレームワークを開発するために、少し前に CSS フレームワークコンテストを開催しました。結果は公表されていますここ. 。いくつかのバリエーションがあり、AppFuse を使用していて非常に優れていると感じたので、私自身もいくつか使用しています。

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

私はあるサイトで BluePrint を使用して大きな成功を収めました (ここでそのサイトについて言及することもできますが、その投稿はスパムとしてマークされると確信しています!)。ただし、CSS のアイデアの 1 つは、レイアウトロジックをハードコードしないことだと考えていたため、将来これを使用するかどうかはわかりません。レイアウトを定義するには、span-24 や span-12 という CSS 要素ではなく、searchBox や mainContent などの要素を使用する必要があります。少なくとも私はそう見ています。

良いリンクを見つけました: 上位 12 の CSS フレームワークとその理解方法

CSS フレームワークに関する私のブログ投稿はこちらです CSS フレームワークをいつ使用するか?

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

Compass による Sass mixin の巧みな使い方は素晴らしく、保守可能なセマンティックマークアップという聖杯への大きな一歩であると思います。プレゼンテーションクラスをマークアップから除外するための Compass などの抽象化なしで、Blueprint や YUI などのフレームワークを使用したいとは思いません。

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

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

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

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

マークアップにプレゼンテーションコードを追加するのは確かに面倒ですが、良い面としては読みやすいです。私は「マークアップに手を加えずに再デザインできる」というコンセプトが大好きですが、実際にはそれが実際には起こらず、昨日のうちに完了するだけで済むサイトを制作している場合、ブループリントは注目すべきものです。

ただし、どのような種類のレイアウトを作成できるかについてはトレードオフもあります。最初から厳密なグリッドに基づいてサイトをワイヤーフレーム化すると、最小限の手間でフレームワークに置き換えるのがはるかに簡単になります。

私は BluePrint と YUI を使用したことがありますが、ID とクラスに付けられる名前の一部にいつもイライラします。

人それぞれですが、私は最初から物事を行うことを好みますが、しばらくすると、以前の作業を使用して新しいプロジェクトに適用し、Web サイトを希望どおりに見せるためにいくつかの調整を加えるプロセスを開発します。好きです。

将来、他の誰かが CSS を編集するために来た場合に備えて、適切な命名規則を使用してください。そうすれば、各スタイル名が何を指しているのかがよくわかります。

クレイグ

コンパスはあなたが探しているものです:これにより、「span-24」などのブループリント CSS クラスの名前を独自の名前に変更できます。また、変数やミックスインを使用して CSS 機能を拡張します。確かに、Compassをチェックせずにフレームワークを時期尚早に判断する人は「的外れ」です。これは、何年も前に、レイアウトにHTMLテーブルの代わりにCSSを使用することでポイントを逃していると言った人たちのようなものです。

-マット

チェックアウト http://www.ez-css.org/. 。最も簡単で軽量な CSS フレームワークの 1 つです。:)

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow