CSS shortcuts
There is sometimes the long way to do something and the short way to do something. Generally, the short way to do something is referred to as a 'shortcut'. CSS is no exception to this 'shortcuts' rule as 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 lesson 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 lesson are intended to be the former.
Property grouping
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.
Example:
body{
background-color: #f4f4f4;
background-image:url(/images/bg.gif);
background-repeat:repeat-x;
background-position:top;
}
In the above example, we declare four properties for the background of a page:
- the background color
- a background image
- how the background image will repeat
- the background image position
The same example using the property grouping shortcut:
body{
background: #f4f4f4 url(/images/bg.gif) repeat-x top;
}
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.
Example using fonts (without property grouping):
h1{
font-weight: normal;
font-size: 20px;
line-height: 12px;
font-family: tahoma, georgia, verdana;
}
Same example (with property grouping):
h1{
font: normal 20px/12px tahoma, georgia, verdana;
}
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.
Example using borders (without property grouping):
#menu{
border-width: 2px;
border-style: dashed;
border-color: #CDE445;
}
Example using borders (with property grouping):
#menu{
border: 2px dashed #CDE445;
}
Why stop there? We can even do the same thing with margin and padding!
Example with margin and padding:
/* margin long way */ #content{ margin-top: 10px; margin-right: 5px; margin-bottm: 5px; margin-left: 12px; } /* padding long way */ #menu{ padding-top: 5px; padding-right: 6px; padding-bottom: 7px; padding-left: 8px; } /* margin short way */ #content{ margin: 10px 5px 5px 12px; } /* padding short way */ #menu{ padding: 5px 6px 7px 8px; }
Using the shortcut for margin and padding, you can specify 1 - 4 values which will effect different sides of an element depending on the number of values you specify.
Example:
#content{
/*
4 values - first value (top side)
second value (right side)
third value (bottom side)
fourth value (left side)
*/
margin: 10px 5px 5px 12px;
}
#content {
/*
3 values - first value (top side)
second value (left and right sides)
third value (bottom side)
*/
margin: 10px 5px 5px 12px;
}
#content{
/*
2 values - first value (top and bottom sides)
second value (left and right sides)
*/
margin: 10px 5px;
}
#content{
/* 1 value - all sides */
margin: 10px;
}
Same concept applies to padding:
/* 4 values - first value (top side) second value (right side) third value (bottom side) fourth value (left side) */ #menu{ padding: 5px 6px 7px 8px; } /* 3 values - first value (top side) second value (left and right sides) third value (bottom side) */ #menu { padding: 5px 6px 7px; } /* 2 values - first value (top and bottom sides) second value (left and right sides) */ #menu{ padding: 5px 6px; } /* 1 value - all sides */ #menu{ padding: 10px; }
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.
Example:
p{
color: #4f39ac;
background: #f4f4f4;
line-height: 16px;
}
In the above example, the properties appear on multiple lines.
Same example with the properties on one line:
p{
color: #4f39ac; background: #f4f4f4; line-height: 16px;
}
In this example, the properties all appear on one line, saving space and improving loading speed of code.
You can even go a step further and put it all on one line:
p {color: #4f39ac; background: #f4f4f4; line-height: 16px;}
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.
Example:
body { background: #ffffff; }
h1 { background: #aa2233; }
p { background: #112233; }
#menu { background: #ffaa44; }
can be shortened to:
body { background: #fff; }
h1 { background: #a23; }
p { background: #123; }
#menu { background: #fa4; }
Using zeros
When you use zeros in measurements, you can skip the part of having to specify px, pt, em, or any other measurement types.
Example:
#menu{ margin: 10px 0; }
In the above example, the 10 needs a unit of measurement, the 0 does not.
NOTE: There is one exception to the rule of not specifying measurements with zeros, that is the % (percent) symbol. The W3C has made it necessary to do so. Some browsers are actually OK about it, while others not so much. Either way, it's good convention and practice to use the % with zeros.
