20 CSS-Codierungstipps für mehr Effizienz (sortiert)

In diesem Artikel möchten wir eine Sammlung von 20 nützlichen Regeln und Best Practices mit Ihnen teilen, die von den wichtigsten CSS-Websites empfohlen werden. Einige sind für CSS-Anfänger und andere für Fortgeschrittene. Ich hoffe, dass jeder aus diesem Artikel nützliche Erkenntnisse gewinnen kann.

Okay, fangen wir an.

1. Achten Sie auf den Margeneinbruch

Im Gegensatz zu den meisten anderen Eigenschaften fallen die oberen und unteren vertikalen Ränder zusammen, wenn sie gemeinsam vorhanden sind. Dies bedeutet, dass, wenn die Unterkante eines Elements die Oberkante eines anderen Elements berührt, nur der größere der beiden Randwerte beibehalten wird. Zum Beispiel:

HTML

<div Klasse="Quadrat rot"></div>
<div Klasse="Quadrat blau"></div>

CSS

.Quadrat {
    Breite: 80px;
    Höhe: 80px;
}
.Rot {
    Hintergrundfarbe: #F44336;
    Rand unten: 40px;
}
.Blau {
    Hintergrundfarbe: #2196F3;
    Rand oben: 30px;
} 

Der obere und untere Abstand zwischen den roten und blauen Quadraten beträgt 40 Pixel, nicht 70 Pixel. Es gibt viele Möglichkeiten, das Problem des Randkollapses zu lösen. Für Anfänger ist es am einfachsten, für alle Elemente nur einen Rand in eine Richtung zu verwenden. Beispielsweise verwenden wir margin-bottom für alle oberen und unteren Ränder.

2. Verwenden Sie Flex für das Layout

Es gibt einen Grund, warum das Flex-Layout angezeigt wird. Obwohl mit Float und Inline-Block viele Layouteffekte erzielt werden können, handelt es sich im Wesentlichen um Tools für das Layout von Text- und Blockelementen und nicht für die gesamte Webseite. Mit Flex können Sie Layouts ganz einfach so erstellen, wie wir es erwarten.

Flex verfügt über eine Reihe von Eigenschaften für „Flex-Container“ und eine Reihe von Eigenschaften für „Flex-Elemente“. Wenn Sie diese einmal kennen, ist die Erstellung eines responsiven Layouts ein Kinderspiel. Derzeit gibt es in den neuesten Versionen verschiedener Browser keine Probleme mit der Flex-Unterstützung. Sie sollten daher häufiger das Flex-Layout verwenden.

.container {
    Anzeige: Flex;
}

3. Setzen Sie den CSS-Stil des Elements zurück

Obwohl sich im Laufe der Jahre viele Dinge verbessert haben, gibt es zwischen den Browsern immer noch große Unterschiede hinsichtlich der Standardstile verschiedener Elemente. Die beste Möglichkeit, dieses Problem zu lösen, besteht darin, für alle Elemente am Anfang des CSS einen gemeinsamen CSS-Reset-Code festzulegen, damit Sie ohne standardmäßige innere und äußere Ränder layouten und so einen einheitlichen Effekt erzielen.

Es gibt im Internet bereits ausgereifte CSS-Codebibliotheken, die Browserinkonsistenzen für uns lösen, wie etwa normalize.css, minireset und ress. Sie können in Ihrem Projekt darauf verweisen. Wenn Sie keine Drittanbieterbibliothek verwenden möchten, können Sie die folgenden Stile für ein sehr einfaches CSS-Reset verwenden:

* {
    Rand: 0;
    Polsterung: 0;
    Box-Größe: Rahmenbox;
}

Der obige Code erscheint möglicherweise etwas übertrieben, da er die inneren und äußeren Ränder aller Elemente auf 0 setzt. Ohne den Einfluss dieser standardmäßigen inneren und äußeren Ränder sind die nachfolgenden CSS-Einstellungen jedoch viel einfacher. Gleichzeitig ist „box-sizing: border-box“ auch eine großartige Einstellung, die wir als nächstes vorstellen werden.

4. Alle Elemente auf Border-Box setzen

