JavaScriptライブラリでデフォルトのCSSスタイルを設定するにはどうすればいいですか？

Question

JavaScriptライブラリで<div>が作成されると、通常、ライブラリのユーザがスタイルを設定できるようにdivにクラスが設定されます。自分自身。しかし、JSライブラリが<div>のいくつかのデフォルトスタイルを設定することも一般的です。

これを行うためのライブラリは、インラインスタイルとなりますための最も明白な方法：

<div style="application's default styles" class="please-style-me"> 
    ... 
</div> 

しかし、これは、アプリケーションのデフォルトのスタイルの切り札、ユーザーのスタイルになります。回避策は、ネストされたdivを使用することです：

<div style="application's default styles"> 
    <div class="please-style-me"> 
    ... 
    </div> 
</div> 

これは、「フォント」などの多くのスタイルのための素晴らしい作品が、内部のdivのスタイルは、外側のdivのを上書きしないだろう「位置」のような他の人のために失敗しました。

JavaScriptライブラリにデフォルトでユーザー指定可能な要素を作成するためのベストプラクティスは何ですか？私はデフォルトのCSSファイルを含めるようにユーザーに要求したくない（あなたのライブラリを自己完結型に保つのは良いことだ）。

Answer 1

JSライブラリにはデフォルトのスタイルセットを使用する必要がありますが、これもオーバーライドする必要があります.JSライブラリには別のスタイルシートが含まれている必要があります。

JavaScriptは、できるだけ直接スタイルを追加しないようにし、すべてのスタイルをCSSに譲ることをお勧めします。

スタイルのセットをオンまたはオフに切り替えるのが一般的です。これらの状況をエレガントに処理する方法は、CSSクラスを使用します。

単純に外部スタイルシートを使用するのが妥当でない場合があるのは、アニメーションです。 CSSアニメーションは確かに使用できますが、ブラウザ間のサポートでは、非同期補間を使用してスタイルをある値から別の値にアニメートします。

Answer 2

CSSには!notimportantまたは!unimportantはありません。そして、私は受け入れられたベストプラクティスに遭遇していません。 CSSファイルは、ユーザーが変更可能なスタイルの標準であるようです。

しかし、1つのライブラリにすべてのものを保存したい場合は、アプリケーションのデフォルトスタイルで2番目の例を取り、CSSクラスを追加してクラス名に固有の何かを追加します。次に、実装者があなたのスタイルをオーバーライドしたい場合、実装者は!importantを使用してユーザースタイルをオーバーライドできます。

!importantをCSSファイルの1つまたは2つのスタイルに追加するのは大したことではありませんが、たくさんのインラインスタイルを作成する場合は、これが最適な解決策ではないかもしれません。