Clean Code: Warum HTML/CSS-Essentials immer noch wichtig sind

Während meiner 15-jährigen Erfahrung in der Webentwicklung habe ich mit verschiedenen Unternehmen zusammengearbeitet, von der Unternehmensebene bis hin zu Startups, und ich habe auf meinem Weg mit vielen, vielen anderen Softwareentwicklern zusammengearbeitet. Eines der häufigsten und wichtigsten Probleme, auf die ich in meinen Projekten gestoßen bin, war das Versäumnis, sauberen und leicht verständlichen Code zu schreiben .

Selbst die besten Entwickler von erstklassigen Unternehmen befolgen nicht immer Best Practices und schreiben Code, der bereinigt und optimiert werden kann.

Die Folgen von Messy und Dirty Code

Um einen alten, aber immer noch relevanten Blogbeitrag zu zitieren, in dem die Prinzipien von sauberem Code diskutiert werden:

Quellcode ist mit Finanzschulden vergleichbar. Angenommen, Sie möchten ein Haus kaufen, um darin zu leben. Die meisten Menschen haben nicht die finanziellen Mittel, um ein Haus bar zu bezahlen, also nehmen Sie stattdessen eine Hypothek auf. Aber die Hypothek selbst ist keine großartige Sache. Es ist eine Verbindlichkeit. Sie müssen jeden Monat Zinsen auf Ihre Schulden zahlen …

So auch in der Webentwicklung. Der Code hat laufende Kosten. Man muss es verstehen, man muss es pflegen, man muss es im Laufe der Zeit an neue Ziele anpassen. Je mehr Code Sie haben, desto höher werden diese laufenden Kosten sein. Es liegt in unserem besten Interesse, so wenig Quellcode wie möglich zu haben und dennoch unsere Geschäftsziele erreichen zu können.

Aber verweilen wir nicht beim Abstrakten. Dieser Artikel behandelt grundlegende Prinzipien für sauberen Code, verschiedene Techniken zum Organisieren von Code und wie man ihn wartbarer, skalierbarer und einfacher zu debuggen macht.

Qualitativ hochwertiger Code beginnt mit grundlegendem Code-Styling und erweitert sich zu Best Practices beim Schreiben großer Apps in HTML/CSS mit vielen wiederverwendbaren Blöcken. Wir werden auch Namenskonventionen diskutieren, um eine bessere implizite Lesbarkeit zu schaffen, sowie Frameworks von Drittanbietern und ihre Best Practices.

Wenn Sie dies gelesen haben, sollten Sie ein gutes Verständnis der Grundlagen von Qualitätscode haben und wissen, wie Sie Ihren HTML- und CSS-Code einfacher zu warten und erweitern können.

Code-Styling-Grundlagen

Beginnen wir mit den Grundlagen guten HTML- und CSS-Codes: W3C-Gültigkeit, Namenskonventionen, Dateistruktur und so weiter.

Achten Sie vom ersten Tag an auf die Struktur.

Wenn Sie eine große App entwickeln, müssen Sie sich um die Dateistruktur kümmern. Das kann bzw. sollte so aussehen:

Verwenden Sie Validatoren, um Ihren Code zu überprüfen.

Versuchen Sie, immer HTML- und CSS-Validatoren zu verwenden.

Schlechter Code:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Guter Code:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Verwenden Sie alternativen Text für <img> -Tags, um die Prinzipien des sauberen Codes zu erfüllen.

Dieses Attribut spielt eine wichtige Rolle für SEO, Suchmaschinen, Webcrawler, Screenreader usw.

Schlechter Code:

 <img src="demo.jpg">

Guter Code:

 <img src="demo.jpg" alt="This is placeholder of the image">

Verwenden Sie Döner-Fall (Wirbelsäulen-Fall).

Versuchen Sie für Namen kebab kebab-case ( spinal-case ) und nicht camelCase oder under_score . Verwenden Sie under_score nur, wenn Sie BEM verwenden, aber wenn Sie Bootstrap verwenden, ist es besser, konsistent zu bleiben und mit - als Trennzeichen zu gehen.

