Richtlinien zur Codeüberprüfung für CSS, JS und HTML

Ich wurde gebeten, Richtlinien für die Überprüfung von CSS, JS und HTML zu erstellen. Ich weiß, dass es Codierungsrichtlinien für JS gibt, aber ich weiß nichts über HTML und CSS. Um JS zu überprüfen, werde ich diesen Richtlinien auf jeden Fall folgen und sie erwähnen. Aber was ist mit CSS und HTML? Gibt es neben logischen Fehlern und Einrückungsproblemen bestimmte Dinge, die ich überprüfen muss, wenn ich Markup und / oder CSS überprüfe?

Einige Dinge zu suchen:

• Werden strukturierte Informationen anhand der entsprechenden HTML-Tags identifiziert? H1- H6für Überschriften UL/ OLund LIfür Listen usw.?
• Sind keine Legacy - HTML - Tags ( <b>, <i>, <center>, <font>) verwendet?
• Verwendet die Site so wenig Markup wie möglich?
• Werden Stilinformationen in CSS-Dateien ausgelagert?
• Ist alles Javascript externalisiert? einschließlich Event-Handler?
• Verweisen CSS-Klassennamen auf die Funktion in page ( img-caption) und nicht auf form ( bold-red) oder content ( pink-elephant)?
• Haben Bilder das entsprechende Format (PNG oder JPEG, je nach Typ)?
• Wurden minimierte Versionen von Javascript-Bibliotheken verwendet?
• Wurden optional alle lokal entwickelten Javascript- und CSS-Dateien minimiert?
• Wird das HTML / CSS validiert?
• Wurde YSlow (oder ähnliches) verwendet, um die Leistung zu überprüfen / zu optimieren?
• (meistens) [SEO] Ist die Site mit deaktiviertem Javascript zugänglich?
• [SEO] Befindet sich der relevanteste Inhalt oben im HTML?

Eines der wichtigsten Elemente eines guten Stils in HTML ist die progressive Verbesserung . Dies bedeutet, dass das HTML-Layout auch ohne CSS oder JavaScript gut gerendert werden kann. Sobald JS / CSS verarbeitet ist, sieht es besser aus (z. B. wird HTML- <select>Dropdown im alten Stil animiert).

Dies hat auch mit nicht aufdringlichem Markup zu tun. Anstelle <font style="color:red;font-size:16pt">Hello</font>würde man verwenden <div class="red-colored-big-fond">Hello</div>.

Gleiches gilt für JavaScript. Stattdessen <button onclick="javascript:alert('a');">Clickme</button>würde man eine Schaltflächenklasse / ID angeben und diese aus JavaScript ausrichten. Außerdem ist Ihr Markup-Code einfacher zu pflegen.

Überprüfen Sie, ob zur Ausführung der Aufgabe die geringste Menge an Markup verwendet wird. Stellen Sie sicher, dass das Markup auch semantisch ist. Verwenden Sie es nicht, wenn ein Tag genau dasselbe tut und weitere Informationen enthält. Stellen Sie sicher, dass Spannweiten nicht zu Blockelementen gemacht werden und umgekehrt.

Darüber hinaus bringt Alex auf Umwegen einen großartigen Punkt zur Sprache. Stellen Sie sicher, dass niemand Klassennamen wie "red-coloured-big-font" verwendet, da ungefähr 20 Sekunden nach der tatsächlichen Bereitstellung jemand diese in eine kleine blaue Schriftart ändern wird. Ich habe dieses CSS tatsächlich gesehen:

.arial12pt { font-family: Verdana; font-size: 8pt; }

Alles in Ihrem Markup sollte beschreiben, was die Seite ist, nicht wie sie aussieht. Ich stimme definitiv der progressiven Verbesserung zu, aber wieder auf Umwegen. Die Seite muss nicht mit CSS annähernd so aussehen wie ohne. Versuchen Sie nicht, sie gleich aussehen zu lassen, da Sie wieder in table-land und spacer.gif landen.

In Bezug auf HTML lege ich immer Wert darauf, dass meine Dateien Hierarchien und Einrückungen enthalten. Zum Beispiel, wenn ich ein paar Divs habe:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

Ich nehme an, dass dies für die meisten, die Layouts und Vorlagen erstellen, ziemlich offensichtlich ist, aber meistens sehe ich nur verstümmeltes HTML, das überhaupt keine strukturelle Hierarchie aufweist, was es für eine andere Person schwierig macht, es zu lesen. Ich denke, ich komme aus einem eher CS-Umfeld, das ist etwas, das mir im Gedächtnis bleibt. Gleiches gilt auch für CSS. Angenommen, Sie stylen ein Div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

Einrückung erleichtert das schnelle Durchlesen erheblich, wenn Sie an eine andere Sprache wie PHP / Ruby / Whatever gewöhnt sind. Auch hier kommt es darauf an, wie Sie am besten arbeiten, aber wenn andere meinen HTML-Code lesen, mache ich ihn gerne wirklich organisiert :).

Wie oben erwähnt, ist es immer eine gute Idee, Ihren CSS-Klassen und IDs relevante Namen für Ihr Layout zu geben, insbesondere wenn es haarig wird (ähnlich wie beim Benennen von Variablen und Methoden in anderen Sprachen). Etwas anderes, auf das Sie achten sollten, ist das gefürchtete "Erraten und Überprüfen" von Rändern, Polstern und anderen Ausrichtungsproblemen. Ich versuche oft zu vermeiden, negative Zahlen in meine Ränder und Auffüllungen einzufügen. Es kann verwirrend werden, wenn Sie das Layout nicht selbst erstellt haben und wenn Sie später darauf zurückkommen und es ändern möchten, müssen Sie es möglicherweise überarbeiten. Meiner Meinung nach ist es immer eine gute Idee, in CSS nichts Hokey oder "kludgy" auszuprobieren, auch wenn es gut aussieht. Es gibt normalerweise einen besseren Weg, dies zu tun, selbst wenn Sie Ihr CSS neu strukturieren müssen!

Für Javascript möchte ich immer, dass es mit JSLint validiert wird. Ich kann mir so viele Fehler vorstellen, dass JSLint feststellt, dass es einfach verrückt ist, es nicht zu verwenden.

Ich bin auf dieses Standarddokument gestoßen , das mir sehr gut gefallen hat. Ich werde auch wiederholen, was über die progressive Verbesserung gesagt wurde. Wenn jemand anderes das HTML / CSS schreibt, sollten Sie es im Allgemeinen später ansehen und angenehm überrascht sein, wie schlecht das Markup ist, und einfache Stiländerungen einfach und effizient vornehmen können.