4

内部 Web アプリケーションの HTML と CSS を適切に記述しようとしています。技術的に可能な限り、HTML マークアップでページのコンテンツを定義し、必要なレイアウトとは完全に独立させたいと考えています。

明らかに、これを完全に行うことは不可能です。レイアウトを機能させるためだけにネストされた div を追加する必要があるたびに、私は少し頭が痛くなります。

私が取り組んでいる最近の問題は、.css ファイル内の重複テキストの量を減らす方法です。主なものは色です。アプリ全体で、色を使用して「クリーン」、「エラー」、「警告」、および「許容」を表していますが、これまでのところ、色を使用するほとんどすべての場所で、色を明示的に定義する必要があります。テキストの色、背景色、境界線の色に使用されることもあります。

色などの値を名前に割り当て、CSS プロパティでその名前を参照する方法はありますか?

私は、CSS で継承がどのように機能するかを認識しており、この目標を達成する 1 つの方法は、多くの要素で複数のクラス名を使用することでありbackgroundClean、あらゆる種類のオブジェクトが使用するスタイルにすることができることを認識しています。しかし、そのためには HTML に、ページのスタイル上のレイアウトのみに関連し、データではなく、より多くのデータを認識させる必要があります。

おまけの質問:この種の作業を行うためのベスト プラクティスは何ですか? 準備ができていないのに、HTML+CSS を MVC のように動作させようとするのは愚かですか? それが CSS が常に向かってきた方向であることは知っていますが、おそらくまだそこに達していないだけです。

4

9 に答える 9

9

そうです、これを行うために新しく導入されたcss 変数があります!

残念ながら、まだブラウザに組み込まれていないため、まだ使用できません。

同じ動作を得るには、ある種のサーバーサイド言語を使用して、色を CSS ファイルに動的に出力する必要があります。(大量の JavaScript を使用することもできますが、それは恐ろしいことです)

したがって、PHP では次のようにできます。

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />
于 2009-02-19T18:13:27.317 に答える
5

現在のブラウザではサポートされていません。ただし、CSS をSASSなどで前処理する場合は、これとそれ以上のことを行います。SASS は CSS を改善します。スタイルシートを書くのがより簡単で楽しいものになります。バニラ CSS の作成に戻ることはありません。

于 2009-02-19T18:15:41.933 に答える
1

これを発見しました (StackExchange Podcast で言及されています): http://lesscss.org/

CSS に変数 (およびその他の機能) を配置できるのは JavaScript です。

于 2011-08-29T04:52:20.970 に答える
1

あなたの問題を完全に理解しているかどうかはわかりませんが、色に特定のクラスを割り当てることを検討することをお勧めします。たとえば、「警告」のすべてのテキスト/div/etc が明るい赤の場合、css で次のようにすることができます。

.warning { color: #f00; }

そして、div があるときはいつでも、既に余分なクラスがある場合でも、クラスをスペースで区切って次のクラスを追加するだけです。

<div class="message warning">Invalid username.</div>

注意すべきことの 1 つは、クラスに色の名前を使用することは良い習慣とは見なされないことです。たとえば、「blue」という名前のクラスを定義するべきではありません。将来変更する場合に備えて、その色が表す名前を使用するようにしてください。

編集：質問でこれについて言及しましたが、私が知る限り、それは現在可能な最良の方法になるので、少し拡張したかっただけです。

于 2009-02-19T18:14:12.700 に答える
0

別の可能な解決策は、スタイルごとに複数の定義を含めることです...

.error{ text-decoration: underline; font-weight: bolder}

.cancelled{ text-decoration: line-through; font-style: italic;}

.warning{font-weight: bold}

.comment{font-size: smaller; font-style: italic}
.
.
.

.error, .cancelled { color: red };

.warning, .comment {color: green};

ここで重要なのは、エラーとキャンセルは互いに同じ色にする必要があり、警告とコメントは互いに同じ色にする必要があるということです。使用する実際の色は、他のスタイル属性とは別に定義されており、色の更新が必要な場合は、単一の値を変更できます。

これで私が警告するのは、スタイル定義が2つの場所に分割されているため、誰かがメインの定義を更新して別の色を使用し、効果がない理由に気付く前に長い時間をかけて頭をかいてしまう可能性があるということです。 -つまり、2番目の定義がそれをオーバーライドするためです。

@BobとTomRitterが言及したサーバー側のアプローチも検討する価値がありますが、私が提案するアプローチと同様に、キャッシュの問題の影響を受けやすくなっています。

于 2009-06-18T09:28:37.557 に答える
0

プレーンな HTML と CSS でこれを行うことはできません。

同様の効果を得るために要求されたときに、その場で CSS を生成することができます。ただし、このような CSS のキャッシングを非常に慎重に制御して、出力の完全な制御とユーザーの帯域幅使用量の最小化との間のバランス ポイントを見つける必要があります。

jQuery やその他の JavaScript フレームワークを使用して実装することもできますが、それではブラウザーの作業が増え、制限なしで使用するとページがユーザーに応答しなくなる可能性があります。

于 2009-02-19T18:23:28.407 に答える
0

これを達成するための最良の方法は、サーバー側からだと思います。CSS をサーバーで処理して、好きなものを出力できるようにします。

たとえば、C# を使用している場合は、スクリプト ブロックを使用して変数を参照します。

width: <%= Width %>
于 2009-02-19T18:16:13.290 に答える
-1

サーバー側のスクリプトにアクセスしたくない、またはアクセスできない場合、1 つの回避策はクライアントで Javascript を使用することです。document.write() を使用するだけでうまくいきます。唯一の問題は改行です...

<script type="text/javascript">
<!--
var sColor = "#f0000";
var myCSS = ".red {" +
             "    color: " + sColor+
              "}" +
             ".error { " +
                  color: " + sColor +
             "}";

document.write(myCSS);
-->
</script>

書いたり読んだりするのが面倒ではなく（私見）、維持するのはかなり簡単です...個人的には、サーバー側の言語を好みます。そうすれば、何が起こっているかを完全に制御できます。または、少なくとももう少し。;-)

于 2009-02-19T18:36:16.150 に答える
-1

はい、jQuery と呼ばれます。JavaScript と優れた JavaScript ライブラリ (jQuery は優れています) を使用して、必要なものをそのように操作します。

于 2009-02-19T18:19:17.330 に答える