One thing I type a lot when writing new CSS is the following:
#some_element { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
I just clocked myself, and it took me 20 seconds just to type those properties initially.
If I have rounded borders on many unrelated elements, this quickly gets very tedious, not to mention that I often end up changing the border radius multiple times during the course of development. Every time I do, I have to change the pixel value for every single one of those items.
Really, these values should change together. No typical scenario would require that Safari’s borders be more or less round than Firefox, or vice versa. That’s where TextMate snippets can come in handy.
Fire up TextMate and open the bundle editor menu by typing ctrl+alt+command+B. Scroll down to the CSS area, and click “Create New Snippet” at the bottom arrow. Type out the CSS from above, except wherever you see a 5, replace it with ${1:5}. The $ symbol represents a tab stop, and the 1 means that these values will always change together. Another good practice is always putting a $0 at the end of your snippet so that you can quickly tab to the end and continue typing without needing to scroll.
Finally, we need a good shortcut name for this snippet. Next to tab trigger, type “br”. Now, whenever you type br+tab, you’ll get that entire line, defaulting to a border-radius of 5px. If you hand-code a lot of CSS, this will save you a lot of time. Other good candidates for snippeting would be the new, tediously long CSS3 properties like text-shadow, box-shadow, and the like.
You can see this and other snippets we’ve accumulated on Snipplr.