CSSクラス名の名前の衝突を避ける方法

Question

私はYahooのPUREのCSSクラスを使用してWebページを書きます。 詳細は、実際には独立したWebページではなく、一部のサイトのWebページの一部です。私はサイトを運営している会社と連絡がありません。

自分の部分を独立したWebページとしてテストしたところ、うまく見えました。親ウェブページ内の部分をテストしたところ、CSSがまったく機能しないことに気がつきました。

私がエラーのために仮定できる唯一の理由は、名前の衝突です。たとえば、私のパートはPUREで定義されたクラス "ヘッダ"を使用します。私はクラス名が親のWebページのプログラマーによって使用されると思います。

私の前提が正しい場合は、CSSクラス名の名前の衝突を避けることができますか。

Answer 1

この目的のためにBEM方法論を使用することを検討してください（http://getbem.com/introduction/をお読みください）。

あなたのアプリ（または希望のウィジェットまたはウェブサイト）をMyPersonalAppと呼んだとします。この次の例のようにそれに応じてクラスに名前を付け：

<div class="MyPersonalApp"> 
    <div class="MyPersonalApp__container"> 
     <p class="MyPersonalApp__text"> 
      Hello world. 
     </p> 
    </div> 
</div> 

しかし、このコードを使用すると、親のウェブサイトとの競合に実行されることを保証するので、あなたはできる限り固有の名前を選択しようとしません。ウィジェットや埋め込みアプリを書くときに、私はEmbeddedChatWidgetBySomeCompanyのような名前を選び、意図的にラクダのケーシングを使用しようとします。それは通常、開発者がクラス名に使うものではないからです。