0

スタイルシートでクラスを関連付ける方法があればいいのですが。たとえば、fruitというクラスとappleというクラスがある場合、りんごも果物であると言えたらいいのにと思います。

これは HTML から次のように実行できることを知っています。

<div class="apple fruit"></div>

しかし、これを毎回追加する必要があります。スタイルシート側だけではどうですか？

<div class="apple"></div>
<div class="fruit"></div>

スタイルシート (最小限のコーディング) でリンゴも果物であると関連付ける方が理にかなっているように思えます。

可能な解決策：

  • クラスappleがあるときはいつでも、おそらく javascript を使用してクラスfruitを追加できます。

  • 別の解決策は、ある種の簡略表記を使用してから、スタイルシートをコンパイルすることです。

他の解決策はありますか？おそらくよりエレガントですか？

4

7 に答える 7

0

実際にできることは、物事を「カスケード」させることだけです。すべての .fruit に .5em のパディングがある場合、再利用可能なクラスがあります。どのようなものを再利用可能にするかを決定することが重要です。ストーンフルーツが万能であれば、再利用可能な .stone-fuit クラスを持つことができます。果物の一部が赤い場合は、.red などを使用できます。2 つの考え方の間で戦いがあります。HTML であまりにも多くのクラスを使用することを恐れている人もいますが、彼らにとっては満足のいく媒体です。私はSASSで変数をかなり使用しています-そして、OOCSSを調べることができます。この場合、ルールとセレクターは次のようになります。

CSS

.fruit {
    padding: .5em;
}

.stone-fruit {
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.red {
    background-color: red;
}

HTML

<div class="fruit stone-fruit red">red stone fruit</div>
于 2013-07-31T01:38:56.537 に答える
0

http://lesscss.org/のようなサードパーティのプラグインを使用してこれを達成する方法はたくさんありますが、これを達成できる最善の方法は、css 構造、つまりオブジェクト指向の方法を計画することだと思います。

たとえば、果物にはいくつかの共有属性があり、リンゴのクラスにはいくつかの違いがあります。

.fruit { font-size: 12px, border:none}
.apple { color: red }

これについて書かれた興味深い記事がいくつかありますが、難しいのはその計画です。CSS の計画に余分な時間を費やしたい人、特にデザイナーが UAT 中にいくつかの新しいアイデアをポップアップしたり、ユーザーが土壇場でデザインを変更して構造全体を壊したりする可能性があります。

http://www.vanseodesign.com/css/object-directional-css/

http://net.tutsplus.com/tutorials/html-css-techniques/object-directional-css-what-how-and-why/

于 2013-07-31T01:16:09.000 に答える
0

CSS プリプロセッサー (LESS、Sass、Stylus) を確認する必要があります。期待どおりにスタイルを拡張する方法を提供します。

出力CSS

  .fruit, .apple, .orange {
    border: 2px solid green;
  }

  .apple {
    background-color: red;
  }

  .orange {
    background-color: orange;
  }

以下

  .fruit {
    border: 2px solid green;
  }

  .apple {
    &:extend(.fruit);
    background-color: red;
  }

  .orange {
    &:extend(.fruit);
    background-color: orange;
  }

SASSとスタイラス

  .fruit {
    border: 2px solid green;
  }

  .apple {
    @extend .fruit;
    background-color: red;
  }

  .apple {
    @extend .fruit;
    background-color: orange;
  }
于 2013-07-31T01:16:32.237 に答える