• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Proper class & id Naming...

Xarcell

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

Example:

#xenForo
.xenForo

or should it be all lowercase/

#xenforo
.xenforo

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...
 

dieketzer

Well-known member
#3
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

http://xenforo.com/community/threads/random-questions-answered.114/#post-6838
XenForo makes use of HTML 5's data attributes in order to provide cues for JavaScript within the HTML markup, for example:
HTML:
<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:
Code:
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
$('#myTag').data('fooBar');
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
$('#myTag').data('foobar');
Changes have also been made to convert dashed data attributes to camelcase, so :
<tag id="myTag" data-my-data-attribute="x" />
is translated into
$('#myTag').data('myDataAttribute');
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
$('#foo').data('nameOfItem')
and will be accessible only using
$('#foo').data('nameofitem')
Start updating your code soon :)