Inline-Styles sind Gestaltung, die direkt am Element steht. Sie überschreiben praktisch alles andere und sind deshalb in der Regel die schlechteste Wahl.
- Inline-Styles
CSS-Deklarationen, die über das style-Attribut direkt an einem Element stehen.
Beispiel: „Ein Inline-Style gilt nur für das Element, an dem er steht.“
Der Vorrang
MDN beschreibt es deutlich: Inline-Styles always overwrite any normal styles in author stylesheets. Man kann sie sich mit einer Spezifität von 1-0-0-0 denken. Überschreiben lassen sie sich nur mit !important.
Genau das macht sie zur letzten Wahl: Was im Dokument steht, lässt sich aus dem Stylesheet nicht mehr korrigieren, und bei tausend Seiten ist jede Änderung eine Suche durch Inhalte.
Wo sie berechtigt sind
Bei Werten, die erst zur Laufzeit feststehen: die Breite eines Balkens, die Position eines Elements, eine Farbe aus dem Redaktionssystem. Dort schreibt Code den Wert ans Element, und das ist richtig so.
<div class="balken" style="--anteil: 62%">…</div>Sauberer wird es, wenn der berechnete Wert in eine CSS-Variable geschrieben wird und die Gestaltung im Stylesheet bleibt.