A good web developer needs to be fluent in HTML, javascript and CSS. I started writing HTML in the early 90’s and things seemed so much simpler back then. You really only had to code for two major browsers (Netscape and IE) and CSS did not really exist like it does today. Anyway, if you are going to develop HTML nowadays then you better know your CSS! Here are a few tricks and tips I gathered to make my CSS code a little bit cleaner:

1. Centralize your CSS code in order to increase maintainability. Instead of putting a style tag in each page of your site, use a link tag. This allows you to put all your styles in a single file and manage them centrally.

<link rel="stylesheet" type="text/css" href="MySite.css" />

If you have multiple style sheets then you can use a single link tag and import the “master style sheet”. The additional CSS files can then be referenced in the master style sheet using the import keyword. Here is an example:

@import "Content/blue.css";
@import "Content/red.css";
@import "Content/green.css";

Alternatively you could just use separate link tags. However, the import keyword is nice if you want to minimize the amount of code in your markup page. It is also a great way to logically organize different parts of your CSS.

2. Group similar styles together using selectors.  Sometimes you may have several elements in your markup that use identical styles. Instead of specifying each item separately in your CSS use a comma separated list. Here is an example:

Before:

p { font-size: 10px; font-family: arial; }
ul{ font-size: 10px; font-family:arial; }
.comments { font-size: 10px; font-family: arial; }

After:

p, ul, .comments { font-size: 10px; font-family: arial; }

Grouping like elements together will minimize your CSS code and also make your page load faster over a slow connection.

3. Use CSS shorthand – Combine verbose style sheet code with shorthand. Most people are very familiar with the CSS shorthand for borders and margins. Here is an example of applying CSS shorthand for a font:

Longhand:
font-family: arial;
font-size: 10px;
line-height: 2em;
font-weight: bold;

Shorthand:
font: 10px/2em bold arial;

Note: the CSS shorthand version for fonts requires you to specify the font-size and font-family. The font-variant, font-style and font-weight have automatic default values.

4. Remove Whitespace in order to optimize page downloads – Whitespace makes up about 30-40% of the page download size. This may not be a big deal for people with high speed connections but if you have people visiting your site with mobile devices then page size can be an important factor. By removing the whitespace in your CSS you can drastically reduce the download time for your web site. The same holds true for javascript files as well. I generally will keep my CSS files formatted with whitespace for development purposes but before I deploy them on my web server I will remove all the whitespace using a macro in my favorite text editor: notepad++.

References:

5 Step Style Sheet Weight Loss Program
Ten CSS tricks you may not know
Who created CSS? CSS Early History
Website Optimization - Remove Whitespace