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 that important, 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.
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 of using:
… you can simply write this:
The following list properties:
… could be simplified into one declaration:
4.Font and line-height properties
Font and line-height properties like the ones below:
… can be easily transformed into:
5.Margin and padding properties
This example applies for margin and also for padding, so next, we’ll use as an example the CSS
Now let’s see what else we can do to write optimized CSS:
0 value instead
0em because no matter the CSS value unit
0. So, the following CSS properties’s
can be easily written as unitless values:
Shortcuts for hexadecimal CSS colors
White color equal to
#ffffff or just
#aabbcc can be wrote like
#abc and so on.
Simplify non integer CSS values
Instead of writing
0.5em you can use
The last declaration’s semicolon is not mandatory
You can skip the last declaration’s semicolon, and it still passes the W3C CSS validation.
Floated elements inherits
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 as they are very helpful to write shorter and better CSS code.
10 Web Usability tips for your website
8 tools to optimize your images