Wie gut sind Ihre HTML- und CSS -Kommentare?

Eines der Dinge, die Sie normalerweise lernen, wenn Sie über grundlegende HTML oder CSS lernen, ist, wie Sie Kommentare in Ihren Code schreiben. Viele Webentwickler verwenden jedoch immer noch keine Kommentare zu ihrem Vorteil. Wir können Kommentare in HTML und CSS umfassend verwenden, aber wenn sie ordnungsgemäß geschrieben sind, können sie unseren Workflow wirklich verbessern.

Wenn Sie anfangen, in einem neuen Unternehmen zu arbeiten, können sich Handbücher oder viele Seiten der Dokumentation ansehen. Jedes Unternehmen ist anders - was bedeutet, dass die Codebasen, die Menge an Legacy -Code, die Entwicklung von Frameworks und die Menge an modularem Code unterschiedlich sein können.

Wir werden oft gesagt, dass „guter Code keine Kommentare benötigt“, aber Sie sind jemals in Kreisen herum, völlig verloren und suchen nach Dokumentation aufgrund eines mangelnden Kommentars?

Key Takeaways

Kommentare in HTML und CSS ermöglicht nicht nur das Verständnis und die Konsistenz, sondern beschleunigt auch den Entwicklungsprozess und die Hilfsmittel bei effizienter Zusammenarbeit. Es ist besonders hilfreich in einem Team, in dem mehrere Entwickler an demselben Projekt arbeiten.
Während des Kommentierens ist es von Vorteil, es zu übertreiben, um es zu übertreiben. Das Kommentieren jedes Codeblocks kann überflüssig und zeitaufwändig sein. Kommentare sollten präzise sein und nur verwendet werden, wenn der Code möglicherweise nicht vollständig klar ist.
Kommentare können verwendet werden, um den Zweck eines Pseudo -Elements, einen verschachtelten Codeblock, warum! Wichtig zu erklären, oder warum ein Codeblock ausgezeichnet wurde und nicht gelöscht wurde.
Andere Dokumentationsformen, wie z. B. Bekanntmachungsnachrichten und Zuganfragen, sollten ebenfalls als Teil des Entwicklungsprozesses betrachtet werden. Sie bieten Kontext und Klarheit und machen die Zusammenarbeit und Code effizienter.

Zwei Fakten zu Code -Kommentaren

Kommentare werden vom Browser ignoriert.
Kommentare werden während der Minifikation ausgezogen.

Basierend auf diesen beiden Fakten wissen wir, dass Kommentare nicht wirklich für Maschinen gedacht sind - sie sind

für Menschen zu lesen .

Warum das Kommentarcode wichtig ist

Wenn Sie freiberuflich tätig sind und an einem Solo -Projekt arbeiten oder wenn Sie der einzige Entwickler sind, der sich Ihren Code ansieht, ist es einfach, es auf Ihre eigene Art und Weise zu machen und Kommentare zu machen, wie Sie es für richtig halten, oder vielleicht Hinterlasse überhaupt keine Kommentare. Aber die Entwickler sagen jedoch, dass sie auf ihren eigenen Code zurückblicken und sich fragen: "Was habe ich gedacht?" oder kämpfen Sie zu verstehen, diesen Code, den sie geschrieben haben.

Kommentare können dazu beitragen, die Konsistenz aufrechtzuerhalten. Wenn Sie konsequente, gut geschriebene Kommentare zu dem, was Sie aufbauen, sind Sie jedes Mal eher auf die gleiche Weise aufgebaut.

Kommentare erleichtern das Verständnis. Dies ist wirklich wichtig in einem Team, in dem manchmal eine Person die ganze Arbeit erledigt. Sie können Kommentare schreiben, um sich selbst zu helfen, eine Logik herauszufinden, und obwohl Sie nicht alle Ihre Kommentare bis zum Ende des Projekts behalten, kann dies Ihnen helfen, besser zu verstehen, wie Sie zu einer Lösung gekommen sind. Es kann Ihnen helfen, diese Lösung später viel leichter zu verbessern.

