If you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips.
These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line.
Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller.
Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.
1.Background properties in one line
Defining a background property could be made in an easier way than we often happen to see.
… when you could easier write:
When all of the border widths are the same, instead using:
… you can simply write this:
The following list properties:
… could be simplified into:
4.Font and line-height properties
Font and line-height properties like the ones below:
… can be easily transformed into:
Much simpler huh? :)
5.Margin and padding properties
This example applies for margin and also for padding, so next we’ll use as example the CSS margin property.
Now let’s see what else we can do to write optimized CSS:
Always remember that “0” anyhing equals to “0”
Use the “0” value instead 0px or 0em so instead the the following CSS properties
you could use:
Use shortcuts for hexadecimal colors
White color equal to “#ffffff” or just “#fff”, #aabbcc can be wrote like #abc and so on.
Simplify non integer CSS values
Instead writing 0.5em you can use .5em, 0.5px is equal to .5px
The last property semicolon it’s not required?
Floated elements inherits “display:block” declaration
When floating an element there’s no need to add also “display: block” declaration as we often see. This is helpful for avoiding redundancy and save us one line of CSS.
These are some CSS shorthand tips I often use and they are very helpful for me, when coding CSS. I hope they will also help you writing shorter, better CSS code.
Over to you
What do you think about the tips I presented above and what else do you use for optimizing the CSS file?
10 Web Usability tips for your website
8 tools to optimize your images