Die meisten Anfänger sind sich der Box-Sizing-Eigenschaft nicht bewusst, aber sie ist tatsächlich sehr wichtig. Die Box-Sizing-Eigenschaft hat zwei Werte:

• Inhaltsbox (Standard) – Wenn wir die Breite oder Höhe eines Elements festlegen, legen wir die Größe seines Inhalts fest. Alle Polster- und Randwerte sind exklusiv. Wenn beispielsweise die Breite eines Div auf 100 und die Polsterung auf 10 eingestellt ist, nimmt das Element 120 Pixel ein (100+2*10). border-box - Polsterung und Rahmen sind in der Breite oder Höhe des Elements enthalten, eine Einstellung ist width: 100px und box-sizing:
• Die Gesamtbreite eines Div-Elements mit Border-Box beträgt 100 Pixel, unabhängig von dessen Polsterung und Rahmen.

Indem Sie alle Elemente auf Border-Box setzen, können Sie die Größe der Elemente einfacher ändern, ohne sich Gedanken darüber machen zu müssen, dass Polsterung oder Rahmenwerte die Elemente strecken oder zu einem Umbruch führen.

5. Bilder als Hintergrund verwenden

Beim Hinzufügen von Bildern zu einer Seite, insbesondere wenn die Bilder responsiv sein müssen, verwenden Sie zum Einfügen des Bildes am besten das Hintergrundattribut und nicht das <img>-Tag.

Die Verwendung mit Bildern scheint vielleicht komplizierter, aber tatsächlich wird die Gestaltung Ihrer Bilder dadurch wesentlich einfacher. Mit Hintergrundgröße, Hintergrundposition und anderen Eigenschaften können Sie bequem die Originalgröße und das Seitenverhältnis des Bildes beibehalten oder ändern.

Zum Beispiel
HTML

<Abschnitt>
    <p>Img-Element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="Fahrrad">
</Abschnitt>

<Abschnitt>
    <p>Div mit Hintergrundbild</p>
    <div></div>
</Abschnitt>

CSS

img {
    Breite: 300px;
    Höhe: 200px;
}

