Have you ever heard of Coda? Coda is a beautiful Mac editor. I have been using Coda since I bought my Mac Book Pro last December and I am very happy I bought it. I use Adobe Dreamweaver at work but I still prefer Coda. It has got very clean interface. It is not overloaded with menus and buttons. All the necessary functionality is easily accessible from very carefully chosen and designed navigation. They also provide free updates which is very cool so I don’t have to buy new version every time they came with new features. I do all my XHTML, CSS, PHP, SQL and JavaScript coding in it. You can even divide the window into sections so you can see have your PHP code next to your CSS code and browser view. There is nothing like “design view” you might know from Dreamweaver which anyway does not work most of the time, instead they use web kit to render pages inside Coda.
Not for “weekend” designers
I do think that Coda is for professional only. It’s for coders who know syntax and there is absolutely no need for “design view”. I personally think that companies like Adobe should not waste their time trying to develop WYSIWYG. HTML and CSS are not that difficult to learn so people who really want to build sites need to learn them anyway. Weekend designers can just save MS Word document as HTML. I don’t think they will spent time to learn how to use CSS in Dreamweaver anyway.
Coming back to coding
I have seen couple of techniques used for coding CSS or dynamic languages. I would be interested to know how you guys manage your code and what techniques you use.
I try to divide my code into logical files. For example in CSS I have reset, layout, color, typography and IE files. I think that is fine for blog like this but for large sites I would go for 1 style per section plus general file which takes care of header, footer and main layout.
What do you use?
Do you use Snooks practice and put all CSS properties on one line for each selector or the standard method where you create new line for each property? Do you indent your CSS code depending on the HTML structure?
I use the second method for my CSS and I also indent the CSS code. You can see the screenshot bellow. When it comes to HTML I indent code the way that opening bracket and closing bracket are on their own lines where the content itself sits on its own line between them as you can see on the image bellow as well.
Comments
I’ve tried out a few different approaches for my css, but I’ve found that single file css is still my favourite. When you use a lot of different files it can become tedious to find and edit the correct style.
Perhaps on extremely large sites I would use an individual css file for that page and another ‘main’ file.
I like using single line for selectors with only a couple of properties or are small sections, and multiline for main or large selectors.I personally don’t like indenting my css. But it’s all very subjective. :)
I divide the pages up by the body id and have a section with the varied layouts. It all very simple.
Without trying to spam my site, if you check out the css, that’s my latest format.
@anthony – I like your site a lot and also the way you do your CSS. Its all very clear and easy to read. I think the biggest advantage of your approach (having it all properties in line for a single selector) is that you can very quickly scan through the whole CSS to find what you looking for.
My CSS file is lot longer but I use Firebug for debugging so I always know what line I need to change because I change it in Firebug first. I also use “=” sign for name of the sections so I can quickly search for them without getting results I do not want.
I actually like both CSS methods and still have not decided which to use in the future projects. I would really welcome some kind of standardization. If there are some rules set up by web standards group or w3c I would follow them.
I follow a similar approach to Anthony when it comes to CSS. Everything in a single file and alter the layout of properties depending. I have been considering starting to use separate files though recently. I can see that there are advantages to it but it just seems like having everything in one file is so much easier to manage than splitting it over several.
@Ash good to know, my previous line-manager was using the same approach. As I said before I do not mind any of these methods as long as the code is clean and readable. It all comes to personal preferences but I always like to do thinks right way and follow the rules. It’s just a pity there are no such rules for CSS yet.
I think there is a big space for standardization in our industry. Another example could be naming conventions where HTML 5 is bringing some useful stuff such are header, footer tags etc…
Just a tiny pet peeve of mine: Mac, as in Macintosh computer, is not an acronym, and thus should not be capitalized. MAC, as in MAC address, stands for Media Access Control. It also stands for other things in other contexts. That’s all.
BTW, nice site.
@Mr.Fussyfont – thanks for that, I have fixed it immediately. My spelling is really not very good so I am happy you are helping me with that.
I am glad you like the site.
I have some syntax coloring themes for coda that I create on a regular basis if your interested.
themes