Schlechter Code:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Guter Code:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case ist besser lesbar als camelCase und under_score .

Verwenden Sie aussagekräftige Namen, die von jedem verstanden werden können, halten Sie sie kurz.

Die Namen der Klassen sollten wie .noun-adjective aussehen.

Versuchen Sie, allgemeine Namen von Klassen zu verwenden, anstatt inhaltsspezifische Namen zu schreiben. Es macht Code besser lesbar

Schlechter Code:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Guter Code:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

Schreiben Sie keine Typattribute für Stylesheets und Skripte in HTML5.

Sie sind bei HTML5 nicht erforderlich, werden aber von den W3C-Standards in HTML4/XHTML benötigt.

Schlechter Code:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Guter Code:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

Verwenden Sie bei Bedarf bestimmte Klassen.

Halten Sie den CSS-Selektor spezifischer und wählen Sie die benötigten Elemente aus; Versuchen Sie, ihre Eltern nicht zu erwähnen, wenn dies nicht erforderlich ist. Dadurch kann der Code schneller gerendert und alle Hindernisse bei der Verwaltung in Zukunft beseitigt werden

Schlechter Code:

 section aside h1 span { margin-left: 25%; }

Guter Code:

 .left-offset { margin-left: 25%; }

Das Anwenden einer Klasse auf das Zielelement kann zwar mehr Code in HTML erstellen, ermöglicht jedoch eine schnellere Darstellung des Codes und beseitigt alle Verwaltungshindernisse.

Fügen Sie dem übergeordneten Element eine Klasse hinzu, wenn Sie demselben Block einen anderen Stil geben möchten.

Wenn Sie denselben Block, aber mit unterschiedlichem Stil verwenden müssen, versuchen Sie, den HTML-Code so unberührt wie möglich zu lassen. Fügen Sie dem übergeordneten Element einfach eine Klasse hinzu und wenden Sie alle neuen Stile auf die untergeordneten Elemente dieser Klasse in CSS an.

Schlechter Code:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Guter Code:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Drop-Einheiten von Nullwerten.

Das Hinzufügen der Einheit ist unnötig und bietet keinen zusätzlichen Wert. Es gibt keinen Unterschied zwischen 0px, 0em, 0% oder anderen Nullwerten. Die Einheiten sind nicht wichtig, da der Wert immer noch Null ist.

Schlechter Code:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Guter Code:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Schreiben Sie nicht border-bottom in CSS, wenn Sie ein hr -Tag hinzufügen können.

Verwenden Sie das hr -Tag, anstatt einen neuen Selektor zu schreiben und Rahmenstile in CSS hinzuzufügen. Es macht den Code Markup-basierter, und genau das wollen wir.

Schlechter Code:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Guter Code:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Verwenden Sie den A > B-Selektor.

Es ist sehr hilfreich, den A > B -Selektor zu verwenden, der Regeln nur auf direkte untergeordnete Elemente anwendet. In diesem Fall müssen Sie die Stile aller anderen untergeordneten Elemente, die diesen Stil nicht benötigen, nicht zurücksetzen. Es ist zum Beispiel sehr nützlich, wenn verschachtelte Menüs codiert werden. Sie müssen die Stile der Untermenüs nicht neu definieren.

Schlechter Code:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Guter Code:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

So schreiben Sie sauberes HTML

Bei HTML geht es vorrangig darum, ein robustes und einfach zu wartendes Frontend zu gewährleisten.

Versuchen Sie, ein möglichst markupbasiertes Frontend zu haben.

Machen Sie Ihren Front-End-Code Markup-basiert, anstatt zu viel CSS zu schreiben.

Dies wird Suchmaschinen helfen und Ihren Code besser lesbar machen, wodurch Suchrankings und Benutzererfahrung möglicherweise verbessert werden.

Schlechter Code:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Guter Code:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Vermeiden Sie unnötige Wrapper in HTML.

