1. CSS Optimization

Organize your CSS code

Good CSS organization helps with future maintainability of the site, it helps you and your team member understand the CSS more quickly and jump to specific styles.

Structure CSS code

For small project, you can break your CSS code in separate blocks according to the structure of the page or page content. for example you can break your CSS document according the content of your web page(e.g. Header, Main Content, Footer)

Structure CSS file

For large project, you may feel having too much CSS code in one place, so it's the best to structure your CSS into more CSS files, and use a master style sheet to import these style sheets. this solution can not only organize style structure, but also reduce server request.

/*--------------Master style sheet--------------*/
@import "Reset.css";
@import "Structure.css";
@import "Typography.css";
@import "Forms.css";

Create index for your CSS

Another important thing is to create index at the beginning of your CSS file, index can help you quickly understand the whole CSS structure.

/*----------------------------------------
1. Header
2. Navigation
3. Main Content
4. Sidebar
5. Footer
------------------------------------------*/

Writing efficient CSS selectors

keep in mind that browsers match CSS selectors from right to left and the order of efficiency for selectors

1. id (#myid)
2. class (.myclass)
3. tag (div, h1, p)
4. adjacent sibling (h1 + p)
5. child (ul > li)
6. descendent (li a)
7. universal (*)
8. attribute (a[rel="external"])
9. pseudo-class and pseudo element (a:hover, li:first)

the rightmost selector is called "key selector", so when you write your CSS code, you should choose more efficient key selector. Here are some best practice:

Don't tag-qualify

Never do this:

div#myid
div.myclass
.myclass#myid

IDs are unique, classes are more unique than a tag so they don't need a tag. Doing so makes the selector less efficient.

Avoid overqualifying selectors

for example

#nav a

is more efficient than

ul#nav li a

Don't repeat declaration

Example:

body {font-size:12px;}
h1 {font-size:12px;font-weight:bold;}

since h1 is already inherited from body, so you don't need to repeate atrribute.

Using 0 instead of 0px

Always using #selector { margin: 0; } There’s no need to include the px after 0, removing all those superfluous px can reduce the size of your CSS file.

Group declaration

Example:

h1
{
    font-size: 16pt;
}

h1
{
    color: #fff;
}

h1
{
    font-family: Arial, sans-serif;
}

it’s much better to combine them:

h1
{
    font-size: 16pt;
    color: #fff;
    font-family: Arial, sans-serif;
}

Group selectors

Example:

h1
{
    color: #fff;
    font-family: Arial, sans-serif;
}

h2
{
    color: #fff;
    font-family: Arial, sans-serif;
}

it would be much better if setup as:

h1, h2
{
    color: #fff;
    font-family: Arial, sans-serif;
}

Group attribute

Example:

h1
{
    color: #fff;
    font-family: Arial, sans-serif;
}

h2
{
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16pt;
}

you can set different rules for specific elements after setting a rule for a group

h1, h2
{
    color: #fff;
    font-family: Arial, sans-serif;
}

h2
{
    font-size: 16pt;
}

Using Shorthand Properties

Example:

#selector
{   
 margin-top: 8px;  
 margin-right: 4px;  
 margin-bottom: 8px;  
 margin-left: 4px;
}

Better:

#selector
{  
 margin: 8px 4px 8px 4px;
}

Best:

#selector
{   
 margin: 8px 4px;
}

a good diagram illustrated how shorthand declarations are interpreted depending on how many values are specified for margin and padding property.

instead of using:

#selector
{   
  background-image: url(”logo.png”);
  background-position: top left;
  background-repeat: no-repeat;
}

is used:

#selector
{   
  background: url(logo.png) no-repeat top left;
}

2. Image Optimization

Image Optimizer

Image Optimizer is a free Visual Studio2010 extension that optimizes PNG, GIF and JPG file sizes without quality loss. It uses SmushIt and PunyPNG for the optimization. Just right click on any folder or images in Solution Explorer and choose optimize images, then it will automatically optimize all PNG, GIF and JPEG files in that folder.

CSS Image Sprites

CSS Image Sprites are a way to combine a collection of images to a single image, then use CSS background-position property to shift the visible area to show the required image, many images can take a long time to load and generates multiple server requests, so Image Sprite can reduce the number of server requests and improve site performance.
You can use many online tools to generate your image sprite and CSS, and you can also try the Sprite and Image Optimization framework released by The ASP.NET team.