div {
    Breite: 300px;
    Höhe: 200px;
    Hintergrund: URL('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    Hintergrundposition: Mitte Mitte;
    Hintergrundgröße: Abdeckung;
}

Abschnitt{
    schweben: links;
    Rand: 15px;
} 

Ein Nachteil der Verwendung von Bildern im Hintergrund besteht darin, dass die Webzugänglichkeit der Seite leicht beeinträchtigt wird, da Bildschirmleseprogramme und Suchmaschinen das Bild nicht richtig abrufen können. Dieses Problem kann durch die Verwendung der CSS-Eigenschaft „Object-Fit“ gelöst werden. Bisher können alle Browser außer dem Internet Explorer „Object-Fit“ verwenden.

6. Bessere Tischränder

Tabellen in HTML waren schon immer hässlich. Es ist schwierig, sie responsiv zu gestalten, und im Allgemeinen ist es schwierig, sie umzugestalten. Wenn Sie beispielsweise einer Tabelle und ihren Zellen einen einfachen Rahmen hinzufügen möchten, wären die wahrscheinlichsten Ergebnisse:

Wie Sie sehen, gibt es viele wiederholte Ränder, was nicht sehr schön aussieht. So entfernen Sie schnell alle doppelten Ränder: border-collapse: collapse. Setzen Sie einfach diese Eigenschaft und die Tabellenränder sehen viel besser aus:

7. Mehr freundliche Kommentare

CSS ist zwar keine Programmiersprache, aber sein Code muss trotzdem dokumentiert werden. Durch das Hinzufügen einiger einfacher Kommentare können Sie den Code besser kategorisieren und differenzieren, sodass er für Sie und Ihre Kollegen später leichter zu warten ist.

Für große Flächeneinteilungen oder wichtige Bauteile kann folgender Anmerkungsstil verwendet werden:

/*------------------
    #Überschrift
---------------*/
Kopfzeile { }

Kopfzeilennavigation { }

/*------------------
    #Diashow
---------------*/
.Diashow { }

Für Details und weniger wichtige Stilmittel können Sie einzeilige Kommentare verwenden:

/* Fußzeilenschaltflächen */
.footer button { }

.footer button:hover { }

Denken Sie auch daran, dass es in CSS keine //-Kommentare gibt, sondern nur /**/-Kommentare:

/* richtig*/
P {
    Polsterung: 15px;
    /*Rahmen: 1px durchgehend #222;*/
}

/* Fehler*/
P {
    Polsterung: 15px;
    // Rand: 1px durchgezogen #222;  
}

8. Bindestrich-Benennung

Wenn eine Klasse oder ID mehrere Wörter enthält, sollte ein Bindestrich (-) verwendet werden. CSS unterscheidet nicht zwischen Groß- und Kleinschreibung, daher kann die CamelCase-Benennung nicht verwendet werden. Ebenso wird in CSS die Verwendung von Unterstrichen bei der Namensgebung nicht empfohlen.

/* richtig*/
.footer-column-left { }

/* Fehler*/
.footerColumnLeft { }

.footer_column_left { }

Bei der Benennung können Sie auch BEM in Betracht ziehen, das einer Reihe von Prinzipien folgt, die einen komponentenbasierten Entwicklungsansatz bieten, der die Konsistenz erhöht.

9. Einstellungen nicht wiederholen

Die meisten CSS-Eigenschaften werden vom Element eine Ebene höher im DOM-Baum übernommen, daher der Name Cascading Style Sheets. Nehmen Sie beispielsweise die Schriftarteigenschaft – sie wird immer vom übergeordneten Element übernommen, Sie müssen sie nicht für jedes Element auf der Seite einzeln festlegen.

Fügen Sie einfach die Schriftstile, die Sie festlegen möchten, dem <html>- oder <body>-Element hinzu und lassen Sie sie automatisch nach unten vererben.

html {
    Schriftart: normal 16px/1,4 serifenlos;
}

Dann können wir die Textstile aller Seiten auf einmal ändern. Natürlich werden nicht alle Eigenschaften in CSS vererbt, und wir müssen diese Eigenschaften dennoch für jedes Element einzeln festlegen.

10. Verwenden Sie die Transform-Eigenschaft, um Animationen zu erstellen

Verwenden Sie am besten die Funktion transform(), um eine Elementverschiebung oder Größenanimation zu erstellen, und versuchen Sie, die Breite, Höhe und die Attributwerte links/oben/unten/rechts des Elements nicht direkt zu ändern.

Im folgenden Beispiel fügen wir dem .ball-Element eine Animation von links nach rechts hinzu. Es wird empfohlen, anstelle des linken Attributs die Funktion transform: translateX() zu verwenden.

.ball {
    links: 50px;
    Übergang: 0,4 s Ausklang;
}

/* Nicht empfohlen*/
.ball.auszug {
    links: 500px;
}

/* Anregung*/
.ball.auszug {
    transformieren: übersetzenX(450px);
}

„Transformieren“ und alle zugehörigen Funktionen (Verschieben, Drehen, Skalieren usw.) weisen nahezu keine Browserkompatibilitätsprobleme auf und können nach Belieben verwendet werden.

11. Machen Sie nichts selbst, nutzen Sie Bibliotheken

Die CSS-Community ist riesig und es erscheinen ständig neue Codebasen. Sie haben verschiedene Einsatzmöglichkeiten, von kleinen Codeschnipseln bis hin zu ganzen Frameworks zum Erstellen reaktionsfähiger Anwendungen. Die meisten davon sind auch Open Source.

Wenn Sie das nächste Mal mit einem CSS-Problem konfrontiert sind, prüfen Sie, bevor Sie mit aller Kraft versuchen, es zu lösen, ob auf Github oder Codepen bereits eine Lösung verfügbar ist.

12. Halten Sie die Selektorgewichte niedrig

Nicht alle CSS-Selektoren sind gleich. Als ich CSS lernte, dachte ich immer, dass ein Selektor alles darüber überschreibt. Dies ist jedoch nicht der Fall, wie wir im folgenden Beispiel verdeutlichen:

HTML

<a href='#' id='blue-btn' class="active">Schaltfläche</a>

CSS

A{
    Farbe: #fff;
    Polsterung: 15px;
}
a#blau-btn {
    Hintergrundfarbe: blau;
}
a.aktiv {
    Hintergrundfarbe: rot;
} 

