3

CSSスタイルシートをよりモジュール化しようとしていますが、作成者が一連のスタイルを動的に適用できるようにするインクルードやアプライなどの機能があるかどうか疑問に思っていました。

私は質問を表現するのに苦労しているので、おそらく例がより理にかなっているでしょう。

たとえば、次のCSSがあるとします。

.red {color:#e00b0b}
#footer a {font-size:0.8em}
h2 {font-size:1.4em; font-weight:bold;}

私のページでは、フッターリンクとh2要素の両方に特別な赤い色を使用させたいとしましょう（他の場所でも使用したい場合があります）。理想的には、次のようなことをしたいと思います。

.red {color:#e00b0b}
#footer a {font-size:0.8em; apply-class:".red";}
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}

私にとって、これはある意味「モジュラー」のように感じます。なぜなら、.redクラスの使用場所をあまり気にせずにクラスを変更でき、他の場所では、具体的には何であるかを気にせずにそのクラスのスタイルを使用できるからです。 。

私には次の選択肢があることを理解しており、かなり経験の浅い意見では、それらが完全ではない理由を含めました。

  1. colorその色にしたいすべての要素にプロパティを追加します。色を変更した場合、新しい色に一致するようにすべてのルールを更新する必要があるため、理想的ではありません。
  2. red赤にしたいすべての要素にクラスを 追加します。それは私のHTMLがプレゼンテーションを指示していることを意味するので理想的ではありません。
  3. 赤くしたいすべての要素を選択する追加のルールを作成し、それにcolorプロパティを適用します。 特定の要素をスタイルするすべてのルールを見つけるのが難しく、メンテナンスがより困難になるため、理想的ではありません

たぶん私はただのお尻であり、次のオプションが唯一のオプションであり、私はそれらに固執する必要があります。しかし、「理想的な」（まあ、私の理想的な）方法が存在するかどうか疑問に思っています。存在する場合、適切な構文は何ですか？

存在しない場合は、上記のオプション3が最善の策のようです。ただし、確認をお願いします。

4

4 に答える 4

3

まず第一にあなたはできませんapply-class:".red";

このタイプのアクションを実行するには、この方法を使用することをお勧めします

.red {color:#e00b0b;}
h2 {font-size:1.4em; font-weight:bold;}
.mymargin{margin:5px;}

<h2 class="red mymargin">This is h2</h2>

とdivで使用する

<div id="div1" class="red mymargin"></div>

この場合、クラスで変更すると、.redどこでも変更されます

于 2012-09-29T03:47:47.943 に答える
2

簡単な答え：純粋なCSSでこれを行う方法はありません。

より長い答え：Sassは@extendディレクティブを介してこの問題を解決します。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

これにより、CSSをモジュール式に開発できますが、使用する前にコンパイル前の手順が必要になります。しかし、それは非常にうまく機能します。

于 2012-09-29T04:16:29.287 に答える
1

javascriptでDOMを使用して、HTMLタグのID属性やクラス属性を動的に編集できます。

于 2012-09-29T03:49:12.367 に答える
1

DarthCaesarとjhonraymosに同意します。JavaScriptを使用してクラスを更新するには、必要なのは単純です。

function toggleColorClass(e){
    var redClass = document.getElementsByClassName('red');
    redClass.removeAttribute('class', 'red');
    /*Set the class to some other color class*/
    redClass.setAttribute('class', 'blue');
}

もちろん、これを機能させるには、ドキュメントのどこかに上記の関数を含める必要があります...これが使用しているすべてのJSである場合は、おそらく頭に貼り付けるか、インラインで使用することもできます。トグルが両方向に移動するように、つまり赤のオンとオフを切り替えるように作成することもできます。さらに、jhonrayのスニペットは、おそらくCSSをマークアップする方法です。

于 2012-09-29T04:12:36.350 に答える