Wieso sollte man kein inline CSS/JS verwenden

Es gilt als schlechter Stil inline CSS zu verwenden:

<span style="color: #666666; display: block; float:left; width: 250px;padding-bottom:5px;">

d.h. das CSS eines Elements direkt über das style Attribut zu aktivieren.

Dasselbe gilt auch für Inline Javascript:

<div></div>
<script type="text/javascript">
    alert("hallo");
</script>

Folgende Gründe gibt es dafür:

Wartbarkeit

Bei Änderungen (durch andere) schaut man erst mit Firebug auf das Element und es findet sich keine Zeile in einer Datei im Code, wo man seine Änderungen einpflegen kann. Normalerweise würde im Firebug die CSS Datei und die Zeile stehen. Man muss das Modul oder die inkludierte PHP aufwendig suchen um Änderungen vorzunehmen. Das kostet viel Zeit im Nachgang.

inline_css_firebug — Wieso man kein Inline CSS verwendet: Wartbarkeit

Es erschwert auch das Redesign von Projekten, die ein neues Frontend bekommen sollen, weil verschiedenste Dateien und CSS Quellen geändert werden müssen, anstatt die CSS Datei zu ändern.

Caching von CSS Dateien

CSS/JS Dateien werden vom Browser gecacht und müssen nicht bei jeder Unterseite neu geladen werden (selbes gilt auch für). Wenn der Code nicht ausgelagert ist, wird die zu übertragenden Menge an Daten größer um das inline CSS/JS welches ausgelagert werden hätte können.

Übersichtlchkeit

Vertikal ist viel übersichtlicher als horizontal:

<span style="color: #666666; display: block; float:left; width: 250px;padding-bottom:5px;">

oder

<span clas="myclass">

und im CSS:

.myclass
{
   color: #666666;
   display: block;
   float:left;
   width: 250px;
   padding-bottom:5px;
}

Ein Nebeneffekt ist, dass Änderungen mit SVN zeilenweise besser nachvollziehbar sind.

IDE Darstellung

Viele IDEs finden keine Fehler im inline CSS oder stellen weniger Informationen dar, als wenn Code in .css oder .js Dateien gespeichert werden. Es gibt bei manchen auch keine Code-Vervollständigung/Fehlerkorrektur im inline CSS.

inline_css_ide — Erweiterte Optionen in der IDE und SVN: Farben (siehe graues Viereck links) und zeilenweise Änderungen werden

Doppelter Code

Inline definierte Styles lassen sich auch nicht wiederverwenden, indem man einfach die Klasse an ein anderes Element packt. So werden Änderungen auch aufwendiger, da Sie an jedem Element durchgeführt werden müssen.