There are several shortcuts in CSS you can use to make your code easier to read (for yourself and others), load faster, and be of higher quality.
This tutorial focuses on:
- Thinking about shortcuts
- Property grouping
- Typing on one line
- Color value shortening
- Using zeros
Thinking about shortcuts
Shortcuts are a great way to speed things up and be more pragmatic. Shortcuts make things easier to read, follow, and execute, especially when it comes to writing code. One must be careful though, as sometimes shortcuts can bring a negative result. When using shortcuts, you should ask yourself, are these shortcuts going to be beneficial/helpful or are they going to be detrimental/unhelpful? The CSS shortcuts in this tutorial are intended to be beneficial/helpful.
Property grouping refers to specifying a set of values for a set of properties in one declaration on one line instead of specifying a set of values for a set of properties on several different lines.
In the above example, we declare four properties for the background of a page, lets shorten the declaration.
The above example requires three less lines of code than the first example. In it, we specify a set of values for the background of the webpage using just one property - background. We can do the same thing with fonts.
NOTE: The values for the font property must be set in the same order as above or web browsers can get confused.
We can also do the same thing with borders.
Using the shortcut for margin and padding, you can specify 1 to 4 values which will effect different sides of an element depending on the number of values you specify.
Typing on one line
Different people have different conventions for how they write code..but one thing remains certain, the less tabs and spaces you use, the faster your code will load. That is not to say that it will necessary be more readable. The challenge is to create highly readable code without to much white space. One quick solution towards this challenge is to type a set of properties on one line as opposed to multiple lines.
In the above example the properties all appear on one line, saving space and improving loading speed of code.
Color value shortening
When declaring the hexadecimal color value for an element, instead of using the full 6 digit value, you can shorten it down to three, that is if the color code consists of three pairs of repeating digits.
When you use zeros in measurements, you don't have to specify px, pt, em, or any other measurement types.