CSS Tips

  1. Define CSS reset first
  2. Define base styles second, e.g.
    ul, h1-h6, p, b, etc
  3. Define specific styles that may override base styles

Use classes instead of IDs to be safe and make coding easier.

For each page, add an ID to the body element that mirrors the URL to the page, e.g

www.somesite.com/products/fish/(index.php or index.html)

<body id=”products-fish”>

www.somesite.com/products/kites/

<body id=”products-kite”>

This will make it easier to override styles in specific pages without having naming conflicts.

Photoshop Grids to Create CSS Sprites

When creating sprites containing many images, it can be hard and time-consuming to find the position images in the sprite. To simplify this process, create a Photoshop file with a grid of horizontal and vertical guides spaced X pixels apart from each other and turn Snap To Grid on.

Here’s a grid you can use …

Coming whenever I have time (which is not often).

Printing CSS Sprites

Using a sprite image to consolidate all images into one file decreases download time because it reduces the number of HTTP requests required. However, sprites are used as background images and browsers don’t print background images (unless you manually tell them to do so). One workaround is to use jQuery to convert all background images into regular <img> tags. Here’s an article that explains how to do it:

http://quickleft.com/blog/printing-css-sprites

CSS Style Best Practices

When writing CSS styles, the following rules make for easy code management and more efficient processing.

#id
Only reference one ID name in a style.
Good: #breadcrumbs { … }
Bad: #content #breadcrumbs { … }

tag.class
When reference classes, prefix them with the tag they are applied to.
Good: ul.features { … }
Bad: .features { … }

tag
If a style can be applied to the tag without a separate class or ID, then just style the tag. e.g. a { … }

Other good practices are to

  • use a CSS reset
  • use Modernizr to accommodate non-supporting browsers
  • name your styles symantically (according to type of content, not the style), e.g. feature-links as opposed to red-links

Outsource Removal of Background Images

If you have an online retail store, you probably have many product pictures. You can hire a professional photographer to take and clean up photos, at an expensive cost, or you can do it cheaply. Here’s what I do that’s pretty cheap:

  1. Take pictures in my garage against a solid color background (e. g. a white wall)
  2. Hire someone in India via Elance.com to remove the background
    I pay around $0.50 per photo and my guy completes about 100 photos in a couple of days
  3.  Clean up the images in Photoshop
    Using “Auto Tone” and manually adjusting the Levels is usually sufficient
That’s it!

How To Easily Align Objects in Photoshop

To align any object in Photoshop relative to a bounding selection, do the following:

  1. Click on the layer containing the objects you want to align
  2. Using the selection tool, create a selection.
    Normally, if you want to align objects relative to the entire canvas area, select the entire canvas area (CTRL+A)
  3. Click Layer > Align Layers to Selection and then click on an alignment option

This will leave you with perfectly aligned objects.

Tips on Cleaning Up Source Code

Seeing clean, structured code is always nice.  Here are some tips to automate cleaning up messy code.

1. Use HTML Tidy to clean up code
There are some online code cleaners based on Tidy that can do this for you like at http://infohound.net/tidy/

2. Dreamweaver “Apply Source Formatting”
Dreamweaver can format your source code based on a format profile. Find it under Commands -> Apply Source Formatting. This will also trim unnecessary whitespace and the beginning and end of lines.

3. Trim unnecessary whitespace at beginning of line
REGEX: ^s+
REPLACE: empty string

 4. Trim unnecessary whitespace at end of line
REGEX: ^s$
REPLACE: empty string

5. Convert spaces to tabs
In Dreamweaver, select / highlight all the code, right click, select “Convert spaces to tabs”

6. Delete empty lines
REGEX: [rn]{2,}
REPLACE: n

Javascript: Self-Executing Anonymous Functions

When writing functions in Javascript that you only need to run as soon as it’s created and not have to reference again, you can create a self-executing anonymous function using the syntax:
[cc lang=”javascript”](function(){
// your code goes here
})();[/cc]

In jQuery, you can have your anonymous function called after the document is ready as in
[cc lang=”javascript”]
$(document).ready(function() {
(function(){
//your code for the module
})();
});[/cc]

If you’re not using jQuery and want your anonymous function to be called after the page loads (as opposed to immediately before the page finishes loading), you can do

[cc lang=”javascript”](function(){
// your code goes here

// add event listener to trigger function call on page load
if (window.attachEvent) {
window.attachEvent(‘onload’, addHiddenFields);
} else {
window.addEventListener(“load”, addHiddenFields, false);
}
})();[/cc]

Another benefit is it doesn’t pollute the global namespace by not overriding other functions. To learn more, visit http://briancrescimanno.com/2009/09/24/how-self-executing-anonymous-functions-work/  and http://stackoverflow.com/questions/8248974/executing-jquery-functions-on-dom-ready-from-inside-a-module