Use Safe Identifiers Like Class Names Or Variable Names in Your Web Templates

Stop guessing about what is a valid name for a new CSS class, a JavaScript variable, a PERL function or any other identifier!

Use the common, shared set of rules for those languages. It could not be any easier. Print out that article and keep this valid reference handy for the most important languages on the Web.

Web masters, Web designers, and programmers do not have an easy job, when it comes to update templates, files, and programs for a Web site. In most cases they will have to build on "code" that has been written by somebody else. Furthermore there are many different languages that have rules of their own.

* HTML, XHTML, XML
* CSS
* JavaScript, DOM
* PHP, PERL

Sometimes the differences are minor, but the interpreter, browser, the code validation tool will complain, if the syntax of a particular language is violated. We humans tend to overlook the subtle differences between languages. A computer does not.

1. Characters you can use safely

Use only the following ASCII characters for your identifiers, variables, and functions names.

[ABCDEFGHIJKLMNOPQRSTUVWXYZ] -> [A-Z]

[abcdefghijklmnopqrstuvwxyz] -> [a-z]

[0123456789] -> [0-9]

The beauty about the old-fashioned ASCII character set is:

All ASCII characters are available on any computer platform in any country in any language setup.

Even though current standards allow the use of a wider set of characters in most cases, restricting it to the ASCII subset avoids problems with older or badly configured operating systems, servers and browser and different regional/language setups.

2. Case-Sensitivity

Most identifiers are case-sensitive according to the language specification, that means "Web-site" is different from "web-site". Some are not. For example, note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

To avoid potential problems and ambiguity type the identifiers always in exact case, but treat them as they were case-insensitive. Here is an example, do not use "Manual" and "manual" as two different identifiers. You could mix them up too easily, and "buggy" software could mix them up, too.

3. HTML, XHTML ID and NAME Tokens

For Example:

* No spaces
* Must begin with a letter [A-Za-z]
* And may be followed by any number of letters [A-Za-z] , digits [0-9], hyphens "-", underscores "_", colons ":", and periods ".".

4. CSS Class Names

HTML:

CSS:
.MainContentFooter {
background-color: white; ...
}

* No spaces
* First Character must be a letter [A-Za-z]
* Allowed are Letters, Numbers, Underscores, and hyphen [A-Za-Z0-9] + [_] + [-]
* Case-sensitive in XML, "WebSite" is not "website"
* Case-insensitive in HTML, however type exact case, but treat it as it were case-insensitive
* Multiple class names are delimited by a whitespace [ ] character.
* Descriptive, but keep it short (even though there is no upper limit for length defined)

5. Variable and Function Names

in PERL, PHP, JavaScript

* no spaces
* [A-Za-z0-9] + [_], no "-", ".", ":"
* Case-sensitive
* Must begin with [A-Za-z] or [_], no digits up-front
* Must not be a reserved word of the language
* Descriptive, but short
* You must not use any reserved word

Reserved words for JavaScript:

abstract, boolean, break, byte, case, catch,

char, class, const, continue, default,

delete, do, double, else, export, extends,

false, final, finally, float, for, function,

goto, if, implements, in, instanceof, int,

long, native, new, null, package, private,

protected, public, return, short, static,

super, switch, synchronized, this, throw,

throws, transient, true, try, typeof,

undefined, var, void, while, with

Print this article and refer to it whenever you are working on Web sites or Web site templates.