A key metric of web site usability is speed, or more precisely, how quickly a page appears in a visitor's browser window. There are many factors that affect speed, including the speed of your web server, your visitor's Internet connection, and the size of the file the browser must download. Although you can't control the speed of your server and connection, you can control the size of the files that make up your website's web pages.
In order to make websites faster, web builders routinely compress and optimize every image file on their website, often sacrificing image quality in order to reduce file size by a few percentage points. Since CSS style sheets are plain text files and are relatively small compared to images, web builders rarely consider taking steps to reduce the size of their CSS style sheet files. However, by using CSS abbreviations and other simple tricks, you can reduce the size of your style sheet to a great extent. In an informal ad hoc test of my own stylesheets, I reduced the file size by about 25-50%.
Use the abbreviation properties of CSS:
CSS shorthand properties are special property names that are used to replace multiple sets of related properties. For example, the padding property is short for padding-top, padding-right, padding-bottom, and padding-left.
Using shorthand properties allows you to compress multiple property/attribute pairs into a single line of code in a CSS stylesheet. For example, consider the following code:
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}
Replacing it with some abbreviation properties can reduce the code to the following, the actual effect of the two is exactly the same:
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000000;
}
Note that abbreviated properties also have multiple properties, each of which corresponds to a regular property that is combined into the abbreviated property. Properties are separated by white space.
When properties have similar values, such as for linear measurements of margin properties, the order of the properties that follow the abbreviated property is important. The order of attributes starts at the top (the top border is blank) and continues clockwise around the box.
If all properties of an abbreviation property are the same, then you can simply list the single property and copy it four times in front. Therefore, the following two properties are equal:
margin: 5px 5px 5px 5px;
margin: 5px;
Similarly, you can represent top/bottom and right/left property pairs using two properties following the border margin or spacing properties.
margin: 5px 10px 5px 10px;
margin: 5px 10px;
The order of attributes is not important when they are dissimilar values. Therefore, properties such as border color, border style, and border width can follow the outline property in any order. Ignoring an attribute is equivalent to omitting the corresponding general property from the style rules.
List of CSS abbreviation properties
Below is a list of CSS abbreviated properties and the general properties they represent.
Background: background attachment, background color, background image, background position, background repeat
Border: border color, border style, border width
border-bottom (bottom border): bottom border color, bottom border style, bottom border width
border-left (left border): left border color, left border style, left border width
border-right (right border): right border color, right border style, right border width
border-top (top border): top border color, top border style, top border width
cue (sound cue): pre-cue, post-cue
font: font, font size, font style, font weight, font variant, line height, font size adjustment, font stretching
list-style: list style image, list style position, list style type
margin (blank): top margin, right margin, bottom margin, left margin
outline: outline color, outline style, outline width
padding: top gap, right gap, bottom gap, left gap
pause (pause): pause after, pause before, reduce white space
Another way to reduce the size of a CSS stylesheet is to remove most of the unnecessary whitespace from the document. In other words, put each rule break into a single line of code, i.e. remove the newlines and indents that were originally inserted into the code to separate each property/attribute into separate lines.
For example, the following code examples are identical in content, but the second one is much more refined:
h1 {
font-size: x-large;
font-weight: bold;
color: #FF0000;
}
h1 {font-size: x-large; font-weight: bold; color: #FF0000}
Delete comments
Removing comments from your CSS code is another way to reduce file size. Although comments are useful for reading the code, they do not help the browser generate your web pages. Many web builders are used to commenting every line of code, or at least every rule statement. Such generous comments are rarely necessary in CSS stylesheets because most CSS properties and properties are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can eliminate most comments while still keeping your code readable and maintainable.
h1 { /* Heading 1 style*/
font-size: x-large; /* x-large size */
font-weight: bold; /* Bold */
color: #FF0000; /* Red */
}
Using shorthand properties, removing useless whitespace, and omitting comments can greatly reduce the size of your CSS style sheet file. This in turn will make a small, but potentially noticeable, contribution to the overall goal of speeding up your Web site.