Wir möchten, dass die in der Klasse .active festgelegten Stile wirksam werden und die Schaltfläche rot färben. Dies funktioniert jedoch nicht, da die Schaltfläche über einen ID-Selektor verfügt, der auch die Hintergrundfarbe festlegt, und da der ID-Selektor eine höhere Spezifität aufweist, ist die Farbe der Schaltfläche blau. Die Gewichtsgrößenspezifikationen des Selektors lauten wie folgt:

ID (#id) > Klasse (.class) > Typ (z. B. Header)

Gewichte werden auch addiert, daher hat a#button.active ein höheres Gewicht als a#button. Wenn Sie zu Beginn einen Selektor mit hoher Priorität verwenden, werden Sie bei späteren Wartungsarbeiten ständig Selektoren mit höherer Priorität verwenden und sich schließlich für die Verwendung von !important entscheiden. Dies wird dringend abgeraten. Die genauen Gründe werden als Nächstes erläutert.

13. Verwenden Sie nicht !important

Im Ernst, verwenden Sie nicht !important. Jetzt mag es wie eine schnelle Lösung erscheinen, aber letztendlich kann es sein, dass eine umfangreiche Neufassung erforderlich ist. Stattdessen sollten wir uns die Zeit nehmen, herauszufinden, warum der CSS-Selektor nicht funktioniert, und ihn ändern.

Sie können !important nur verwenden, wenn Sie Inline-Stile im HTML überschreiben möchten. Inline-Stile sind jedoch auch eine schlechte Angewohnheit und sollten so weit wie möglich vermieden werden.

14. Verwenden Sie die Textumwandlung, um Buchstaben in Großbuchstaben umzuwandeln

Dieser Artikel gilt für die englische Umgebung, nicht für Chinesisch

In HTML können Sie ein Wort in Großbuchstaben schreiben, um es hervorzuheben. Zum Beispiel:

<h3>Mitarbeiter MÜSSEN einen Helm tragen!</h3>

Wenn Sie einen bestimmten Text vollständig in Großbuchstaben umwandeln müssen, können wir ihn normal in HTML schreiben und dann mit CSS konvertieren. Dadurch bleibt der Kontext konsistent.

<div class="movie-poster">Star Wars: Das Erwachen der Macht</div>

.Filmplakat {
    Texttransformation: Großbuchstaben;
}

15.Em, Rem und px

Welche Einheit soll ich zum Festlegen der Größe von Elementen und Text verwenden: em, rem oder px? Es gab immer viele Debatten. Tatsächlich sind alle drei Optionen realisierbar und haben alle ihre Vor- und Nachteile.

Es gibt keine eindeutige Antwort darauf, welche Einheit in welchem ​​Projekt verwendet werden sollte. Entwickler können aufgrund unterschiedlicher Gewohnheiten und Projektanforderungen unterschiedliche Einheiten verwenden. Obwohl es hierfür keine festen Regeln gibt, sollten Sie bei jeder Einheit einige Dinge beachten:

• em – setzt das Element auf 1em, wobei seine Größe relativ zur Schriftgrößeneigenschaft des übergeordneten Elements ist. Diese Einheit wird in Medienabfragen verwendet und ist besonders nützlich für die responsive Entwicklung. Da die em-Einheit jedoch auf jeder Ebene relativ zum übergeordneten Element berechnet wird, kann es manchmal mühsam sein, den px-Wert zu finden, der der em-Einheit eines untergeordneten Elements entspricht.
• rem – Berechnet relativ zur Schriftgröße des <html>-Elements. Mit rem ist es sehr einfach, die Größe aller Überschriften und Absatztexte auf einer Seite einheitlich zu ändern.
• px – Die Einheit Pixel ist am genauesten, eignet sich jedoch nicht für Responsive Design. Die Einheit „px“ ist zuverlässig und leicht zu verstehen. Wir können die Größe und Bewegung von Elementen bis auf 1 Pixel genau steuern.

Und das Wichtigste: Scheuen Sie sich nicht vor Experimenten. Probieren Sie alles aus und sehen Sie, was am besten funktioniert. Manchmal können em und rem viel Arbeit ersparen, insbesondere beim Erstellen responsiver Seiten.

16. Verwenden Sie einen Präprozessor für große Projekte

Sie haben bestimmt schon davon gehört – Sass, Less, PostCSS, Stylus. Präprozessoren sind die Zukunft von CSS. Sie bieten Funktionen wie Variablen, CSS-Funktionen, Verschachtelung von Selektoren und viele andere coole Funktionen, die CSS-Code insbesondere bei großen Projekten übersichtlicher machen.

Als einfaches Beispiel hier ein SASS-Code-Ausschnitt, der einige CSS-Variablen und -Funktionen verwendet:

$Akzentfarbe: #2196F3;
A {
    Polsterung: 10px 15px;
    Hintergrundfarbe: $Akzentfarbe;
}
ein:schweben {
    Hintergrundfarbe: abdunkeln($accent-color,10%);
}

Der einzige Nachteil von Präprozessoren besteht darin, dass sie immer noch in reguläres CSS kompiliert werden müssen. Die durch CSS eingeführten benutzerdefinierten Eigenschaften sind echte Vorverarbeitung.

17. Verwenden Sie AutoPrefixer, um eine bessere Kompatibilität zu erreichen

Browserpräfixe sind eines der nervigsten Dinge an CSS. Das für jede Eigenschaft erforderliche Präfix ist inkonsistent und Sie wissen nie, welches Sie benötigen. Wenn Sie es wirklich einzeln manuell in Ihr Stylesheet einfügen müssen, wird das zweifellos ein langweiliger Albtraum.

Glücklicherweise gibt es Tools, die automatisch Browserpräfixe für uns hinzufügen und sogar entscheiden können, welche Browser wir unterstützen müssen:

Onlinetool: Autoprefixer

Texteditor-Plugins: Sublime Text, Atom

Codebasis: Autoprefixer (PostCSS)

18. CSS-Dateien komprimieren

Um die Ladegeschwindigkeit und Seitenladezeit Ihrer Website und Anwendungen zu verbessern, sollten Sie komprimierte Assets verwenden. Die komprimierte Version der Datei entfernt sämtliche Leerzeichen und Duplikate und reduziert so die Gesamtdateigröße. Dieser Vorgang macht Ihr Stylesheet natürlich auch völlig unlesbar. Verwenden Sie daher in der Produktion die .min-Version und behalten Sie für die Entwicklung die normale Version bei.

Es gibt viele verschiedene Möglichkeiten, CSS-Code zu komprimieren:

Online-Tools: CSS Minifier, CSS Compressor

Texteditor-Plugins: Sublime Text, Atom

Atom-Repositorys: Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)

