Das Arbeiten mit Cascading Style Sheets (CSS) kann für Anfänger schwierig sein. Mit CSS können Sie das Aussehen Ihrer Anwendung strukturieren, aktualisieren und pflegen. Aber die Sprache erfordert Fähigkeiten, um HTML-Seiten zu manipulieren, um das gewünschte Layout zu erhalten.
Hier sind einige Fehler, die Sie bei der Arbeit mit CSS vermeiden sollten. Sie sparen Zeit und erleichtern Ihren Entwicklungsprozess.
1. Verwendung von px für Schriftgrößen
Die Einheit "px" steht für Pixel. Sie können es verwenden, um verschiedene Längen auf einer Webseite auszudrücken, von der Breite und Höhe eines Elements bis zu seiner Schriftgröße.
px sperrt Ihr Design jedoch für alle Bildschirme auf eine feste Größe. Ein Bild in px kann die volle Breite eines Bildschirms einnehmen und nur einen kleinen Teil eines anderen. Wenn Sie ein proportionaleres Element wünschen, Relativmaße verwenden wie rem oder Prozentsätze (%).
Das beste relative Maß ist rem. Diese Einheit bezieht sich auf die Schriftgröße des Root-Elements, die ein Leser oft in seinen Browsereinstellungen festlegen kann. Sie können die Auswirkungen von px und rem auf ein Element im folgenden Beispiel sehen:
html>
<HTML>
<Kopf>Kopf>
<Körper>
<h1>Das ist Überschrift 1h1>
<h2>Das ist Überschrift 2h2>
<P>Dies ist ein Absatz.P>
<P>Dies ist ein weiterer Absatz.P>
Körper>
html>Sie können die Schriftgrößen in diesem Dokument mithilfe von px-Einheiten mit dem folgenden CSS formatieren:
h1 {
Schriftgröße: 50px;
}h2 {
Schriftgröße: 30px;
}
P {
Schriftgröße: 15px;
}
Die resultierende Seite sieht akzeptabel aus, wenn Sie sie auf einem großen Bildschirm anzeigen:
Aber es sieht auf einem kleineren Bildschirm, wie auf einem Telefon, nicht präsentabel aus:
Als nächstes wenden Sie rem auf denselben Inhalt an. Geben Sie eine Basisschriftgröße für das HTML-Element an und passen Sie andere Elemente mit rems an, wie unten dargestellt:
html {
Schriftgröße: 16px;
}h1 {
Schriftgröße: 3Rest;
}h2 {
Schriftgröße: 2Rest;
}
P {
Schriftgröße: 1Rest;
}
Beachten Sie den Unterschied zwischen großen und kleinen Bildschirmen. Mit rem skaliert der Inhalt unabhängig von der Bildschirmgröße besser. Die Elemente werden niemals die eingestellte Bildschirmgröße überschreiten. Aus diesem Grund ist es besser, relative Längen anstelle von Pixeln zu verwenden.
Auf einem Desktop-Bildschirm:
Auf einem kleinen Bildschirm ist Text in Rem-Einheiten immer noch lesbar:
2. Speichern Sie alle Ihre Stile in einer Datei
Die Verwendung einer CSS-Datei für ein großes Projekt kann ein Durcheinander verursachen. Sie werden eine Datei mit langen Codezeilen haben, die beim Aktualisieren verwirrend sein wird. Versuchen Sie, verschiedene Dateien für CSS-Stylesheets für verschiedene Komponenten zu verwenden.
Beispielsweise können Sie unterschiedliche Dateien für Navigation, Kopf- und Fußzeile haben. Und eine weitere für Schnitte am Körper. Das Trennen Ihrer CSS-Dateien hilft, Ihre App zu strukturieren und die Benutzerfreundlichkeit des Codes zu fördern.
3. Unsachgemäße Verwendung von Inline-CSS
In Vanilla CSS können Sie Stile auf den HTML-Seiten schreiben, genau wie auf CSS-Frameworks wie Bootstrap und TailwindCSS. Mit Inline-CSS können Sie einem HTML-Element einen einzigartigen Stil zuweisen. Es verwendet das style-Attribut des HTML-Elements.
Der folgende Code ist ein Beispiel für Inline-CSS.
<h2Stil="Farbe grün;">Dies ist eine grüne Überschrifth2>
<PStil="Farbe Rot;">Das ist ein roter Absatz.P>
Der Text wird wie folgt angezeigt:
Allerdings kann HTML nur mit Inline-CSS chaotisch sein. Da es keinen anderen Speicherort für CSS gibt, existiert das gesamte CSS in derselben Datei wie das HTML. Es wird überfüllt aussehen. Das Bearbeiten einer solchen Datei ist schwierig, insbesondere wenn es sich nicht um Ihren Code handelt.
Außerdem müssen Sie mit Inline-CSS Code für jedes Element schreiben. Dies erhöht die Wiederholung und reduziert die Wiederverwendung von Code. Verwenden Sie immer eine Kombination aus externen Stylesheets und Inline-CSS, um Ihre Webseiten zu gestalten.
4. Überbeanspruchung von !wichtig
Bei CSS ist die !wichtig Regel fügt einer Eigenschaft/einem Wert mehr Bedeutung hinzu. Es überschreibt andere Stilregeln für diese Eigenschaft auf diesem Element.
Sie sollten nur wenige haben !wichtig Regeln in Ihrem Code. Verwenden Sie es nur bei Bedarf. Es hat keinen Sinn, Code zu schreiben und ihn dann zu überschreiben. Ihr Code sieht chaotisch aus und verursacht Probleme, wenn er auf einigen Geräten ausgeführt wird.
html>
<html>
<Kopf>Kopf>
<Körper>
<P> Ich bin orange P>
<PKlasse="meine Klasse"> Ich bin grün P>
<PAusweis="meine ID"> Ich bin blau. P>
Körper>
html>CSS:
#meine ID {
Hintergrundfarbe: Blau;
}.meine Klasse {
Hintergrundfarbe: Grün;
}
P {
Hintergrundfarbe: orange !wichtig;
}
Das Ergebnis sieht so aus:
5. Nichteinhaltung von Namenskonventionen
CSS hat Namenskonventionen, die Entwickler beim Schreiben von Standardcode anleiten. Dies ist wichtig, wenn Sie am Ende sind Debuggen der CSS-Datei zu einem späteren Zeitpunkt.
Einer dieser Standards beinhaltet die Verwendung von Bindestrichen, um gruppierte Wörter zu trennen. Eine andere ist die Benennung eines Selektors nach seiner Funktion. Wer es sich anschaut, muss also nicht raten. Es erleichtert auch das Lesen, Pflegen und Teilen von Code. Zum Beispiel:
An Stelle von:
.image1 { Rand links: 3%; }Schreib es so:
.boy-Bild { Rand links: 3%; }Wenn Sie sich das Stylesheet ansehen, wissen Sie genau, für welches Bild der Code bestimmt ist. HTML/CSS-Styleguide von Google listet viele weitere Konventionen auf, die jeder Entwickler kennen sollte.
Das Schreiben von Kommentaren ist die am meisten unterschätzte Fertigkeit beim Programmieren. Viele Leute vergessen, Kommentare zu schreiben, um ihren Code zu erklären. Aber es spart Zeit. Kommentare sind für das Lesen und Pflegen von Code unerlässlich.
Da CSS lose strukturiert ist und jeder seine eigenen Konventionen entwickeln kann, sind Kommentare unerlässlich. Es hat sich bewährt, gut strukturierte Kommentare zur Erläuterung Ihres Stylesheets zu verwenden. Sie können Kommentare schreiben, die Abschnitte des Codes erklären und was sie tun.
/* Videoelemente brauchen Platz zum Atmen */
.Video {
Rand-oben: 2em;
}
/* Gestaltung des Heldenbereichs */
.Anrede {
Rand-oben: 1em;
}
7. Nicht im Voraus entwerfen
Viele Leute tun es, aber es ist ein schwerer Fehler, ohne Plan mit dem Programmieren zu beginnen. CSS bestimmt, wie die Struktur Ihres Frontends aussieht. Das Design sagt viel über Ihre Programmierkenntnisse aus.
Ein Design für Ihre Website verdeutlicht Ihre Vision und die erforderlichen Ressourcen, um Sie dorthin zu bringen. Machen Sie sich ein Bild von Ihrem Projekt. Dann gestalten Sie es auf Papier oder verwenden Sie es ein Design-Toolkit wie Canva zu visualisieren, was Sie wollen.
Wenn Sie sich ein vollständiges Bild des Projekts gemacht haben, stellen Sie alle Ihre Ressourcen zusammen und beginnen Sie mit dem Programmieren. Sie sparen Zeit und Redundanz.
Warum Sie diese Empfehlungen berücksichtigen sollten
Wenn Sie Anwendungen im Web entwickeln, verwenden Sie CSS. Gutes Arbeiten mit CSS erfordert Übung und das Befolgen der Standardkonventionen. Konventionen machen Ihren Code nicht nur lesbar, sondern auch wartbar.
Das Schreiben von standardisiertem Code spart Ihnen Zeit und Mühe. Die Zeit, die Sie für die Formatierung des Frontends aufgewendet hätten, können Sie für komplexere Funktionen aufwenden. Es stellt auch sicher, dass Sie Code wiederverwenden und mit anderen teilen können. Schreiben Sie besseren Code, indem Sie den festgelegten Konventionen folgen, und werden Sie ein besserer Entwickler.
