Skip to content

Instantly share code, notes, and snippets.

@vdw
Last active October 10, 2015 20:48
Show Gist options
  • Save vdw/3748557 to your computer and use it in GitHub Desktop.
Save vdw/3748557 to your computer and use it in GitHub Desktop.
Basic CSS shortner rules

Basic CSS shortner rules

1) Trim white spaces

2) Remove new lines (/n) ~> single line

3) Remove last semi-column (;)

4) Hexadecimal color:

  • #FFFFFF becomes #fff (color is case-insensitive)
  • #336699 becomes #369
  • red color becomes #f00
  • green color becomes #0f0
  • blue color becomes #00f

5) Backgrounds

  • this:
background-color: #1C1C1C

becomes:

background: #1c1c1c (color is case-insensitive)
  • this:
background-image: url(image.png) 
background-image: url("image.png") 
background-image: url('image.png') 

becomes:

background: url(image.png)
  • this:
background-color: #1C1C1C
background-image: url(image.png)

becomes:

background: #1c1c1c url(image.png)

6) Fonts

  • this:
font-size: 12px; 
font-family: "Arial", Helvetica, sans-serif;

becomes:

font: 12px "Arial", Helvetica, sans-serif;
  • this:
font-size: 12px; 
font-weight: bold; 
font-family: "Arial", Helvetica, sans-serif; 

becomes:

font: bold 12px "Arial", Helvetica, sans-serif;
  • this:
font-size: 12px; 
font-weight: bold;
font-style: italic;
font-family: "Arial", Helvetica, sans-serif; 

becomes:

font: bold italic 12px "Arial", Helvetica, sans-serif;
  • this:
font-size: 12px;
line-height: 16px;
font-weight: bold;
font-style: italic;
font-family: "Arial", Helvetica, sans-serif; 

becomes:

font: bold italic 12px/16px "Arial", Helvetica, sans-serif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment