Diese 3 CSS-Fehler solltest du vermeiden

Thumbnail

In diesem Beitrag zeige ich dir 3 typische CSS-Fehler, die täglich gemacht werden und selbstverständlich auch, wie du sie vermeidest!

Ich habe mich in letzter Zeit zu sehr auf das Thema WordPress fokussiert. In den nächsten Wochen möchte ich wesentlich mehr Content zu anderen Themen liefern.

Mit diesem Beitrag kommt weiterer Programmier-Content dazu. Fangen wir also direkt an!

Fehler 1 – Du vermischst Code für Container und Content

Du solltest niemals Code für Container- und Contentelemente vermischen. Die Antwort auf das „Warum?“ ist ziemlich einfach.

Du darfst das Styling einer Komponente nicht vom Ort der Platzierung abhängig machen. Außerdem sollte eine Komponente immer gleich aussehen. Dadurch sparst du auf Dauer nicht nur Code, was dir Ladezeit erspart und die Wartung deines Codes vereinfacht, sondern sorgst zusätzlich für ein einheitliches Design.

Anstatt den Code also direkt in die Klasse des Elements bzw. der Komponente zu schreiben, solltest du einen extra Wrapper dafür anlegen.

Don’t

.tab {
	margin-top: 5%;
  	overflow: hidden;
  	border: 1px solid #bdc3c7;
  	background-color: #ecf0f1;
}

Do

.tab-wrapper {
	margin-top: 5%;
}

.tab {
  	overflow: hidden;
  	border: 1px solid #bdc3c7;
  	background-color: #ecf0f1;
}

Fehler 2 – Du nutzt dauerhaft Magic Numbers

Magic Numbers hören sich nur cool an. Da hört die Magie dann aber auch auf. Als Magic Number bezeichnet man in der Programmierung eine Zahl, die nicht weiter definiert werden kann bzw. deren Sinn nicht selbstverständlich ist.

Oft werden solche Zahlen nur genommen, weil sie funktionieren. Ein kurzes Beispiel. Ein Außenabstand mit 26px sieht nicht gut aus und der mit 28px auch nicht. Aber 27px scheinen absolut perfekt auszusehen.

Dadurch verwendet der Programmierer des Projektes ab sofort 27px für den Außenabstand. Aber sobald er etwas ändern möchte, bricht das komplette Design. Das nennt man Magic Number.

Don’t

.dropdown-menu {
	margin-top: 27px;
}

Do

.dropdown-menu {
	top: 100%;
}

Fehler 3 – Ungenaue Namen für Classen und IDs

Dieser Fehler ist meiner Meinung nach wohl der, der am häufigsten gemacht wird. Du legst mal wieder eine Klasse an und weißt vor lauter Klassen nicht mehr, wie du diese nun nennen sollst.

Also nimmst du den nächstbesten Namen, der dir einfällt. Aber genau dort liegt der Fehler. Denke immer daran, dass du auch in einem Jahr noch wissen musst, wo diese Variable Anwendung findet und was sie bezweckt. Auch müssen sich eventuell andere Entwickler zurechtfinden!

Dementsprechend solltest du immer sinnvolle Namen verwenden. Das Gleiche gilt natürlich auch für IDs, Variablen und Co.!

Don’t

.modal3 {
	... /* code */
}

Do

.dsgvo-modal {
	... /* code */
}

Das waren 3 typische und oft begangene CSS-Fehler, die du unbedingt vermeiden solltest. Ich hoffe, dass dir diese kleine Beitrag gefallen hat. Ich würde mich über Anmerkungen freuen. Bis zum nächsten Mal – dein Maurice!

Maurice Woitzyk

Maurice Woitzyk

Total posts created: 99
Hallo! Ich bin Maurice. Ich komme aus dem wunderschönen Magdeburg und wenn ich nicht gerade in CS:GO verzweifle, vertreibe ich mir meine Zeit mit meinem Blog und Web Design/Web Development.

Leave a reply

Your email address will not be published. Required fields are marked *