Wie sollte eine JavaScript-Bibliothek standardmäßige CSS-Stile festlegen (gibt es ein "! Notimportant"?)

Question

Wenn eine JavaScript-Bibliothek eine <div> erstellt, legt sie normalerweise eine Klasse für das div so an, dass der Benutzer der Bibliothek sie formatieren kann. Sie selber. Es ist jedoch auch üblich, dass die JS-Bibliothek einige Standardstile für die <div> festlegen möchte.

Die naheliegendste Möglichkeit, für die Bibliothek, dies zu tun mit Inline-Styles würde:

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

Dies wird jedoch die Anwendung des Standardstil Trumpf Styles des Benutzers machen. Eine Abhilfe ist, verschachtelte divs zu verwenden:

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

Dies ist für viele Arten wie ‚font‘ funktioniert gut, aber nicht für andere wie ‚Position‘, wo der Stil des inneren div wird die äußere divs nicht außer Kraft setzen.

Was ist die beste Vorgehensweise zum Erstellen benutzerdefinierbarer Elemente mit Standardwerten in einer JavaScript-Bibliothek? Ich würde es vorziehen, nicht zu verlangen, dass Benutzer eine CSS-Datei der Voreinstellungen einschließen (es ist nett, Ihre Bibliothek in sich geschlossen zu halten).

Answer 1

Wenn eine JS-Bibliothek über einen Standardsatz von Stilen verfügt, die verwendet werden sollten, aber auch außer Kraft gesetzt werden sollten, sollte die JS-Bibliothek ein separates Stylesheet enthalten.

JavaScript sollte es vermeiden, Stile direkt so viel wie möglich hinzuzufügen, und alle Stile CSS zuweisen, wo es sinnvoll ist.

Es ist üblich, dass Stylesätze ein- und ausgeschaltet werden. Diese Situationen können elegant mit CSS-Klassen bewältigt werden.

Ein Fall, in dem es nicht sinnvoll ist, einfach externe Stylesheets zu verwenden, ist die Animation. CSS-Animationen können zwar verwendet werden, aber für die browserübergreifende Unterstützung wird die asynchrone Interpolation verwendet, um Stile von einem Wert zum anderen zu animieren.

Answer 2

Es gibt keine !notimportant oder !unimportant in CSS. Und ich bin nicht auf eine akzeptierte Best Practice gestoßen. Es scheint, dass eine CSS-Datei der Defacto-Standard für Stile ist, die vom Benutzer geändert werden können.

Aber wenn Sie alle Dinge in einer Bibliothek behalten möchten, würde ich Ihr zweites Beispiel mit Ihren Standard-Anwendungsstilen nehmen, dann eine CSS-Klasse anhängen und etwas Einzigartiges dem Klassennamen voranstellen. Wenn der Implementor Ihre Stile überschreiben möchte, könnte das Implementor einfach !important verwenden, um Ihre Benutzerstile außer Kraft zu setzen.

Das Hinzufügen von !important zu einem oder zwei Stilen in einer CSS-Datei sollte keine große Sache sein, aber wenn Sie eine Reihe von Inline-Stilen erstellen, ist dies möglicherweise nicht die beste Lösung.