CSS tips and tricks


Please contribute by voting. Thanks!

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.

Article created: Mar 1 '17. Edited Mar 1 '17.

Your comment

You need to sign up / log in to comment this article


Created by Matt Hamilton [13] Mar 1 '17

Share article

Do you know about


Write an article