[thelist] Suggestions for naming conventions for CSS id/class & javascript variable

[Will]

On Wed, Jan 14, 2009 at 11:59 AM, Jack Timmons <jorachim at gmail.com> wrote:
> On Wed, Jan 14, 2009 at 1:53 PM, ivo <cervantes_vive at yahoo.com> wrote:
>
>> Any suggestions for approaches when naming HTML elements ids and classes?
>> And corresponding JavaScript variables?
>>
>> I am working towards a component based approach for my HTML/JS elements.
>> What conventions are already in use to prevent naming collisions and to
>> allow tightly coupling js code with html?
>
> If you want to prevent collisions, prefix you names with the name of the js
> package. (jq_this or alphaspaghetti_calendar) If you want a naming
> convention, how about naming them what they are?
> --
> -Jack Timmons

I use both of these conventions(?) as well.  I id/class things what
they are. I try *not* to abstract them at all. I try to remember I'll
spend a lot more time maintaining my codebase than I will writing it.
I prefer full english language ids and classes with a few exceptions
(nav, col...).

Same goes with namespacing (prefixing) - some prefix and then full
naming.  Particularly with function names and variables. I really want
to know at a glance what it does or contains. Even more so in six
months.

One thing to keep in mind if you're going the component route is that
elements can have more than one class name. div class="callout sale"
where all callouts have a border and margin and sale gets a starburst
in the top right.  might have a callout that's not a sale and might
want the burst on some other container.  this route has saved me from
a lot of repeated gunk in my css file.

When I'm working on a large site and get all componenty with it, body
classes become really important. That way I can keep my HTML as
generic as possible and use descendant selectors to do what I need to
with it. Recently finished a site that had a car selector widget. The
widget appeared in three very different contexts and had to be styled
differently in each. By making out with the cascade we were able to
use the same widget source across all three. Sorry, tangenting here
but the cascade helps you do Jack's suggestion of "name it what it
is". That thing was always id="car-selector".

If you want to use the same variable/function names as html id/class
names, maybe use a capitalization convention and or namespacing.
f-this(), var = v-this, id="This", class="this".

Will