blog.critical

Organised CSS with Textmate

I like to keep my CSS files nice and organised. I tend to create a header on each CSS document with some basic info on who created the file, when and what site it is for, kind of Wordpress theme style. I also like to keep each section of the CSS, be it navigation, structure, footers or whatever in nice manageable chunks, separated by a pretty little header. Finally, as most of you will know, I have just switched to a Mac, and have chosen TextMate to be my text editor of choice. In order to speed up the creation of my CSS files i have created a couple of snippets, i would like to share these with you now.

The point of this tutorial is not to explain how to create snippets, that is done rather well over at the TextMate Manual, this tutorial is to give you a couple of simple snippets for you to try out and start organising you CSS files, quickly and simply. Making it a lot easier to go in and make changes later on.

/*
Site Name: ${1:Critical Web Design}
Version: ${2:1.0}
Author: ${3:Andy Pearson}
Author URI: ${4:http://www.criticalwebdesign.co.uk}
`date "+Date: %d/%m/%y%nTime: %H:%M:%S"`
Description: ${5:-}
*/
$0

This snippet creates a very simple header for your CSS file, i find its good to add these into the top of your file, as a quick reference to what the file is for and where it lives (especially useful as all my screen CSS files are cunningly named screen.css). I decided to use “doctype” as the tag trigger for this set as I figured it made sense. So typing “doctype” and hitting tab, will print out the snippet at select the site name, I can then over type this if I need to, and hit tab to go onto the next line, and so on. The snippet uses a shell command to print out the date and time, which is a lot simpler than typing them out manually!

Don’t forget you will want to modify this code as it contains for personal defaults. It’s really simple to create or edit a snippet, check out this document on the manual for more information. Below is an example of the generated code.

/*
Site Name: Critical Web Design
Version: 1.0
Author: Andy Pearson
Author URI: http://www.criticalwebdesign.co.uk
Date: 15/06/06
Time: 20:59:43
Description: -
*/

The next snippet I created is a really simple way of adding section titles to my CSS. It’s code to organise your CSS into sections so you can quickly browse through the document to find a certain style.

/*
---- ${1:${TM_SELECTED_TEXT:Header}}
*/
$0

I set the snippet to be triggered when I press shift+command+> but this snippet works in 2 distinct ways, the first is just as my previous, pressing the shortcut will create the CSS and the word “Header” will be highlighted, I can then over type it and tab out of the snippet just as before. The other way it works is I can can actually type out the word I want to use as the header, then select the word and hit the shortcut. The word I just typed is auto-magically wrapped in my code and selected so I can either over type if I made a mistake or tab out of the code. The code below shows the resulting header.

/*
---- CSS Header
*/

So that’s it for now, I haven’t even scratched the surface on how to use snippets or how useful they can be, I recommend diving straight in, think of a common chunk of code you find yourself typing often (or copying and pasting from other documents) and make it into a clever little snippet. Garret Dimon also has a great article on snippets.

---