CSS code abbreviation Tips

Source: Internet
Author: User
Tags border color file size
css| Skills

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 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.

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 other simple techniques, you can significantly reduce the size of your style sheet. 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;





to replace it with some abbreviated features to reduce the code to the following, 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, each of which corresponds to a conventional property that is grouped into abbreviated properties. Properties are separated by whitespace.





the order of the attributes after the abbreviation is important when the attribute is a similar value, for example, for linear measurements of the border whitespace property (margin properties). 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 followed by a 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 unimportant 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): Before prompting, after prompting


fonts: Font, font size, font style, font weight, font variant, line height, font sizing, 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 Gap


Pause (pause): Pause after, pause before


reduce blank


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.


H1 {/* Heading 1 style*/


Font-size:x-large; /* X-large size */


Font-weight:bold; * * Bold/


color: #FF0000; * * Red/





Using sketches, removing unwanted whitespace, and omitting annotations can greatly reduce the size of your CSS style sheet files. This, in turn, makes small, but probably obvious, contributions to the overall goal of accelerating your Web site's speed.







Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.