jQuery tip: Visually separating DOM elements in code

Here’s a quick tip I picked up from Chris Coyier (the genius behind CSS-Tricks and Digging Into WordPress).

To help keep variables that contain DOM elements visually distinct from other regular variables, just prepend a $ (dollar sign) to them. Example:

<script type="text/javascript">
// assign the variable
var $div = jQuery('#myDiv');
// Do stuff to it
$div.animate({width: '200%'}, 1500);

This way, you can easily pick out which variables contain DOM elements when viewing code, without resorting to excessive naming conventions (such as divContainer or divDomObject, etc.). Your code stays clean, lean, and easy to read.

Rock on.