1. Reset
Some browsers apply different styles to each element, so it's considered a best practice to reset your css at the very start.
2. Use Single-Line Property Declaration
Let's say you want an element to have a border, instead of doing it like this:
.with-border{ border-width:1px; border-style:solid; border-color:red; }
you can do something like this:
.with-border { border: 1px solid red; }
3. Use Text-transform
Instead of using all uppercase or lowercase characters in HTML directly:
<h1 >THIS IS THE TITLE</h1>
You can just use the text-transform property:
.title { text-transform:uppercase; }
4. Vertical Centering
Let's say you've an HTML like this:
<div > <div>✓</div></div>
And you want to vertically center the check, just simply do:
.vcentered { display:flex; align-items:center; }
5. Link Style Order
When setting the style for link states, there are some order rules that you need to remember:
a:link a:visited a:hover a:active
6. Conditional Comments
An ideal way to target IE browsers is to use conditional comments:
<!--[if IE]>... <![endif]-→
This will only load when the browser viewing the page is internet explorer.
7. Drop Caps
You can easily achieve a dropcap by using CSS pseudo-element :first-letter
.content:first-letter { font-size: 3rem; }
8. Truncate text with Ellipsis
Usage:
:.content{ width:400px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
The element's width and overflow are required.