1. Zurücksetzen
Einige Browser wenden auf jedes Element unterschiedliche Stile an, daher gilt es als beste Praxis, Ihr CSS zu Beginn zurückzusetzen.
2. Einzeilige Eigenschaftsdeklaration verwenden
Angenommen, Sie möchten, dass ein Element einen Rahmen hat, anstatt es so zu machen:
.with-border{
border-width:1px;
border-style:solid;
border-color:red;
}können Sie etwa so vorgehen:
.with-border {
border: 1px solid red;
}3. Text-Transformation verwenden
Anstatt alle Groß- und Kleinbuchstaben in HTML direkt:
<h1 >THIS IS THE TITLE</h1>
Sie können einfach die Eigenschaft text-transform verwenden:
.title {
text-transform:uppercase;
}4. Vertikale Zentrierung
Nehmen wir an, Sie haben eine HTML-Datei wie diese:
<div > <div>✓</div></div>
Wenn Sie den Scheck vertikal zentrieren wollen, tun Sie das einfach:
.vcentered {
display:flex;
align-items:center;
}5. Reihenfolge der Linkstile
Bei der Festlegung des Stils für Link-Status gibt es einige Regeln für die Reihenfolge, die Sie beachten müssen:
a:link a:visited a:hover a:active
6. Bedingte Kommentare
Eine ideale Möglichkeit, IE-Browser anzusprechen, ist die Verwendung von bedingten Kommentaren:
<!--[if IE]>... <![endif]-→
Diese wird nur geladen, wenn der Browser, der die Seite anzeigt, der Internet Explorer ist.
7. Kappen fallen lassen
Sie können ein Dropcap leicht mit dem CSS-Pseudoelement :first-letter
.content:first-letter {
font-size: 3rem;
}8. Text mit Ellipsis abkürzen
Verwendung:
:.content{
width:400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}The element's width and overflow are required.