Kommentare kann auch bei Hotfixes oder schnellen Korrekturen helfen. Kommentare können hier tatsächlich auf drei Arten helfen. Sie können Entwicklern helfen, den Code zu verstehen, wenn sie eine schnelle Lösung vornehmen müssen (insbesondere Entwickler außerhalb des Front-End-Teams, die möglicherweise helfen) wurden angewendet und müssen irgendwann entfernt werden.

Kommentare helfen dabei, den Entwicklungsprozess zu beschleunigen. Sie können ein klareres Verständnis dafür haben, was Sie erstellen, ändern oder entfernen, wenn Sie relevante Kommentare angeben.

Kommentare ermöglichen eine effizientere Zusammenarbeit. Wenn Sie die Vor- und Nachteile eines Projekts oder einer Codebasis kennen, werden Sie mit größerer Wahrscheinlichkeit schneller Teile erledigen, wodurch die Workflows verbessert werden.

Kommentare helfen vielen Menschen. Sie helfen nicht nur sich selbst, sondern können auch anderen Menschen in Ihrem Team helfen. Vorbei sind die Zeiten, in denen wir Kommentare wie nicht gesehen haben, wie meinen Code nicht in den Quellcode der Menschen stehlen. Obwohl wir unseren Code sehr beschützten und unsere „Geheimnisse“ nicht teilen wollten, leben wir jetzt in einer Welt, in der Menschen Code teilen, gemeinsam an Projekten arbeiten und zusammenarbeiten. Wir schämen uns nicht, Harry Roberts, Chris Coyier oder Jonathan Snook in Bezug auf Webprojekte zu verdanken. Mit dieser Verschiebung in der Zusammenarbeit sollten wir auch unsere Kommentarpraktiken zur Kenntnis nehmen - und unseren Kollegen helfen.

Einige Dinge zu vermeiden, wenn es um Kommentare geht

Vermeiden Sie es, absolut alles zu kommentieren

Es mag verlockend sein, sich an die Gewohnheit zu bringen, jeden Codeblock zu kommentieren, aber dies kann redundanter als nützlich oder hilfreich sein. Das Kommentieren sollte nur dann getan werden, wo etwas möglicherweise nicht ganz klar ist. Wenn Sie bei der Benennung Ihrer Klassen die Semantik in Betracht ziehen, ist Ihr Code möglicherweise bereits leicht zu verstehen.

Dies kann auch dort sein, woher das Konzept „guter Code keine Kommentare benötigt“ stammt. Kommentare sollten nicht vollständig vermieden werden, sondern nur bei Bedarf verwendet werden.

Sei nicht zu ausführlich

Ich persönlich bin schuldig, einige ziemlich lange Kommentare in meinem CSS geschrieben zu haben, weil ich es liebe, Dinge zu erklären und zu dokumentieren. Sie sollten jedoch keine Romane schreiben - lange Kommentare sind so sehr ein Schmerz, wie sie schreiben können. Wenn Sie prägnant sein können, tun Sie dies. Manchmal wird bei der Benennung von CSS -Klassen der folgende Rat gegeben:

Machen Sie Klassennamen so kurz wie möglich, aber so lange wie nötig.

Das Gleiche gilt für Kommentare. Es ist gut, über Kommentare zu lesen, die Sie schreiben, um sicherzustellen, dass Sie sie selbst verstehen. Stellen Sie sich vor, Sie sind jemand, der neu im Code ist, und Sie lesen die Kommentare als Leitfaden.

Verbringen Sie nicht zu viel Zeit damit, Kommentare zu schreiben

Ich habe einmal eine Datei in einem Projekt gesehen, an dem ich gearbeitet habe, das eine Zeile in der obersten Lesung hatte:

<span>// Update this with how many hours you have spent on this file:
</span><span>// TIME_WASTED = 438;</span>

Sie sollten nicht viel Zeit damit verbringen müssen, Kommentare zu schreiben. Ein paar Worte reichen normalerweise aus. Wenn Sie zu viel Zeit damit verbringen, Ihren Code zu kommentieren, um sicherzustellen, dass jemand anderes sie versteht

Einige Beispiele für die Verwendung von Kommentaren

