Pencil Code Reference > camelCaps

 

camelCaps a capitalization convention

Most programming languages (including CoffeeScript and Javascript) are case-sensitive:

tagName ≠ tagname

It is important to pay attention to the capitalization of standard names.

Camels?

In CoffeeScript and Javascript, names of variables are not allowed to contain spaces or punctuation such hyphens, so programmers sometimes use other conventions to denote phrases.

With the camelCaps convention, words in a phrase are written together as a single word, but with a capital letter at the start of each word. The first letter is often left lowercase if the intention is for the whole word to be "lowercase".

For example the standard function to "add event listener" is written as a single name:

addEventListener

The convention is called camelCaps because of the camel humps in the middle.

Other Conventions

While camelCaps is the most common spelling seen for long names in code on the Web, there are other captialization conventions that are often seen.

Context Convention Example
Turtle functions lowercase jumpto
Javascript/Coffee functions lowerCamelCase toString
Javascript/Coffee classes UpperCamelCase RegExp
Constant values UPPER_UNDERSCORE SQRT1_2
Special floating point numbers UpperCamelCase Infinity
HTML tags and attributes lowercase onclick
DOM event names lowercase mousemove
DOM properties lowerCamelCase tagName
DOM value for element.tagName UPPERCASE CANVAS
CSS property names and values lower-case-hyphen font-size
C++, python, ruby names lower_underscore out_of_range

Wikipedia has a whole article about naming conventions in different programming languages.

Inconsistencies

There ocassional oddball exceptions; for example in CSS, different values for the "white-space" property include "pre-wrap" (hyphenated, as usual) and "nowrap" (no hyphens, an exception).

Some inconsistencies have to do with acronyms:

encodeURIComponent

In camelCase names, acronyms are usually fully-capitalized, but not always. In this standard function name, we see two approaches within the same name:

XMLHttpRequest

All the different conventions mean that you need to do a little extra work when using a new set of names. If you cannot remember the capitalization of the function you need, look it up!

Converting CSS Styles to camelCaps

In some domains, the capitalization rules are very consistent.

Within CSS stylesheet files, hyphens are allowed, and all property names are all-lowercase-hyphenated.

When CSS style properties are referenced in Javascript and CoffeeScript where hyphens are not allowed, the convention is to convert the names to camelCaps in a uniform way: every letter after a hyphen is capitalized, even if the hyphen comes at the start.

CSS property name Property name in JS or Coffee
border-width borderWidth
font-size fontSize
color color
text-decoration textDecoration
-webkit-user-select WebkitUserSelect

When CSS property names are used in script, (like in the jQuery css function or the turtle label function), they are used in the camelCaps form.

label 'Styling!',
  fontSize: 50
  textDecoration: 'underline'
  color: blue