多くのフレームワークは、HTML (カスタム タグ、JSF コンポーネント システム) を抽象化して、その特定のやかんを簡単に処理できるようにしようとしています。
CSS に同様の概念が適用されているものはありますか? クロスブラウザの魔法の束を実行し、変数のようなものをサポートし (なぜその色が欲しいたびに #3c5c8d を入力しなければならないのですか)、計算フィールドをサポートします (CSS と JS に「コンパイル」されます) など。
あるいは、私はこれについて正しく考えていますか? 非常に丸い穴に非常に正方形のブロックを押し込もうとしていますか?
私が最もうまくいくとわかったのは、実際に CSS を学ぶことです。つまり、CSSを本当に学びます。
学ぶのは難しい言語かもしれませんが、十分に読んで練習すれば、最終的には物事を行うための最良の方法を学ぶことができます.
重要なのは、それが自然になるように十分に行うことです。始める前に何をしたいのかが分かっていて、十分な経験を積んでいる場合、CSS は非常に洗練されたものになります。
確かに、それは時々行うべき重要な PITA でもありますが、実際にそれを練習し、何が機能し、何が機能しないか、および問題を回避する方法を学べば、クロスブラウザーの問題でさえそれほど悪くはありません。
必要なのは練習だけで、やがて上手になることができます。
万が一Rubyを使用している場合は、Sassがあります。とりわけ、階層セレクター（インデントを使用して階層を確立する）をサポートします。これにより、構文の観点から寿命を延ばすことが容易になります（繰り返し回数が大幅に減ります）。
しかし、私は確かにあなたと一緒です。私は自分自身をCSSの専門家だと思っていますが、JavascriptのようなCSS用のツール（プロトタイプ、JQueryなど）があればいいと思います。あなたはあなたが望むものをツールに伝え、それは舞台裏でブラウザの不整合を処理します。それは理想的だろう、メチンク。
いつでも を使用して、CSS ファイル
template engineに追加variablesしcalculated fieldsたり、CSS ファイルに追加したりできます。
これは私の以前の答えを詳しく説明しています。
CSSを使い始めたときは、変数や式などがサポートされていないのも苦痛だと思いました。しかし、CSSを使い始めるにつれて、これらの問題を克服するために別のスタイルを開発しました。
たとえば、これの代わりに：
a { color: red }
.entry { color: red }
h1 { color: red }
できるよ：
a, .entry, h1 { color: red }
これにより、宣言された色を1か所にまとめることができます。
CSSを十分に使用すると、ほとんどのブラウザーの不整合を簡単に克服できるはずです。CSSハックを使用する必要があることがわかった場合は、おそらくそれを行うためのより良い方法があります。
申し訳ありませんが、皆さんは要点を逃しました。
抽象化という言葉が鍵となります。あなたとサリーがウェブサイトを作っているとしましょう。彼女が角を丸くしている間、あなたはフォームをスタイリングしています。あなたと彼女の両方が少数のセレクターを定義しました。
知らないうちに、サリーのクラス名と衝突するクラス名を選んだ場合はどうなりますか？ご覧のとおり、CSSで作業する場合、詳細を「非表示」（抽象化）することはできません。そのため、IEのバグを修正してから、他の人がそのまま使用できる自己完結型のソリューションを作成することはできません。プログラミング言語でプロシージャを呼び出すのと同じように、事前条件と事後条件のみを考慮し、それがどのように機能するかを考えません。内側。達成したいことを考えるだけです。
これはWebの最大の問題です。抽象化メカニズムが完全に欠けています。あなたのほとんどは「それは不必要です;あなたはクラックを吸うのをやめます！」と叫ぶでしょう。
代わりに、レイアウトのバグを修正したり、角を丸くしたり、このケースまたはその場合の「最良の」マークアップについて何度も何度も議論したりするという仕事をします。あなたは解決策を説明するサイトを見つけ、そして答えをコピーして貼り付け、そしてあなたが何をしているのかさえ考えずにそれをあなたの特定のケースに適応させます！はい、それはあなたがすることです。
暴言の終わり。
ほら、これはSOの問題です。これまでのすべての回答は有効なポイントであり、最終的な回答と見なす必要があります。要約してみましょう：
これらすべての組み合わせは確かに多くの問題を解決すると思います（CSSを公平に深く学ぶことはすべての人にとって選択肢ではありませんが、時間を正当化するのに十分に使用しない人もいます）。
上記のポイントのいずれもカバーしていないいくつかの問題があります（特定のタイプの計算フィールドでは、JSライブラリを作成する必要があると思います）が、それは確かに良いスタートです。
変数のサポートについては、CSSヘッダーでPHPを使用して、その効果を高めています。どんな言語でもできると思います。これがphpサンプルです：
<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT");
$someColorVar = "#cc0000";
?>
BODY {
background-color: <?= someColorVar ?>;
}
問題の解決策は、シェフがすぐに有名になるライスプディングに入れるナツメグの量を正確に計算しようとしているように、数字を揺さぶることがよくあるようです。
これは、IE で機能させようとしたときにのみ発生します。
リファレンスを調べなくてもほとんどのことをコーディングできるところまで CSS を学習した場合 (まだ定期的にリファレンスを調べている場合は、よくわからないので文句を言うことはできないと思います)。 firefox/safari 用に開発しています。とてもいい場所です。
FF / Safariで動作した後、IE互換性の痛みと苦しみを最後まで残してください。そうすれば、一般的なCSSではなく、IEに責任があると思います。
For CSS frameworks, you could consider YUI Grids. It makes basic layout a lot quicker and simpler, although used in its raw form it does compromise on semantics.
CSS 変数は(比較的) 間もなく登場しますが、かなり遅れていることに同意します。当面は、Sass などの CSS テンプレート エンジン、または選択した動的 Web 言語を使用して、スタイルシートをプログラムで生成することができます。
CSSのレイアウトフレームワークであるBlueprintCSSもチェックしてください。すべての問題を解決できるわけではありませんが、多くの問題を解決できます。CSSを自分で作成する必要はありません。
CSS（およびブラウザーの問題）を実際に理解するための鍵は、CSS標準で使用されているボックスモデルと、一部のブラウザーで使用されている誤ったモデルをしっかりと理解することです。それを理解してセレクターの学習を開始すると、ブラウザー固有のプロパティから離れ、CSSが楽しみになります。
初心者が CSS でよく犯す間違いは、具体性に関するものだと思います。タグをスタイリングしている場合、ドキュメント内のすべてのタグまたはタグの特定の「クラス」を本当にスタイリングしたいですか?
私は通常、CSS セレクターを非常に具体的にすることから始めて、必要に応じて一般化します。
これは、主題に関するユーモアの記事ですが、情報も提供しています: 特異性戦争
CSSの学習には少し時間がかかりますが、私が最初に最も落胆したのは、すべてのブラウザーを同じように動作させるために非常に多くのハックが必要だったという事実でした。ロジックに従わないシステムを学ぶのは馬鹿げているようです...しかし、私は、W3仕様の形で、各ブラウザーの特異性の背後にロジックがあるという漠然とした信念に固執しました。新世代のブラウザが徐々に登場しているようですが、IE6はそれでも日常的に私の人生を地獄にしています。
たぶん、準拠/有効なCSSコードとブラウザーの見苦しい実装の間に抽象化レイヤーを作成することは悪いことではないでしょう。しかし、そのようなものが作成された場合、JS（またはjQuery）を利用する必要がありますか？（そして、それは処理コストの観点から、不当な負担を生み出すでしょうか？）
CSSを使用してスクリプトを作成する場合は、「地面を平らにする」と便利であることがわかりました。おそらく、さまざまな種類のリセットスクリプトがたくさんありますが、YUIリセットを使用することで、他の方法で遭遇する癖の数を減らすことができました。YUIグリッドを使用すると、作業が少し楽になることがあります。
あなたはこれについて正しく考えていますが、CSS のさまざまなブラウザー実装を理解する必要があるでしょう。これは、アプリケーションが存在する環境を理解するだけです。
明確にするために: これは CSS を理解することではありません。言語をよく知っている場合でも、言語の冗長性、重複、および制御構造の欠如に対処する必要があります。
私は 10 年以上にわたってしっかりと CSS を書いてきましたが、この言語は強力で効果的ですが、CSS の実装はうまくいかないという結論に達しました。そのため、 SassやLess、xCSSなどの抽象化レイヤーを使用して、言語とのインターフェイスをとっています。これらのツールは CSS に似た構文を使用するため、問題のドメインで問題を解決しています。PHP のようなものを使用して CSS を作成することは機能しますが、最善の方法ではありません。
抽象化レイヤーを介して言語の問題を隠すことで、プロジェクトのライフ サイクル全体を通じて整合性を維持する、より優れた製品を提供できます。手で CSS を書くと、ほとんどの CSS コーダーが提供していない確かなドキュメントを提供しない限り、ソフトウェアの腐敗が加速します。十分に文書化された CSS フレームワークを作成している場合でも、いずれにせよ、それを手動で作成することはないでしょう。それは効率的ではありません。
CSS のもう 1 つの問題は、入れ子のブロック宣言がサポートされていないことです。これにより、コーダーはクラスのフラットでグローバルなセットを構築し、命名規則との名前の衝突を処理するようになります。グローバルが悪いことは誰もが知っていますが、なぜそのような方法で CSS を記述するのでしょうか? クラスをドキュメント モデル全体に公開するのではなく、クラスにコンテキストを与える方がよいのではないでしょうか? 命名規則は機能するかもしれませんが、それは、言語を作成するためにマスターしなければならないもう 1 つの作業です。
優れた CSS を書くことに誇りを持っている人は、プログラミングのベスト プラクティスをマークアップに適用することをお勧めします。抽象レイヤーを使用しても、優れた CSS を作成するスキルが不足しているわけではありません。言語の弱点にさらされる機会が限られていることを意味します。
@SCdF: ここでのあなたの要約は公平だと思います。しかし、CSS を学ぶ時間がない人がいるという議論は、でたらめです。ちょっと考えてみてください。自分が習得したテクノロジーを代用すると、その理由がわかります。
私は嫌いです。ジャバ。私のためにそれを書いてくれるものはありますか？誰もが Java をマスターする時間があるわけではありません。
CSS は確かに不完全な技術です。私は、5 年後にはブラウザーの非互換性の問題に対処しなくなり (ほぼ達成されています)、より優れた作成者側のツールが提供されることを強く望んでいます (私はあなたが説明した変数と計算の種類を提供する私自身の使用のために Visual Studio マクロを作成したので、不可能ではありません) - しかし、本当に理解せずにこのテクノロジを効果的に使用できるはずだと主張するのは合理的ではありません.