Versuchen Sie, keine unnötigen Wrapper-Elemente in HTML zu verwenden. Unmengen von <div> - und <span> -Elementen zu haben, gehört der Vergangenheit an. Wenn Sie die Dinge granular und linear halten, können Sie minimalen Code erreichen (siehe nächster Punkt).

Schlechter Code:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Guter Code:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Verwenden Sie atomare Klassen für das Styling.

Verwenden Sie keine benutzerdefinierten Farben oder Schriftgrößen (wenn die Farbe oder Schriftgröße nicht im Framework enthalten ist, fügen Sie einfach Ihre atomaren Klassen hinzu). Atomare Klassen sind einfache Stileinheiten für einen einzigen Zweck. Ähnlich wie Inline-Stile wenden atomare Stile nur eine einzige Stildeklaration an.

Schlechter Code:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Guter Code:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Versuchen Sie, granulare und atomare Klassen beizubehalten, und verwenden Sie sie bei Bedarf. Dadurch wird Ihr Front-End stärker auf Markups ausgerichtet.

Nutzen Sie semantische Elemente.

Die Verwendung von Semantik sorgt für eine bessere Struktur und macht den Code und Inhalt leichter lesbar.

Schlechter Code:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Guter Code:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Verwenden Sie HTML5-Tags.

Die neuen Tags geben Ihnen mehr Ausdrucksfreiheit und standardisieren gemeinsame Elemente, was die automatisierte Verarbeitung von Dokumenten verbessert. Hier ist eine solide Liste aller Elemente. Ich habe festgestellt, dass viele Entwickler immer viel <div> und <span> verwenden, aber überprüfen Sie bitte zuerst hier, welche Tags logisch in Ihren Kontext passen:

Schlechter Code:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Guter Code:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Fazit: Lernen und verwenden Sie neue Elemente in HTML5. Es lohnt sich!

CSS: Sauberer Code und Präprozessoren

Wenn es um CSS geht, ist es schwer, nicht mit ein paar unoriginellen, aber frechen Ratschlägen zu beginnen:

Verwenden Sie einen CSS-Präprozessor.

Sass ist die ausgereifteste, stabilste und leistungsstärkste professionelle CSS-Erweiterungssprache der Welt.

Für Sass stehen zwei Syntaxen zur Verfügung. Das erste, bekannt als SCSS (Sassy CSS) und in dieser Referenz verwendet, ist eine Erweiterung der CSS-Syntax. Die zweite und ältere Syntax, bekannt als eingerückte Syntax (oder manchmal einfach „Sass“), bietet eine prägnantere Art, CSS zu schreiben.

Gruppieren Sie Ihre Selektoren: Verwenden Sie @extend in SASS.

Indem Sie Ihre Selektoren gruppieren oder @extend in SASS verwenden, sollten Sie dazu beitragen, dass Ihr Code TROCKEN bleibt (wiederholen Sie sich nicht).

Schlechter Code:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Guter Code:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Verwenden Sie in CSS Rem-Einheiten anstelle von Pixeln.

Verwenden Sie REMs für Größen und Abstände, zum Beispiel Schriftgrößen, die es basierend auf der font-size des <html> -Stammelements erstellt. Sie ermöglichen es Ihnen auch, ein ganzes Projekt schnell zu skalieren, indem Sie die Stammschriftgröße ändern (z. B. bei einer bestimmten Medienabfrage / Bildschirmgröße).

Sie schreiben weniger Code für responsive Ansichten:

Schlechter Code:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Guter Code:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Versuchen Sie, in CSS eine feste Höhe oder Breite zu vermeiden.

Versuchen Sie, in CSS eine feste Höhe oder Breite zu vermeiden. Höhen können durch inneren Inhalt + Paddings erzeugt werden und Breiten können durch ein Rastersystem definiert werden (ggf. verschachteltes Raster verwenden).

Schlechter Code:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Guter Code:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Stellen Sie sicher, dass Sie das übergeordnete Element nur einmal in SCSS verwenden.