Abhängig von Ihrem Arbeitsablauf können Sie einen der oben genannten Ansätze verwenden.

19. Hunde

Es gibt immer noch viele Kompatibilitätsinkonsistenzen zwischen Webbrowsern in Bezug auf CSS-Eigenschaften. Verwenden Sie Caniuse, um zu überprüfen, ob die von Ihnen verwendeten Eigenschaften allgemein unterstützt werden. Ist ein Präfix erforderlich? Oder muss ich bei der Verwendung in einem bestimmten Browser etwas beachten? Mit caniuse können Sie CSS bequemer schreiben.

20. Überprüfung

Die Validierung Ihres CSS ist möglicherweise nicht so wichtig wie die Validierung Ihres HTML- oder JavaScript-Codes, es ist jedoch dennoch sehr nützlich, Ihren Code durch ein Tool laufen zu lassen. Sie werden darüber informiert, ob Sie Fehler gemacht haben, werden bei falscher Verwendung gewarnt und erhalten Tipps zur Verbesserung Ihres Codes.

Genau wie bei Zip und Autoprefixer gibt es kostenlose Tools, die Sie nutzen können:

Online-Tools: W3 Validator, CSS Lint
Texteditor-Plugins: Sublime Text, Atom
Code-Bibliotheken: stylelint (Node.js, PostCSS), css-validator (Node.js)

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.