DREWspective

I’m sat here at work, doing my thing of producing CSS very quickly. It suddenly dawned on me, having looked through a 1300+ line CSS file that I previously created, that even I get confused by the style names I use. In different situations I tend to mix camelcase and lowercase, and the result is usually confusion (and at some point, guilt).

Wanting to be consistent and code in a specific way, I did a quick search on the Internet for established CSS naming conventions. There are none.

I did, however, find an interesting weblog post by Andy Clarke that offered suggestions for common situations. Theoretically it’s very similar to how I name elements on the pages I build, though I use different names:

#wrapper

#header

#logo

#search

#middle

#sidebar

#content

#footer

Basically I usually reserve IDs for layout elements, like the header and footer; everything else is unstyled as much as possible, and uses classes when it’s not.

For consistency, I’ve decided to follow ‘the norm’ (you’ll never hear me say that again!) by using lowercase names with hyphens for spacing. I’ve started to do it now with this CSS, and it already looks a lot more legible.