Erklären Sie den Zweck eines Pseudo -Elements

Dieses Beispiel zeigt ein Pseudo -Element mit dem ausgefüllten Inhaltswert.

<span><span>.post__comment-container::after</span> {
</span>  <span>background-color: #f9f9f9;
</span>  <span>border: 1px solid #dedede;
</span>  <span>border-radius: 0.25em;
</span>  <span>color: #888;
</span>  <span>content: 'Post author';
</span>  <span>display: inline-block;
</span>  <span>font-size: 0.7rem;
</span>  <span>margin-left: 0.5rem;
</span>  <span>padding: 0.2rem 0.45rem;
</span>  <span>vertical-align: middle;
</span><span>}</span>

Es ist möglicherweise nicht sofort klar, wofür ein Pseudoelement ist, insbesondere wenn die Inhaltseigenschaft als Inhalt angezeigt wird: ''. Mit einem kurzen Kommentar über dem Codeblock können wir dies verbessern.

/* Post author label for comment */

<span><span>.post__comment-container::after</span> {
</span>  <span>background-color: #f9f9f9;
</span>  <span>border: 1px solid #dedede;
</span>  <span>border-radius: 0.25em;
</span>  <span>color: #888;
</span>  <span>content: 'Post author';
</span>  <span>display: inline-block;
</span>  <span>font-size: 0.7rem;
</span>  <span>margin-left: 0.5rem;
</span>  <span>padding: 0.2rem 0.45rem;
</span>  <span>vertical-align: middle;
</span><span>}</span>

Erklären Sie einen verschachtelten Codeblock

Während es definitiv hilft, semantische Klassen so weit wie möglich zu verwenden, ist es möglicherweise nicht immer klar, warum ein CSS -Block bei der Verwendung eines Präprozessors verschachtelt wäre:

<span><span>.c-segment-controls.is-active</span> {
</span>  <span><span>.c-segment-controls__panel</span> {
</span>    <span>background-color: #fafafa;
</span>    <span>border: 1px solid #aaa;
</span>    <span>opacity: 1;
</span>    <span>transition: opacity 0.5s ease;
</span>  <span>}
</span><span>}</span>

Sechs Wörter reichen für einen Kommentar aus, um anzuzeigen, was dieser Codeblock tut, sodass jemand das Dokument überfliegen und entweder anhalten oder vorang wird.

<span><span>.c-segment-controls.is-active</span> {
</span>
  <span>/* Active state for segment controls panel */
</span>
  <span><span>.c-segment-controls__panel</span> {
</span>    <span>background-color: #fafafa;
</span>    <span>border: 1px solid #aaa;
</span>    <span>opacity: 1;
</span>    <span>transition: opacity 0.5s ease;
</span>  <span>}
</span><span>}</span>

zu erklären, warum! Wichtig könnte erforderlich sein

wir sehen oft! Wichtig und angenommen, wir betrachten den Legacy -Code oder einen schmutzigen Hack:

<span><span>.c-accordion-container.ng-hide</span> {
</span>  <span>display: block !important;
</span><span>}</span>

Bei näherer Betrachtung überschreiben wir nur das Standardverhalten eines Frameworks.

/**
 * Overriding some rogue Angular code.
 * Forces `display: block` so that the element can be animated.
 */

<span><span>.c-accordion-container.ng-hide</span> {
</span>  <span>display: block !important;
</span><span>}</span>

zu erklären, warum ein Codeblock ausgezeichnet wurde, anstatt nur

zu löschen

Wenn wir uns den Codeblock unten ansehen, können wir davon ausgehen, dass das Löschen in Ordnung ist. Sicher wird es nirgendwo verwendet? Wenn ich es lösche, wird es trotzdem im Versionskontrolle sein, wenn wir es später brauchen, oder?

<span>// .c-segmented-button__icon {
</span><span>//   transform: translateY(calc((40px - 100%)/2));
</span><span>// }</span>

Aber wenn wir es löschen, kann jemand nicht einmal wissen, dass es überhaupt existiert. Es könnte eine gute Idee sein, dies hier zu lassen:

