Cascading Style Sheet (CSS) is a huge and complex subject, so I’m only going to touch on a tiny facet and assume you know your way around a style sheet.  But I hope that some of these ideas will help smooth out and speed up the creation of your CSS.

Plan
Though not actually CSS, nor really a secret trick, a good plan can be on of the most important factors in having a good workflow for creating your CSS and HTML. I know it’s boring, but the more planning for your site and CSS you do before you start design/code the easier life will be in the long run.  With some planning, you’ll be able to see ways to use some of the actual tricks below, and perhaps find some of your own time saving CSS tricks.

Auto is your friend
The attribute ‘auto’ can be used with a number of CSS properties – it comes in really handy when used with the dimension properties, height and width, and the margin property.

Using one fixed dimension combined with ‘auto’ for the other is a great way to create thumbnails, or resized images via CSS, so you don’t have to make multiple sized of images.
For example

.thumbnail {
height:120px;
width:auto: }

In this example, you would give an image the class ‘thumbnail’ in your HTML, no matter what the original image size it would be made 120 pixels wide and the height would be scaled appropriately.

Using some more HTML and CSS, you can do even more complex variations of this.  For example, look at the thumbnails used on the front page Marines magazine site. The images used for the thumbnails are of various sizes and aspect ratios, but all are resized via CSS, and if the image is taller than the space template, that excess height is hidden.

Combine multiple classes to create effects
Remember, you can assign multiple classes to any elements in your HTML. By using a base style (a great place to use a complex selector – see below) for your element to ensure a unified look for your site, you can add a set of classes that add to, or modify that base class that work along with your base.  For example you have a basic treatment for an image, and then a suite of classes that govern the display size of the image.

You can see this in action on a Marines Magazine article page. You’ll see that all the images share the same basic treatment, but are different widths and page justification that are set by using a combination of classes.

Use complex selectors
This will take a little more understanding of the syntax of CSS, but once you get a grip of complex selectors you can save yourself a lot of effort and lines of code.  You can use complex selectors to modify how an element or class appears based on where it falls in your HTML.  As a result you need a lot less named classes in your style sheets and will not need to assign as many classes to elements in your HTML – all of which makes for faster production and less chance of errors when creating a page.

Grids
There are a lot of excellent free CSS grid resources.  Using a predefined grid system can make going from design to code a simple, speedy process as long as the grid is part of the plan from the beginning of the design phase.

Reset.css
Though some day soon, you won’t need to use this trick.  But for now, be sure you use a CSS reset to make sure as much of your code appears the same way, from browser to browser, as possible. There are multiple variations available on the web, for free.  A quick search will find a number and more detailed thoughts on using them.