Proper class & id Naming...


Well-known member
I was wondering if it is proper to use all lowercase, or is it ok to use uppercase as well.



or should it be all lowercase/


I'm currently using _ and - to separate words, to make it an easier read. I also heard that using uppercase effects validation of doc type.

Is the proper terms for the example above just called a id or class, or is it called something else like attribute? I always get confused on that...


Well-known member
Kier said:
Q: How are variables, classes etc. named in the code?

A: We are using the following conventions:

We use camelcase for PHP variables and functions, and underscores for class names and tables and fields in the database, so it's easy to see in the code what you are dealing with.

Variables: $myVariableName
Functions / methods: myFunctionName()
Classes: My_Class_Name
Database fields: my_database_field
XenForo makes use of HTML 5's data attributes in order to provide cues for JavaScript within the HTML markup, for example:
<form id="myForm" action="forums/44/add-thread" method="post" data-redirect="on">
These data attributes are accessible in the XenForo JavaScript through jQuery's .data() method, for example:
var redirect = $('#myForm').data('redirect'); // on
Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:
<tag id="myTag" data-fooBar="x" />
would be accessible with
jQuery 1.5 and 1.6

However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:
<tag id="myTag" data-fooBar="x" />
is only accessible with
Changes have also been made to convert dashed data attributes to camelcase, so :
<tag id="myTag" data-my-data-attribute="x" />
is translated into
So why do I need to know this?

Although there is a bug in jQuery 1.5 and later that prevents us from upgrading the version of jQuery that we ship with XenForo, once this bug is resolved, we will take steps to migrate to jQuery 1.6. When we do, all data attributes in XenForo will be subject to the new case sensitivity constraints.

Therefore, you should avoid using camel-cased data attributes in your HTML, and stick to all lowercase attributes such as
<tag data-nameofitem="x" />
or use dashed attributes such as
<tag data-name-of-item="x" />
and then expect to deal with .data() items of 'nameofitem' and 'nameOfItem' respectively.

The important thing to remember is that
<tag id="foo" data-nameOfItem="x" />
will no longer be accessible using
and will be accessible only using
Start updating your code soon :)