Artmov: PSD to HTML

I couldn’t stop asking if a standard naming convention for CSS’ IDs and Classes existed. I couldn’t find anything that’s suited for me and for CSS WITH COLOUR’s coding style, but I’ve found a solution: creating my own naming convention – which will, eventually, become part of Artmov’s handcoding style guide – an ideea that I’ve started working at the end of June, 2009 and I’m still working on it.

Besides the regular header, footer, left, right naming stuff I couldn’t find anything on Google, but some useful ideas that can help me start a handcoding style guide. The biggest disadvantages that I’ve found is that I didn’t like how the naming were written in CSS. I prefer #right-column, rather than #rightCol.

1. Every frontend developer has it’s own coding style

An important step to I’ve considered when started a style guide for the code written at Artmov. Nevertheless, a certain guide for writting the code is important for maintainability of the code and it’s more recognizable afterwards. This is why I’m looking for a standard convention on the IDs and Classes of each CSS stylesheets that I use and write.

In the style guide that I’m talking about I try to find a convention that’s suitable for me in naming the images/files and what directories should it be positioned, etc.

2. Abbreviation in CSS?

A good website will need to keep it’s size at a low level – this would apply to CSS too, right? For a general website, the general stylesheet wouldn’t be higher than 30KB, my guess. But abbreviation in the IDs and Classes of the CSS stylesheet will remove a few bytes from the stylesheet (not much at all, but a very few).

Also, to better maintain and recognize the CSS code, abbreviate the general IDs and Classes. An exception is the website’s structure IDs/Classes, like: header, footer, page, etc – which is better to remain the same and not abbreviated.

For example. I’ve used the abbreviation btt for anything that’s a button, both in CSS and in the image filename. btt_submit.png will be the name for the submit button and .btt-submit will be the CSS Class in style.css

Button is not abbreaviated btt, but btn - to be changed.

I found out AcronymFinder which I’ll use in finding abbreviation of some general names that will occur in the procces of slicing a website at CSS WITH COLOUR.

3. IDs and Classes written in lowercase and separated by “-”

I’m working on a big project that uses a lot of IDs and Classes and after writting more then 150 lines of code I’ve found out that the code is more beautiful if it’s written in lowercase and separated by “-”, rather than not separate it and non-lowercase. Besides the beautiful part, it’s more easier to maintain the code and find whatever IDs or Classes you’re looking for.

An ideea post. An ideea that I’ve started working on very intensively in the last period; I’ll also write a post with the abbrevations that will be used in the stylesheets used at Artmov later on.