7

クライアントのサイトに表示されるウィジェットを作成しています。iFrame を使用できないため、完全な CSS リセット (https://github.com/premasagar/cleanslate) を使用して、スタイルへの干渉を回避する必要があります。そのソリューションを使用するには、すべてのスタイルに !important を追加する必要があります。多くのスタイルがあり、このコードを簡単に維持したいので、より動的なソリューションを探しています。

javascript を使用して !important をスタイルシートに追加できますが、これは運用環境には理想的ではありません。CodeKit と LESS を使用していますが、これらのいずれかが、CSS ファイルの生成時にすべてのスタイルに !important を簡単に追加できるかどうか疑問に思っています。

混入します？コードキットの設定?

4

2 に答える 2

11

更新: はい、LESS が役立ちます

!important極端な場合を除いて、私は使うのが嫌いです。ほとんどの人は、頭皮を使って仕事をする必要があるときに、チェーンソーのように使用します. それにもかかわらず、私はあなたのようなウィジェット開発者が直面している問題を理解しています。

Marc の回答は、LESS の優れた機能を指摘していましたが、それがこの問題にどのように役立つかを示すことができませんでした。

LESS コード全体を名前空間付き mixin でラップすると、この機能はまさに必要なことを行います。したがって、ウィジェット コードが次のようになっていると仮定します (ウィジェットに何らかのタイプのクラスを既に使用していると述べました)。

.yourWidgetClass div > p {
  prop: something;
  &:hover {
    prop: some-hover-style;
  }
}

.yourWidgetClass .someClass {
  prop: something;
}

次に、これを行うことができます（すべてのウィジェットコードをラップしてから、マークの回答に記載されている機能#makeImportant()を使用してそのミックスインを呼び出します）：!important

#makeImportant() {
    .yourWidgetClass div > p {
      prop: something;
      &:hover {
        prop: some-hover-style;
      }
    }

    .yourWidgetClass .someClass {
      prop: something;
    }
}

& {
    #makeImportant() !important;
}

これにより、次の CSS 出力が生成されます。

.yourWidgetClass div > p {
  prop: something !important;
}
.yourWidgetClass div > p:hover {
  prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
  prop: something !important;
}

手動でより集中的な私の元の（受け入れられた）回答については、編集履歴を参照してください。

于 2013-01-08T19:09:25.840 に答える