Wenn Sie einen CSS-Präprozessor verwenden und planen, Stile für einen beliebigen Abschnitt zu schreiben, stellen Sie sicher, dass Sie das übergeordnete Element in CSS nur einmal verwenden und alle untergeordneten Elemente und Medienabfragen in seine Klammern einfügen. Auf diese Weise können Sie das übergeordnete Hauptelement einfach an einem Ort finden und ändern , wenn Sie in Zukunft Änderungen vornehmen.

Schlechter Code:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Guter Code:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Überlegen Sie, welche Elemente betroffen sind, bevor Sie eine CSS-Regel schreiben.

Denken Sie immer darüber nach, welche Elemente betroffen sind, bevor Sie eine CSS-Regel schreiben. Wenn Ihre Änderungen nicht üblich sind, schreiben Sie Ihre Regeln so, dass sie nur ein bestimmtes Element und nichts anderes betreffen.

Schlechter Code:

 /* Commonly used class */ .title { color: #008000; }

Guter Code:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Versuchen Sie, nach vorhandenen CSS-Regeln und -Variablen zu suchen, bevor Sie neue schreiben.

Suchen Sie immer nach bestehenden Regeln, die zum gewünschten Stil passen, sowohl im benutzerdefinierten CSS als auch im Framework. Nur wenn nichts Passendes vorhanden ist, fahren Sie mit dem Schreiben eines neuen fort.

Dies ist besonders wichtig, wenn Sie mit großen Apps arbeiten.

Schlechter Code:

 .jumbotron { margin-bottom: 20px; }

Guter Code:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Verwenden Sie spezifische Regeln.

Wenn der Hintergrund eine Eigenschaft hat, geben wir diese Eigenschaft an, aber wenn er andere Hintergrundeigenschaften hat, können wir ihm eine Deklaration geben.

Schlechter Code:

 .selector { background: #fff; }

Guter Code:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Verwenden Sie abgekürzte Eigenschaften und Werte.

Geben Sie Ihr Bestes, um mehr abgekürzte Eigenschaften und Werte zu verwenden. Mithilfe einer Kurzschrifteigenschaft können Sie prägnante und in den meisten Fällen viel besser lesbare Stylesheets schreiben und so wertvolle Zeit und Energie sparen.

Schlechter Code:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Guter Code:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Verwenden Sie em anstelle von px für die Zeilenhöhe.

Die Verwendung von em und px -Einheiten gibt uns Flexibilität in unseren Designs und die Möglichkeit, Elemente nach oben und unten zu skalieren, anstatt an feste Größen gebunden zu sein. Wir können diese Flexibilität nutzen, um unsere Designs während der Entwicklung einfacher anzupassen und reaktionsschneller zu machen, und Browserbenutzern ermöglichen, die Gesamtskalierung von Websites für maximale Lesbarkeit zu steuern.

Schlechter Code:

 p { font-size: 12px; line-height: 24px; }

Guter Code:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Verwenden Sie so oft wie möglich Bootstrap-Klassen.

Während diese Regel für UI-Frameworks im Allgemeinen gelten könnte, verwende ich Bootstrap als Beispiel, da es die weltweit beliebteste Front-End-Komponentenbibliothek ist.

Mit Bootstrap können Sie viele fertige Klassen verwenden, was Ihre Arbeit erleichtert. Versuchen Sie, Bootstrap-Klassen so oft wie möglich zu verwenden, um mehr HTML-basiertes Markup zu erstellen.

Schlechter Code:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Guter Code:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Passen Sie Ihr Framework richtig an.

Bootstrap stützt sich auf die Datei variables.scss, mit der Sie Ihr Front-End einfach konfigurieren und anpassen können, ohne eine einzige Codezeile schreiben zu müssen. Andernfalls, wenn Sie alle Anpassungen manuell selbst schreiben, sollten Sie besser überhaupt kein Framework verwenden.

Einige Entwickler vermeiden es, variables.scss zu ändern, weil sie glauben, dass sie Bootstrap immer noch ohne großen Aufwand auf eine neue Version aktualisieren können, aber es kann eine mühsame Aufgabe sein. Selbst kleinere Updates erfordern, dass Entwickler das Änderungsprotokoll lesen, alle Markups und CSS durchgehen und manuell auf die neue Version migrieren.

Schlechter Code:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Guter Code:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

.container width nicht überschreiben.

Versuchen Sie, die Breite von .container nicht zu überschreiben. Versuchen Sie stattdessen, ein Rastersystem zu verwenden, oder ändern Sie einfach die Containerbreite in _variables.scss . Wenn Sie die Breite verringern müssen, verwenden Sie einfach max-width anstelle von width. In diesem Fall .container von Bootstrap in responsiven Ansichten unberührt.

Schlechter Code:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Guter Code:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Verwenden Sie Bootstrap 4-Klassen und schreiben Sie weniger CSS.

Beginnen Sie mit der Verwendung von Bootstrap 4, auch wenn es sich noch in der Beta-Phase befindet. Es enthält viele neue Klassen, mit denen Sie Layouts schneller erstellen können, insbesondere Flexbox und Abstandshalter.

Schlechter Code:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Guter Code:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Jetzt können wir einem Element Klassen zuweisen, um alle Grenzen oder einige Grenzen zu entfernen.

Schlechter Code:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Guter Code:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Verwenden Sie .col-sm-X , wenn .col-md-X und .col-lg-X denselben Wert für X haben.

Schreiben Sie nicht .col-md-X und .col-lg-X , wenn .col-sm-X den gleichen Wert für X hat. Beispielsweise besteht keine Notwendigkeit, .col-lg-10 zu schreiben, denn wenn wir schreiben, müssen wir .col-lg-10 schreiben .col-md-10 , wir fügen automatisch .col-lg-10 darin ein.

Schlechter Code:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Guter Code:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Verwenden Sie nicht .col-xs-12 .

Verwenden Sie nicht .col-xs-12 , denn wenn kein .col-xs-X zugewiesen ist, wird es .col-xs-12 sein.

Schlechter Code:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Guter Code:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Verwenden Sie nicht reset.css ; Verwenden Sie stattdessen normalize.css .

Wenn Sie Bootstrap verwenden, ist normalize.css dort bereits enthalten, sodass Sie es nicht zweimal einfügen müssen.

Befolgen Sie die Richtlinien, auch wenn sie keine Best Practice sind.

Aus Gründen der Konsistenz ist es besser, immer die Regeln und Richtlinien zu befolgen, mit denen Sie begonnen haben (ob es um Benennung, Codestil oder Dateistruktur geht).

Einpacken

Ich hoffe, Sie konnten etwas Hilfreiches mitnehmen und denken mehr darüber nach, minimalen HTML- und CSS-Code mit Best Practices zu schreiben.

Für große Unternehmen ist es ziemlich schwierig, große Anwendungen zu warten, wenn es unordentlichen Code gibt. Und natürlich haben große Unternehmen das Geld, um für gute Qualität zu bezahlen. Wenn Sie den Prinzipien der sauberen Codierung folgen, verbessern Sie Ihre Chancen auf einen guten Job. Es lohnt sich auch, den freiberuflichen Aspekt anzusprechen: Profis, die mehrere Projekte und Kunden jonglieren, müssen sauberen Code liefern , der in kürzester Zeit an andere Entwickler weitergegeben werden kann.

Ich hoffe, in zukünftigen Beiträgen auf fortgeschrittenere Themen eingehen zu können, da ich beabsichtige, über die Automatisierung des Codierungsprozesses, die Verwendung von Gulp/Grunt-Aufgaben, Linters, Editor-Plugins, Tools, die Code generieren, KI-Tools, die Code anstelle von Ihnen schreiben, und andere zu sprechen verwandte Themen.

Ich hoffe, dies war eine interessante und informative Lektüre. Viel Glück bei Ihren Codierungsversuchen.

Weiterführende Literatur im Toptal Engineering Blog:

• Annäherung an SVG-Animationen in CSS