We all know what a word like table refers to? We all visualise a chair if you say the word. What do you visualise when you are told the word myfocus123? It’s about as meaningful as calling a CSS element Derek – actually that could be more meaningful. When it comes to naming your CSS it is a key to give meaningful names.
And why?
There are many reasons why using relevant names are great. It makes your code easy to navigate through just not for you but for for anyone else. It’s a case of a small thing you can do which not only keeps the sanity but can reduce things like debugging time. It’s one of the basics in development that sadly a lot of web designers seem to ignore with their CSS naming. That’s not to say a lot of developers couldn’t do with learning or being reminded of the relevance of naming things what they refer to.
Keeping it consistent
Relevant names also touch on naming conventions. I have my own and each probably will have their method for this. Personally, I like using _ for linking spaces in words. This way I can have more ‘realistic’ naming such as main_page_text. However you do it a big part of it is being consistent. If you are consistent and relevant your code will be easy to read and easy to fix the things that are broken. Should you come back to a site after a while away you will have less of a steep curve to get back in and fix or work on the system.
A little organisation goes a long way
By producing tidy code that makes sense to read with relevant and consistent naming, you are able to make life a lot easier for yourself. It’s a small thing you can do to not only make life easier for yourself but easier should anyone else read your code. I see it as taking coding to the next level and moving out of the tunnel vision that only you will ever work or interact with your code. Code can be elegant and this is just one way you can work towards having code that looks good to read and works well. Your code formatting should not be ignored when considering the design of your site.
To this I’d add creating titles for sections of your CSS. I like grouping things by area or page or content types, then using commented-out text to title those sections (/* Form Styles */, for example). It is nice for me as I develop the CSS and nice for future people who will need to use and work with what I’ve done.
I prefer to use camel-case for naming IDs and classes. Also, I think it’s important to note that ID/class names should not be named based on their location on the page, but by their content.
E.g. use #sidebar instead of #rightColumn
Why? You may want to keep the same HTML but just change the CSS so the sidebar may move from the right side to the left in your new layout. That would make #rightColumn wrong because it would now be on the left.
I also like to have a globals.css file with general tag styles, like h1, h2…, form, input, div, body, strong, em, etc.
Thanks for the comments, you’ve both given me an idea of a follow up.
@Adi: I agree that sectioning is a great way for bringing sanity back. If only you use the basic general elements like form, navigation, layout and typography.
@Mark: Camel case is good and I agree that having the name mark their position is a really great method. There are for and against arguments for having a global css file. I tend to not use one for over a certain number of css styles to help with server load.
Good advice, Tammie. One addition from me: Some designers fall into the trap of naming elements things like #red_border_container when it should be called something like content_container. Just because it’s red now doesn’t mean that it will be in the future.
Ah – I think Mark beat me to my point there.