7 Wichtige Tipps zum Schreiben von besserem CSS

Eines der größten Probleme bei der Programmierung ist die Wartung. In einem realen Szenario beginnen wir nicht immer damit, Projekte von Grund auf neu zu entwickeln. Meistens wird uns ein Projekt zugewiesen (oder angenommen), das bereits einige Jahre zuvor oder sogar noch länger geschrieben wurde.

Um effizient an diesem Projekt arbeiten zu können, müssen wir zuerst den Quellcode verstehen. Dies ist der Punkt, an dem wir sofort erkennen, wie wichtig sauberer Code ist. Als Entwickler müssen wir versuchen, unseren Code so sauber wie möglich zu schreiben.

Dies gilt auch für CSS. Es gibt einige Punkte, auf die wir beim Schreiben von CSS achten müssen. In diesem Beitrag möchte ich einige der wichtigsten mit Ihnen teilen. Ich glaube, diese 7 Tipps werden Ihnen helfen, die Qualität Ihres CSS-Codes zu verbessern.

Also fangen wir an ... ‌ ‌

1. TROCKEN

DRY steht für "Don't Repeat Yourself" . Dies ist ein allgemeines Prinzip der Softwareentwicklung und kann in jeder Programmiersprache sowie in CSS angewendet werden. Wie wir anhand des Namens verstehen können, zielt DRY darauf ab, Wiederholungen so weit wie möglich zu vermeiden oder zu reduzieren.

Zum Beispiel können wir 3 CSS-Klassen für 3 Schaltflächen wie folgt erstellen:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

Oder wir können das DRY-Prinzip verwenden, indem wir die gemeinsamen Regeln einmal in eine zusätzliche Klasse und die verschiedenen Regeln jeweils in andere Klassen schreiben :

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

Wie wir sehen können, vermeidet die Anwendung des DRY-Prinzips Wiederholungen, verringert die Anzahl der Zeilen und verbessert die Lesbarkeit und sogar die Leistung.

2. Benennen

Die Benennung von CSS-Selektoren ist ein weiterer wichtiger Punkt für das Schreiben von besserem CSS. Der Name eines Selektors sollte selbstbeschreibend und lesbar sein ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

Normalerweise,

ist ein HTML-Tag und steht für Absatz. Oben können wir nicht wirklich verstehen, was Klasse p ist. Außerdem sollten Sie Namen wie vermeiden myFirstForm , und ich rate nicht mit Kamel Fall .

Verwenden Sie stattdessen deklarative Namen (durch einen Bindestrich für mehrere Namen getrennt):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

Ich denke die Namen machen jetzt mehr Sinn :)

Das Benennen von Dingen in der Programmierung ist nicht so einfach, aber es gibt verschiedene Namenskonventionen, die Sie in Ihrem Projekt verwenden können. BEM (Blockelementmodifikator) ist einer von ihnen. Ich habe schon einmal mit BEM gearbeitet und kann es nur empfehlen.

3. Verwenden Sie keine Inline-Stile

Nun, es gibt Argumente im Web darüber: Einige sagen Ihnen, dass Sie niemals Inline-Stile verwenden sollen, während andere argumentieren, dass dies in einigen Fällen nützlich sein kann.

Meiner Meinung nach besteht die beste Vorgehensweise darin, keine Inline-Stile zu verwenden. Ich werde mich hier darauf konzentrieren, warum wir nicht sollten.

Trennung von Bedenken

Nach dem Prinzip der Trennung von Bedenken sollten Design (CSS), Inhalt (HTML) und Logik (JavaScript) aus Gründen wie besserer Lesbarkeit und Wartung getrennt werden.

Das Einfügen von CSS-Regeln in HTML-Tags verstößt gegen diese Regel:

 Some Text 
Wir sollten unsere Styling-Regeln lieber in externen CSS-Dateien behalten.

Schwierigkeiten bei der Suche

Ein weiteres Problem bei der Verwendung von Inline-Stilen besteht darin, dass wir nicht nach ihnen suchen können. Wenn wir also das Styling ändern müssen, suchen wir normalerweise nach CSS-Selektoren des HTML-Elements.

Ändern Sie beispielsweise die Schriftgröße des Texts auf unserer Webseite. Dazu finden wir zuerst den bestimmten Teil im Browser, in dem die Änderung erforderlich ist, indem wir uns die HTML-Struktur ansehen:

 Some Text 

Dann müssen wir den Selektor finden, der hier die fettgedruckte Klasse ist. Schließlich gehen wir zu dieser Klasse und nehmen die Änderungen vor:

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

Wenn die Regeln jedoch inline geschrieben sind, anstatt Klassen zu verwenden:

 Some Text 

Selbst wenn wir das HTML-Tag finden, können wir nicht wissen, ob das HTML andere Regeln für die Schriftgröße enthält oder nicht. Da kein Selektor verwendet wird, müssen wir alle HTML-Seiten einzeln durchgehen, versuchen, die anderen Regeln für die Schriftgröße zu finden und sie auch zu ändern.

Wäre es mit einem CSS-Selektor nicht einfacher? Aber es gibt noch etwas Schlimmeres ...

Probleme mit Spezifität / Überschreiben

Inline-Stile haben die höchste Spezifität unter den CSS-Selektoren (wenn wir nicht zählen ! Wichtige Tags ).

In Anbetracht dessen, dass wir für ein Element sowohl eine Klasse als auch einen Inline-Stil verwenden:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

Hier beträgt die Schriftgröße des Texts 14 Pixel , da Inline-Stile eine höhere Spezifität aufweisen als CSS-Klassen. Wenn Sie eine Änderung in der Klasse vornehmen:

.text-bold { font-size: 20px; font-weight: bold; }

Die Schriftgröße beträgt weiterhin 14px. Ihre Änderung in der CSS-Klasse funktioniert also nicht, sodass Sie am Ende sagen:

"Hey, warum funktioniert mein CSS-Code nicht? Ich hasse CSS!"

und führen Sie dazu, ein ! wichtiges Tag zu verwenden, das die Magie ausübt:

.text-bold { font-size: 20px !important; font-weight: bold; }

Welches ist ein großes Nein-Nein und führt uns zum nächsten Punkt ...

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!