Shorthand CSS Properties

The CSS can be made clean with removing the properties names as mentioned below.  This can help in reducing the size of CSS in the process of development of website.

Font

Use:

font: 1em/1.5em bold italic serif
…instead of
font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif

 

Border

Use:

border: 1px black solid
…instead of
border-width: 1px; border-color: black; border-style: solid

Background

Use:

background: #fff url(image.gif) no-repeat top left
…instead of
background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

Margin, padding, border

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)
…instead of
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px

Use:

margin: 5em 1em 3em (top, left and right, bottom)
…instead of
margin-top: 5em; margin-bottom: 1em; margin-right: 1em; margin-right: 4em

Use:

margin: 5% 1% (top and bottom, left and right)
…instead of
margin-top: 5%; margin-bottom: 5%; margin-right: 1%; margin-right: 1%

These rules can be applied to margin, border and padding.

Leave a Reply

Your email address will not be published. Required fields are marked *