Deciding on a CSS standard

I have recently found my self spending more and more time reading people’s blog posts and seeing some a wide range of different coding styles. My current area of interest that is utilising most of my time is HTML5 and CSS3. This has led me to see people writing class and id names with the hyphen syntax, i.e. ‘different-class’. I had not come across this style before, or at least had never paid enough attention to the style of class name used, as I was set in my camel case ways. This new approach however got me thinking about the positives and negatives around the different ways of naming my classes and ids. I had some spare time so I got onto Google and started to see if anyone else had any reasonable arguments one way or another. What I found surprised me quite a bit as it looks like I have lived a very sheltered, narrow minded life with regard to HTML/CSS naming. Everyone else is already on the hyphen bandwagon and I am late to the party. I have recently started a new greenfield project at work and with this came the opportunity to try something new within an enterprise project. This is something I love to be able to do as it is not always clear when testing in a small project whether it will work when rolled out into an enterprise scenario. I took this opportunity to try the new naming style and see how it looked. I am now 3 months into the project and can safely say that I am now a hyphen convert. It took a few weeks to get in the position where I wasn’t getting a HTML page all written out and then realising I had used camel casing. I’m now on top of that and didn’t lose too much time putting it right. It just feels right and makes for much more readable code along with a strange benefit I have found which I am finding hard to explain as the names I am using would be the same regardless of style. I am finding that the names of the HTML/CSS are more memorable when using the hyphens and the only reason I can think of for this is the ease of readability is helping them to stick in my mind better. If you are reading this and are still camel casing your HTML/CSS and have the opportunity to try out hyphens within your class and id names then give it a go and let me know what you think and find. I would love to see whether anyone else has had a similar experience as me with regard to being able to remember the names better since changing styles.

I have included some examples below so you can see for yourself without having to code up your own examples:


Hyphen Example


Uppercase Example


Lowercase Example

Join the ConversationLeave a reply