/**
 * Calculation for vertical alignment.
 * Can be used when IE11 support is dropped.
 */

<span>// .c-segmented-button__icon {
</span><span>//   transform: translateY(calc((40px - 100%)/2));
</span><span>// }</span>

Andere Arten von Dokumentation

Dokumentation ist wirklich wichtig und nicht nur auf Kommentare im Code beschränkt. Wenn wir mit einer Aufgabe erledigt sind, können wir sie überprüft.

Meldungen bestimmen

Wenn wir die Versionskontrolle verwenden (z. B. Git), können wir das, was wir über das Schreiben von nützlichen Kommentaren in Code wissen, annehmen und dies auf unsere Festungsnachrichten anwenden.

Schlechte Commit -Nachrichten geben nicht viel Kontext. Sie sehen schlampig aus und können schwer zu verstehen sein. Sie sind nicht hilfreich für Versionshinweise. Für einen Entwickler kann es schwierig sein, zu wissen, was sich geändert hat. Schlechte Festungsnachrichten sehen oft so aus.

commit 2faa2
    wip
commit 591ad
    tried to fix some weird box
commit af830
    made the triangle thing work
commit bd02a
    refactor
commit bed4b
    hotfix navigation
commit 22fe0
    oops

Ein besseres Beispiel würde beschreiben, indem ein Verb, die in einem Commit erledigte Aufgabe erledigt ist. Verschiedene kleinere Aufgaben würden über verschiedene Commits verteilt.

<span>// Update this with how many hours you have spent on this file:
</span><span>// TIME_WASTED = 438;</span>

Karma hat einen ziemlich einfachen Leitfaden zum Schreiben besserer Commits, während Chris Beams eine sehr ausführliche Anleitung hat. David DeMaree schrieb sogar einen Artikel mit dem Titel „The Art of the Commit“. Botschaften begehen, verdienen definitiv etwas Aufmerksamkeit.

Pull -Anfragen

Nachdem Sie eine Handvoll Commits geschrieben haben, erstellen Sie normalerweise eine Pull -Anfrage, die sich eines Ihrer Kollegen ansehen kann. Ich habe zu viele Zuganfragen gesehen, die nur sehr wenig Details oder überhaupt keine Beschreibung haben:

Wenn Sie eine Pull -Anfrage schreiben, erwarten Sie normalerweise, dass jemand Ihren Code überprüft. Um diese Person zu unterstützen und den Prozess zu erleichtern, sollten Sie eine Beschreibung dessen schreiben, was die Pull -Anfrage beinhaltet. Dies ist meine mentale Checkliste:

• Ticketnummer, Aufgabenummer oder Ausgabennummer
• erwähnen Sie die Aufgabe in einigen Wörtern
• Erwähnen Sie, welche Arten von Dateien ich geändert habe
• Wenn es sich um einen Fehler handelte, erwähnen Sie, wie der Fehler vor und nach den Änderungen war
• Beschreiben Sie das erwartete Verhalten nach den Änderungen (sollte es gleich sein?)
• Listen Sie alle Schritte auf, die unternommen werden müssen, um die Änderungen entweder im Browser oder im Code
zu überprüfen
• Beachten
Einschließen Sie nach Bedarf Screenshots der Schnittstelle

Dieses Beispiel ist relativ einfach, und Sie müssen definitiv nicht alles in die obige Liste aufnehmen, wenn es nicht erforderlich ist:

Schlussfolgerung

Obwohl ich einige Beispiele dafür gegeben habe, wo ich Kommentare und einige Vorschläge zur Vermeidung einbeziehen soll, gibt es keine harten und schnellen Regeln darüber, wie Kommentare in Ihrem Code formatiert werden können. Die Anzahl der Zeilen, Wörter oder welche Informationen sind bei Ihnen oder können zwischen Ihnen und Ihren Kollegen entschieden werden. Solange Sie das Format konsistent halten, wird es die Dinge aufgeräumt und andere Personen ermutigen, die mit dem Code arbeiten, um dasselbe zu tun.

