CSS abbreviation Tips

css| Tips

A key indicator of Web site usability is speed, or rather, how quickly a page can appear in a visitor's browser window. There are a number of factors affecting speed, including the speed of the web, the Internet connection of visitors, and the size of the files the browser must download. Although you can't control the speed of your servers and connections, you can control the size of the files that make up your Web pages.

To make the site faster, the builders of the web routinely compress and optimize every image file on the site, often sacrificing the quality of the image in order to reduce the size of the file by a few percent. Because CSS stylesheets 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 some simple tips, you can significantly reduce the size of your stylesheet. In an informal special test of my style sheet, I lowered the file size by about 25-50%.

Using the abbreviated nature of CSS
The abbreviated nature of CSS (shorthand property) is a proprietary name used to replace multiple sets of related properties. For example, the clearance property is the abbreviation for the top clearance (padding-top), the right clearance (padding-right), the bottom clearance (padding-bottom), and the Left clearance (padding-left). padding

Using the Sketch property allows you to compress multiple properties/attribute pairs (Property/attribute pair) into a single line of CSS style sheet code. For example, think about 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 abbreviated properties can reduce the code to the following, and the actual effect is exactly the same:

. sample1 {
margin:15px 20px 12px 24px;
padding:5px 10px 4px 8px;
Border-top:thin solid #000000;
}

Note that there are several attributes to the abbreviation, and each (attribute) corresponds to a conventional property that is grouped into the abbreviated nature. Properties are separated by whitespace.

When a property is a similar value, such as for a linear measurement of the border whitespace property (the margin property), the order of the attributes after the abbreviated nature is important. The order of the properties begins at the top (the top border is blank), and then continues in the clockwise order around the lattice (box).

If all attributes of the abbreviation are the same, you can simply list a single property and then copy it four times before. Therefore, the following two properties are equal:

margin:5px 5px 5px 5px;

margin:5px;

Similarly, you can use the two attributes that are connected to the top/bottom and right/left sides of the border, either at the end or the space.

margin:5px 10px 5px 10px;

margin:5px 10px;

The order of attributes is not important when they are not of the same value. As a result, attributes such as border color, border style, and border width can be connected in any order after the outline nature (outline property). Ignoring an attribute is equivalent to ignoring the corresponding general nature from the style rule.

The following is a list of CSS abbreviations and the general nature of what they represent.

Background (background): Background attachment, background color, background image, background position, background repeat
Border (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 hint): Prompt before, prompt after
Font font: Font, font size, font style, font weight, font variant, line height, font size adjustment, font stretching
List-style (List style): List style image, List style position, List style type
Margin (blank): Top blank, right blank, bottom blank, left blank
Outline (outline): outline color, outline style, outline width
Padding (GAP): top clearance, right clearance, bottom clearance, left clearance
Pause (pause): Pause after, pause before
Reduce whitespace

Another way to reduce the size of a CSS stylesheet is to delete most of the unused whitespace from the document. In other words, break each rule into one line of code, and delete the newline and indent characters that were inserted into the code to separate each property/attribute into a different line.

For example, the following code example is the same on the 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 Comment

deleting annotations from your CSS code is another way to reduce file size. Although annotations are useful for reading code, they do not help browsers generate your Web pages. Many web builders are accustomed to annotating every line of code, or at least adding to each rule declaration. Such generous annotations are rarely needed in CSS stylesheets because most CSS properties and attributes are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can dispense with most annotations while still keeping your code readable and maintainable.