3

There are some classes that are there for css, and there are some classes that are there for JavaScript.

What naming convention do you use to denote "look for this class in the JavaScript file(s)" as opposed to: "Look for this class in the css file(s)" as opposed to "Look for this class everywhere".

Phillip Senn
  • 46,771
  • 90
  • 257
  • 373

4 Answers4

3

If possible, I think what should happen is this

  1. build the structure of the site in HTML

  2. add styling with CSS (here's where the classes are added)

  3. hook javascript via already created classes and IDs

  4. add additional classes/IDs only where necessary.

In most cases this keeps it all wrapped together nicely.

If the scripting is done last (which I think is best), the structure should be there to support it.

So, in almost all cases your js classes/IDs would mirror your CSS stuff.

EDIT

To provide additional info as per @Bryce Siedschlaw's comment:

Most of my classes/IDs are based on the element's function. Some examples of rules I created/modified today

#successExplain{}  
.successImgs{}
.continueRead{}
.continueRead a{}
.continueRead a:hover{}
#tagCloud{}
Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • 2
    I may be missing something, but I don't think you actually answered the question. You didn't actually mention how the CSS stuff should be named. I think that might be a vital part of the answer. – Bryce Siedschlaw Jul 25 '11 at 19:39
  • I'm thinking of the maintenance programmer that sees class="X" and wants to know where X is used. He can search for .X in the css files, and also in the js files now that I think about it, but he would also have to search for 'X' and "X". – Phillip Senn Jul 25 '11 at 19:41
  • @Bryce. True. I was showing how my development affects the class creation in both CSS and JS and how both end up with the same classes nearly all the time, therefore no special distinction. – Jason Gennaro Jul 25 '11 at 19:46
  • @cf_PhillipSenn. I think the maintenance programmer will dive into either the js or the CSS depending on what he/she is updating/revising. Sometimes you will need to go into both. – Jason Gennaro Jul 25 '11 at 19:47
  • @Jason. Yea, I kind of figured that. So do you try to use camelcase for everything then? Or underscores? – Bryce Siedschlaw Jul 25 '11 at 19:49
  • @Bryce. When I first started developing with HTML & CSS only, I used underscores for everything. However, once I started programming with js, I went with camelCase and stuck with it. I prefer it now. You? – Jason Gennaro Jul 25 '11 at 19:55
  • @Jason. It's mostly dependent on the data type I'm naming. In css, I tend to use hyphens. In just about any other language I'll use camelcase for classes, functions or other structures and lowercase and underscores for local variables like ints and strings. Also, it sometime depends on the project. Not sure if you've ever used Django before, but I'll name the view functions in camelcase and all other functions with underscores. So... for me it just depends on what I'm doing. – Bryce Siedschlaw Jul 25 '11 at 20:06
1

No real naming convention.

Sometimes (most of the time) I use classes both for css and for js.

Naftali
  • 144,921
  • 39
  • 244
  • 303
1

I try to name my classes based on the element they're describing as opposed to how they will be used. If I have a bunch of .definition elements on my page, it doesn't matter whether I will make them green or if I want to have jquery loop over them, it's still a definition.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
1

I try to name them using noun modifiers, so adjectives, prepositional phrases, or sentences using the verbs "to have" minus the subject. E.g.,

  1. adjectival : upToDate, stale
  2. prepositional : fromSameUser
  3. verbal : hasProblems
Mike Samuel
  • 118,113
  • 30
  • 216
  • 245