Comments on: CSS Tip #2: Structural Naming Convention in CSS

By: Archana

Archana — Fri, 25 Nov 2011 05:36:22 +0000

Nice Article about naming conventions. Thanks for the info

By: Skaman Sam

Skaman Sam — Tue, 28 Jun 2011 15:20:47 +0000

I really liked this article and sent it to my rails dev team. In my professional life, I prefer to think of #header and #footer and general areas, then get more specific, with hyphen-levelling, such as:

#header, #header-logo, #header-logo-text, #header-motto,#header-motto-emphasis, #header-funnyPerson-head-rightEye-eyebrow-hairFolicle

This just makes sense to me. It can make the selectors a bit long, but is perfect for parsing with regex.

As a bonus, Rails like to create name with underscores to separate objects, so I will name them #header-name in my code, and Rails with turn it into something like #header-name_person_name. I can then find the objects by splitting the id at each underscore. Nifty!

By: Derek

Derek — Sat, 18 Jun 2011 02:20:30 +0000

This is just like HTML5.

By: cooljaz124

cooljaz124 — Mon, 11 Oct 2010 12:09:05 +0000

Yes, Point taken. Very nice one.

By: Aziz

Aziz — Tue, 08 Jun 2010 17:12:18 +0000

this is really great post. I’ll apply this when writing CSS such impart new knowledge on me…thanks for the share

By: Ko

Ko — Tue, 08 Jun 2010 17:11:55 +0000

The one thing I hate about design is how all of the different browsers are different and need to be accounted for.

I use resets a bit but probably not enough and many designs therefore are flawed in so many browsers because of this (Why can’t everyone just use FireFox?)

By: Kimball Le

Kimball Le — Wed, 14 Apr 2010 00:24:19 +0000

how do you feel about css frameworks such as 960 gs and the naming of classes?

By: Sidra Blue

Sidra Blue — Thu, 04 Mar 2010 02:59:00 +0000

Good read, although personally, I hate long names that take up valuable filesize. With the way most websites are, you would want to reduce as much as possible, your filesizes that are being downloaded for a view.

There are the standard class names which would be common for all sites like #header, #footer, #content, but everything else is normally different these days.

Coming up with shorter but easily understandable names, (eg using ll in place of left, or rr in place of right, etc) and have an accompanying document on how these class names are so, would hopefully help Dave Newbie easily understand and help them “immediately start work without having to constantly scratch their heads”

Most would probably disagree though, but that’s just our way =)

By: Irene

Irene — Wed, 16 Dec 2009 03:19:54 +0000

Thx,This is really useful for us.

By: Dylan Bauer

Dylan Bauer — Tue, 21 Jul 2009 08:55:14 +0000

Excellent read, I didn’t even realize I was making some of these trivial mistakes!