Here are a few CSS tips and tricks...
Set line-height explicitly
Line height is one property you can set for your entire project, not only to minimize lines of code but to enforce a standard look to your site’s typography. By declaring it on the body-element, it will be inherited globally.
body {
line-height: 1.5;
}
Use SVG for logotypes and icons
SVG is used by all major browsers and will make your graphics look so much better.
.icon-up {
background: url("icon-up.svg");
}
Reset your style
Always begin your stylesheet by removing all the margins and paddings applied to most elements in your layout by the browser’s default box-model:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Write a CSS-documentation
Write some documentation on how your CSS is designed, naming conventions and general structure. Two coders working differently in the same CSS will make a mess.
Use comments
Use comments in your CSS to explain why you are doing stuff if the intention isn't clear enough.
Use modern techniques
There exist a lot of old articles covering CSS but CSS has evolved quite a bit over the years. Make sure to use the current best practices when solving problems.
Use a CSS pre-processor
Less and Sass are the two most common CSS pre-processors. They provide features such as imports, mixins and variables and will really help you organize your CSS better.
Validate your CSS
It's easy to make mistakes. Make sure to regularly validate your CSS in order to detect errors.