Cssをスタイリングの仕組みとして使用してHtmlウィジェットを開発しています。ウィジェットは、ホストWebページ上の他のコンポーネントと干渉しないように自己完結型である必要があります。多くのCssスタイル定義を文脈化する最良の方法は何ですか？
私たちは、多数のスタイル定義を含む単一のCSSファイルを持っています。それらをcontextualiseするためには、すべての単一の一つが
#MainWidgetContainer .class1.....
{...}
#MainWidgetContainer .class2.....
{...}
注 - 可能性があります。私はそれと同じ方法で生きることができますが、それは頼む価値があると思いました。
http://lesscss.org/が、私はあなたの唯一の現実的な選択肢は、すべてのあなたのセレクタに#MainWidgetContainer IDを使用することだと思います。そのよりも一般的なものは、ホストスタイルシートと衝突したり、あなたのスタイルによって取り上げられることはありません。上記のように、LESS、またはSASSを使用すると、このように書き込みの煩わしさを軽減できますが、スタイルでもそのセレクタを使用する必要があります。
Here's the documentation on using selectors。 mainwidgetコンテナの子を使用することができます。それは最も直感的なものではありませんが、このようなものにとっては本当に時間を節約します。
私はすでに#MainWidgetContainerの「Descendent」を選択しています。 "直接子"セレクタを使用すると、私が書いたすべてのセレクタで#MainWidgetContainerを使用する必要がなくなりますか？ –
試してみる以外の方法はありません:)それはCSSだけです。バックアップコピーを保存してから、面倒くさい。 – Sneakyness
私は不幸にも、疑いがありました。私はそれがLESSのような製品が作られた理由だと思います。皆さんありがとう。 –