However Espresso is in a position where it can do some damage to it’s biggest competition, Coda. The interface on Espresso is much cleaner and makes entire project management much easier. The left sidebar is split into three sections: Workspace, Project, and Publish. Add a folder where your project is located, or start a new one and Espresso will keep it wrapped in a single file until you are ready to publish. The Workspace is a good idea done well, allowing you to easily switch between files you are working on. 

CSSEdit’s fantastic editing functionality is also here. Coda’s editor is feeble in comparison and offers another win for Espresso. While I couldn’t find the split, or GUI views of CSSEdit in Espresso, I still found coding supremely faster than in Coda. The toggle-able right hand sidebar displayed all of the elements in webpages or stylesheets and I found it to be particularly helpful when working in large files. 

The HTML editor is also akin to that of Coda’s, not better but not any worse. Collapsable elements meant that the coding process was much cleaner, and allowed for the largest of documents to be manageable. Espresso also handily syncs files with a server and relays any changes either performed on the machine or the server side. 

While Espresso is definitely a step in the right direction, I couldn’t help but miss some of my favourite features from Coda, or CSSEdit. Like I said previously CSSEdit’s wonderful and helpful split views are nowhere to be found, and I couldn’t work out how to make groups. Live Preview is there, but hidden in an obscure location under the “New” button.

All in all, Espresso is a great project management tool, but right now I don’t think it is quite ready for day to day use. I shall stick to CSSEdit and TextWrangler for now.

Written by Steven Radford. I'm a 16 year old designer and coder from rainy Bristol, UK. Coding since 2005, and located at http://www.graphicsplant.com. I code XHTML and CSS, and am currently learning JQuery. 

What's your favourite program for coding? Do you use one? Post your comments and start the discussion below.

1. Comment.

CSS comments can be made for a single line or multiple lines, but regardless of how you pass your comments they are always passed to your users reading the file. So, not only does it make it easier for you to get to a certain section in your code, but it lets your users see it too. For instance, you could include a copyright notice, a contact number, a website. Anything! Comments help you out in more ways than one but the most important, it helps you find certain elements in the file. For instance, put a comment above all the link styles, then when you go through your work, you can find and edit the styles to your liking. Quickly. Another use? WordPress uses these comments to get the theme name, copyright and more. For the full syntax for WordPress, please see our Coda Clips post. 

Here's how you comment CSS in the cleanest way.

/* All CSS comments begin with forward slash and asterisk
and end with an asterisk and forward slash regardless if
the comment is many lines in length or if the comment is
only one line. */

At the top of every page I code, I'm adding in the following syntax, not only does this give users information about where it originated and who by, it gives me a chance to say that they can't copy it, redistribute it or anything else of that nature and that they are free to have a look around and see how I've done things.

/* All work copyright 2009, Lewis King. All rights reserved. This CSS file was originally created by Lewis, and  you cannot use it for your own work in full or parts. You're welcome to have a look around to see how things are done, but nothing can be taken without his express written consent. */

Then, underneath that, I categorise everything in to the following sub headers.

/* Main */
/* Reset */
/* Link Styles */
/* Header */
/* Wrapper */
/* Content */
/* Footer */
/* Other */

2. Reset.

Use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something. It can be as simple as removing the margin and padding from all elements:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Now I personally don't see the point in using a big reset like Eric and the YUI, personally, I only reset the padding and margin, like the example above. It's just the way I am, but, if you don't run any sort of reset, it could be a lot of time wasted, so give it a go.

3. Start right.

CSS is worthless without a well formatted document. You need to write your HTML before you write your CSS. If you write the CSS first, it'll be a lot harder to get the end results and will take a lot more time than it's actually worth. After remembering all the elements, how you've named them and what they do, trying to add them into a document that might not work the way you want, is going to take a good few hours. Write the whole HTML document first, then do the CSS. Not the other way round.

4. ABC

By alphabetizing your work, you are creating consistency that will help you reduce the time you spend searching for a specific element. By doing this, you can quickly get to the specific property you want to edit and work on it there and then. It also makes your code cleaner for you to read at a later date, along with your users who want to quickly see how you've done a certain thing. 

5. Use Coda Clips

Back to my favourite coding application again, you must thing we're sponsored by it! Coda includes a little add-on of sorts called Coda Clips. What they do is genius. They are a great way of inserting common elements and syntax into a file with just a click of a button. Open up the Clips menu and you instantly see a bunch of different HTML elements, that you could forget when creating a site from scratch. After choosing the one you want, you simply click it, or drag it to where you want and it's instantly inserted into the page. They come with every install of Coda, even the free trial and are editable down to the finest detail. You can add your own, edit the defaults, and more. For some of our favourites, please go here.

What's your favourite way? How do you speed up your coding? How do you keep your code clean? Post a comment below to start the discussion!

WordPress CSS Header - Install Clip

/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author URI:
Tags:
*/

Apple Touch Shortcut - Install Clip

< link rel="apple-touch-icon" href="/apple_touch_icon.png" />

PHP Include - Install Clip

include('<<**SelectionInsertionPlaceholder**>>.php');

Clearing div - Install Clip

.clearing {clear:both; height:0; overflow:hidden; margin:-1px 0 0 0;}

W3C page validator - Install Clip

<a href="http://validator.w3.org/check?uri=<<**SelectionInsertionPlaceholder**>>" title="Validate this website">(x)html</a>

That was just a few clips - there are loads on the actual website. I hope you find this post useful because I sure did. I absolutely love web tools like these. Oh and thanks for reading! Feel free to leave comments and feedback and tell me what you think