•  09-06-2019
  •  | 
  •  

質問

はっきり言っておきます。

私。 嫌い. 。CSS。

それは終わりのない悪夢です。レイアウトの小さな変更はすべてハックのように感じられます。問題の解決策には、まもなく有名になるライス プディングにナツメグの量を正確に計算しようとするシェフのように、数字を揺さぶることが含まれることが多いようです。次に、複数のブラウザの問題と複数の解像度の問題が発生します。

..長い話を短く言うと、それは苦痛です。できればPITA。

多くのフレームワークは、特定のやかんの処理を容易にするために、HTML (カスタム タグ、JSF コンポーネント システム) から抽象化しようとしています。

皆さんが使用したことのある、同様の概念を CSS に適用したものはありますか?さまざまなクロスブラウザーの魔法を実行し、変数のようなものをサポートし (その色が必要なときに毎回 #3c5c8d と入力しなければならないのはなぜですか)、計算フィールド (CSS と JS に「コンパイル」される) をサポートします。

あるいは、私はこれについて正しく考えていますか？非常に丸い穴に非常に四角いブロックを押し通そうとしているのでしょうか?

役に立ちましたか？

解決

テンプレートエンジンを使用すると、CSSファイルに変数と計算フィールドをいつでも追加できます。

他のヒント

CSSを実際に学習することは、私が最もうまくいくとわかったものです。つまり、本当に CSSを学ぶということです。

学習するのはわかりにくい言語かもしれませんが、それについて十分に読んで練習すれば、最終的には物事を行うための最良の方法を学習できます。

重要なのは、それが自然になるようにすることです。 CSSは、始める前にやりたいことを知っていて、それを行うのに十分な経験がある場合、非常にエレガントになります。

確かに、ときどき行うのは主要なPITAですが、クロスブラウザの問題であっても、それで本当に練習し、何が機能し、何が機能しないのかを学習すれば、それほど悪くはありません。問題を回避する方法。

必要なのは練習だけで、やがて上手になります。

Rubyを使用している場合、 Sass 。特に、階層セレクター（インデントを使用して階層を確立する）をサポートします。これにより、構文の観点から人生を簡単に延長できます（繰り返し回数を減らします）。

しかし、私は確かにあなたと一緒です。私は自分自身を小規模なCSSのエキスパートと考えていますが、JavascriptにあるようなCSS用のツール（プロトタイプ、JQueryなど）があればいいと思います。ツールに必要なものを指定すると、背後でブラウザの不整合が処理されます。理想的だと思います。

これは、以前の回答を詳しく説明しています。

CSSを初めて使い始めたとき、変数や式などをサポートしていなかったのも苦痛でした。

たとえば、これの代わりに：

a { color: red }
.entry { color: red }
h1 { color: red }

できること：

a, .entry, h1 { color: red }

これを行うことにより、1つのスポットで宣言された色を維持できます。

CSSを十分に使用すれば、ほとんどのブラウザーの不整合を簡単に克服できるはずです。 CSSハックを使用する必要があることがわかった場合は、おそらくより良い方法があります。

その人たちと言って申し訳ありませんが、あなた方全員がポイントを逃しました。

単語 abstraction がキーです。あなたとサリーがウェブサイトを作っているとしましょう。彼女が角を丸くする間、あなたはフォームをスタイリングしています。あなたと彼女の両方が、いくつかのセレクターを定義しました。

無意識のうちに、サリーのものと衝突するクラス名を選択した場合はどうなりますか？ご覧のように、「隠す」ことはできません。 （要約）CSSで作業するときの詳細。 IEのバグを修正できず、他の人がそのまま使用できる自己完結型のソリューションを作成できないのは、プログラミング言語でプロシージャを呼び出すだけで、前条件と後条件のみを考慮し、 内部で機能します。達成したい何を考えるだけです。

これはウェブの最大の問題です。抽象化メカニズムが完全に欠けています！あなたのほとんどは叫びます、＆quot;それは不要です;あなたは喫煙クラックを止めます！＆quot;

代わりに、たとえば、レイアウトのバグを修正したり、角を丸くしたり、「最高」について議論したりします。このケースまたはそのケースのマークアップを何度も繰り返します。解決策を説明するサイトを見つけて、答えをコピーして貼り付けてから、あなたが何をしているのかさえ考えずにそれを特定のケースに適応させます！はい、それはあなたがすることです。

暴言の終わり。

  

次に、複数のブラウザーの問題が発生します

これがあります。これは、IEからの矛盾を取り除くのに役立ちます。 jQueryを使用して、javascriptを介してセレクターを追加することもできます。

ダンに同意し、学習しましたが、それほど問題ではありません、楽しいことも。

これは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向けに開発するのはとてもいい場所です。

IEの苦痛と苦しみをFF / Safariで機能させた後、最後まで互換性を保つので、あなたの心は、一般的にCSSではなくIEのせいだと考えます。

CSSフレームワークの場合、 YUI Grids を検討できます。基本的なレイアウトをより迅速かつ簡単にしますが、生の形式で使用されますが、セマンティクスについては妥協します。

CSS（およびブラウザーの頭痛）を真に理解するための鍵は、 CSS標準で使用されるボックスモデル、および一部のブラウザで使用される誤ったモデル。それを取得し、セレクターの学習を開始すると、ブラウザー固有のプロパティから離れ、CSSが楽しみになるものになります。

また、CSSのレイアウトフレームワークである BlueprintCSS もご覧ください。すべての問題を解決できるわけではありませんが、多くの問題があり、CSSを自分で記述する必要はありません。

私は、初心者がCSSで持つ一般的なエラーは特異性に関係していると考えています。 a タグをスタイリングしている場合、ドキュメント内のすべてのタグまたは特定の「クラス」を本当にスタイリングしますか？ a タグの

私は通常、CSSセレクターを非常に具体的にし始め、適切だと思うときにそれらを一般化します。

このテーマに関する上品な記事がありますが、情報もあります： 特異性戦争

CSSの学習には少し時間がかかりますが、最初に最も落胆したのは、すべてのブラウザーを同じように動作させるために非常に多くのハックが必要だったという事実でした。ロジックに準拠していないシステムを学ぶのは馬鹿げているように思えますが、W3仕様の形式で、各ブラウザーの特異性の背後にロジックがあるという漠然とした信念にしがみついています。新世代のブラウザが徐々に登場し始めているようですが、IE6は今でも日常的に私の生活を苦しめています。

準拠/有効なCSSコードとブラウザーの見掛け倒しの実装との間に抽象レイヤーを作成することは、悪いことではないでしょう。しかし、そのようなものが作成された場合-JS（またはjQuery）を使用する必要がありますか？ （そして、それは処理コストの面で不当に負担をかけるでしょうか？）

CSSを使用してスクリプトを作成するときに、「地面を平らにする」ことが役立つことがわかりました。おそらく、さまざまな種類のリセットスクリプトが存在しますが、YUIリセットを使用することで、そうでなければ遭遇する癖の数を減らすことができました。

@SCdF：ここでの要約は公平だと思います。しかし、一部の人々はCSSを学ぶ時間がないという議論は偽です-ちょっと考えてみてください。あなたが習得したテクノロジーを代用すると、その理由がわかります：

  

I。嫌い。 Java。私のためにそれを書くだけの何かがそこにありますか？誰もがJavaをマスターする時間があるわけではありません。

CSSは確かに不完全なテクノロジーです。5年後にはブラウザーの非互換性に対処することはもうなくなり（ほぼそこにあります）、著者側のツールは改善されると期待しています（私が記述した種類の変数と計算を提供する私自身の使用のためにVisual Studioマクロを書いたので、不可能ではありません）-しかし、それを本当に理解することなく、この技術を効果的に使用できるべきだと主張します合理的ではありません。

これについては正しく考えていますが、おそらくブラウザーのさまざまな CSS 実装を理解する必要があるでしょう。これは、アプリケーションが存在する環境を理解することにすぎません。

明確にするために：これは CSS を理解するためのものではありません。言語をよく知っている場合でも、言語内の冗長性、重複、制御構造の欠如に対処する必要があります。

私は 10 年以上にわたって CSS をしっかりと書いてきましたが、この言語は強力で効果的ではあるものの、CSS を実装するのは最悪だという結論に達しました。したがって、次のような抽象化レイヤーを使用します サス または 少ない または xCSS 言語とのインターフェースに。これらのツールは CSS に似た構文を使用するため、問題の領域内で問題を解決できます。PHP などを使用して CSS を記述することは機能しますが、最良の方法ではありません。

抽象化レイヤーを通じて言語の問題を隠すことで、プロジェクトのライフサイクル全体を通じて整合性を維持する、より優れた製品を提供できます。CSSを手書きで書くと加速する ソフトウェアの腐敗 ほとんどの CSS コーダーが提供していないしっかりとしたドキュメントを提供している場合を除きます。十分に文書化された CSS フレームワークを作成している場合、おそらくそれを手動で作成することはないでしょう。それは効率的ではありません。

CSS に関するもう 1 つの問題は、ネストされたブロック宣言がサポートされていないことです。これにより、プログラマーはフラットでグローバルなクラスのセットを構築し、命名規則に従って名前の衝突を処理することが奨励されます。グローバルが悪であることは誰もが知っていますが、なぜそのような方法で CSS を記述するのでしょうか?クラスをドキュメント モデル全体に​​公開するのではなく、クラスにコンテキストを与えた方がよいのではないでしょうか?命名規則は機能するかもしれませんが、言語を記述するために習得する必要がある別の作業にすぎません。

優れた CSS を書くことに誇りを持っている人は、プログラミングのベスト プラクティスをマークアップに適用し始めることをお勧めします。抽象化レイヤーを使用するということは、優れた CSS を作成するスキルが不足しているという意味ではなく、言語の弱点への露出が制限されていることを意味します。

CSSから抽象化する必要はありません。CSS自体を抽象化することに気付く必要があります。 CSSは、画面にピクセルを配置することではありません。代わりに、ブラウザがこれらの決定を下すのに役立つルールのシステムを記述することです。これが必要なのは、CSSを作成する時点で、ブラウザーが適用するコンテンツがわからないためです。また、ブラウザが実行する環境もわかりません。

これをマスターするには時間がかかります。週末にCSSを取り上げて、うまくいくことはできません。言語には非常に低い障壁がありますが、水は深く流れているため、少しだまされています。 CSSに習熟するためにマスターしようとするトピックのトピックの一部を次に示します。

  • カスケードと継承
  • ボックスモデル
  • フロートと新しいフレックスボックスを含むレイアウトメソッド
  • ポジショニング
  • スタイルをモジュール化して維持しやすくするためのSMACSSやBEMなどの現在のベストプラクティス

これを前もって知る必要はありませんが、前に進み続ける必要があります。一般に他の言語やプログラミングと同様に、継続的に学習し、技術を習得する必要があります。 CSSはWeb開発の基本的な部分であり、より多くの開発者が他の言語と同じようにそれを扱う必要があります。

所属していません StackOverflow
scroll top