うまく機能しているサイトで人々が使用できるウィジェットを作成しました。問題は、一部の css が、これらの Web サイトの一部で以前に定義されたクラスによって変更されていることです。これが私が持っているものです。
.widget ul { margin:0; }
.widget li { margin:0; }
これは、誰かが次のように、すべての ul 要素に対して既に異なるマージンを持つコンテナーにウィジェットを配置するまでは問題ありません。
.container ul { margin:10px; }
この ul スタイルは、ウィジェットのスタイルに影響を与えています。これらの以前に定義されたスタイルが私のものに影響を与えないようにする方法はありますか?
CSS でより具体的なセレクターを使用し、ID の使用を検討してください。これにより、セレクターがウィジェット内の要素をより具体的にターゲットにし、その人の Web サイトのより「あいまいな」セレクターをオーバーライドすることが保証されます。
#mywidget .widget > ul {margin:0;}
などの要素にも<ul>独自のクラスがあることを確認したい場合があります。これにより、その人が独自の CSS に持っているものにフォールバックするのではなく、特定のスタイル ルールがあることを確認できます。
#mywidget ul.mywidget-list {margin:0;}
Maybe consider using !important as well, but the first solution is probably preferable, in case people are actually trying to override your styles.
.widget ul {margin:0 !important;}
And lastly, I assume you're not actually doing this, but don't use vague class names which the person might use for their own markup, or which may clash with other third party widgets and systems. Use really specific class names and IDs which are likely only to be used by your widget.
Everything above is just an example, as it is hard to give you an exact solution for your particular markup and your widget's usage within other people's sites. I would experiment and get yourself familiar with how the styles are inherited and how different approaches will affect the cascading of styles.
理想的には、各コード ブロックは自己完結型である必要があります。これは、OOCSS と BEM を使用している人々が解決しようとしていることです。
.widget ul の代わりに、.widget--list と書くこともできます
コンテナも同じ。.container--list と書くかもしれません
熟読するためのいくつかの記事を次に示します。
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
悪い習慣ですが、 を使用できます!important。
.widget ul { margin:0 !important; }
.widget li { margin:0 !important; }