CSS code abbreviation Tips _css/html

The key metric for Web site usability is speed, or, more precisely, how quickly the page can appear in the Visitor's browser window. There are a number of factors that affect speed, including the speed of the Web server, the Internet connection of visitors, and the size of the file that 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.

In order to make the site faster, the Web builders routinely compress and optimize every image file on the site, which often makes the quality of the image less than a few percent of the size of the file. Because CSS stylesheets are plain text files and relatively small compared to images, web builders rarely consider taking steps to reduce the size of their CSS style sheet files. However, you can reduce the size of your stylesheet to a large extent by using CSS abbreviations and other simple tricks. In an informal special test of my style sheet, I reduced the size of the file by about 25-50%.

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

Using the sketched nature allows you to compress multiple properties/attributes pairs (Property/attribute pair) into a single line of code in a CSS style sheet. 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;
}

Instead of using some abbreviation, you 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 of the abbreviation nature, each of which corresponds to a general character that is combined into an abbreviated nature. Properties are separated by whitespace.

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

If all attributes of an abbreviated nature are the same, then 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 properties that follow the border blank or Interval property to represent the top/bottom and right/left property pairs.

margin:5px 10px 5px 10px;

margin:5px 10px;

The order of the attributes is not important when they are non-similar values. As a result, properties such as border color, border style, and border width can be connected in any order after the outline nature (outline property). Ignoring a property is equivalent to ignoring the regular property from the style rule.

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

Background (background): Background attachment, background color, background image, background position, background repetition
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): Front prompt, after prompt
Font (font): typeface, font size, font style, font weight, font variation, line height, font sizing, font stretch
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 gap
Pause (pause): Pause after, pause before
Reduce whitespace

Another way to reduce the size of a CSS stylesheet is to remove most of the useless whitespace from the document. In other words, break each rule into a single line of code, which is to delete the newline and indent characters that were originally inserted into the code to split each property/attribute into different lines.

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

Deleting comments from your CSS code is another way to reduce file size. Although annotations are useful for reading code, it does not help your browser generate your Web pages. Many web builders are accustomed to annotating each line of code, or at least adding to each rule declaration. Such generous annotations are rarely needed in CSS stylesheets, as most CSS properties and properties are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can omit most of the comments, while still maintaining the readability and maintainability of your code.

H1 {/* Heading 1 style*/
Font-size:x-large; /* X-large Size */
Font-weight:bold; /* Bold */
Color: #FF0000; /* Red */
}

Using sketch properties, removing useless whitespace, and omitting annotations can greatly reduce the size of your CSS stylesheet files. This in turn will make small, but potentially obvious, contributions to the overall goal of accelerating your Web site's speed.