Es gibt viele Vorteile, die mit dem Kommentar zu einem Teil Ihres Entwicklungsprozesses verbunden sind. Es ist gut, sich an die Gewohnheit zu bringen, sie dort einzubeziehen, wo Sie es für richtig halten, insbesondere wenn Sie viele Menschen haben, die an denselben Dateien arbeiten. Es hilft auch, andere Dokumentationsformen zu berücksichtigen, die in Workflows - wie Festnetznachrichten und Anfragen eingebettet sind - und nicht nur ein externes Dokument der Richtlinien.

Befolgen Sie Richtlinien für das Kommentieren von Code? Oder vielleicht arbeiten Sie in einem Unternehmen, das eine andere, aber effektive Art von Dokumentation hat?

häufig gestellte Fragen (FAQs) zu HTML- und CSS -Kommentaren

Welche Bedeutung hat die Verwendung von Kommentaren in HTML und CSS? Erstens helfen sie beim Verständnis der Codestruktur und -funktionalität, insbesondere wenn sie in einem Team arbeiten oder Ihren Code nach langer Zeit erneut besuchen. Zweitens können sie verwendet werden, um bestimmte Teile Ihres Codes während des Debuggens vorübergehend zu deaktivieren. Zuletzt können Kommentare für jeden, der den Code liest, nützliche Informationen oder Anweisungen liefern.

. Zum Beispiel

. In CSS werden Kommentare gemacht, indem der Text zwischen /* und

/gewickelt wird. Zum Beispiel /

Dies ist ein Kommentar * /.

Können Kommentare die Leistung meiner Website beeinflussen? Sie werden vom Browser während des Rendering -Prozesses ignoriert. Übermäßige Kommentare können jedoch die Dateigröße erhöhen, die sich geringfügig auf die Ladezeit auswirken kann. präzise und dennoch beschreibend sein, komplexe oder wichtige Codeabschnitte kommentieren und unnötige oder redundante Kommentare vermeiden. Es ist auch eine gute Praxis, Ihre Kommentare regelmäßig zu aktualisieren, um Änderungen in Ihrem Code widerzuspiegeln. Kann ich Kommentare verwenden, um Code vor bestimmten Browsern auszublenden? Bestimmte Browser. Diese Technik, die als bedingte Kommentare bezeichnet wird, wird häufig verwendet, um verschiedene Stile oder Skripte für verschiedene Versionen von Internet Explorer bereitzustellen. Wie kann ich Kommentare zum Debuggen verwenden? durch vorübergehende Deaktivierung bestimmter Teile Ihres Codes. Dies kann Ihnen helfen, problematische Abschnitte Ihres Codes zu isolieren und zu identifizieren. Der Versuch kann zu unerwarteten Ergebnissen führen. In CSS können Sie Kommentare nisten, aber es wird im Allgemeinen nicht empfohlen, da Ihr Code schwieriger zu lesen und zu verstehen kann. > Einzelzeilen-Kommentare werden für kurze Erläuterungen oder Anmerkungen verwendet, während Multi-Line-Kommentare für längere Beschreibungen oder Codeblöcke verwendet werden. In HTML sind alle Kommentare technisch multi-line. In CSS beginnen Einzelzeilen-Kommentare mit // und enden am Ende der Zeile, während Multi-Line-Kommentare mit / * beginnen und mit * /.

Sonderzeichen in meinen Kommentaren verwenden?

Ja, Sie können Sonderzeichen in Ihren Kommentaren verwenden. In HTML sollten Sie jedoch vermeiden, die Zeichen „ -“ in Ihren Kommentaren zu verwenden, da sie den Kommentar vorzeitig enden können.

Wie kann ich Kommentare verwenden, um die Lesbarkeit meines Codes zu verbessern? Sie können auch verwendet werden, um verschiedene Abschnitte Ihres Codes zu trennen, was die Navigation erleichtert. Es ist jedoch wichtig, ein Gleichgewicht zwischen Kommentaren und Überwachung zu erreichen. Zu viele Kommentare können Ihren Code überladen und schwerer zu lesen machen.

Das obige ist der detaillierte Inhalt vonWie gut sind Ihre HTML- und CSS -Kommentare?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!