Turbo CSS class names are evaluated similar to function calls in programming languages, so we also call them utility functions. Also called utility classes, class names and just plain classes.
Consider the utility class foo-bar to be a function call similar to foo("bar").
| Turbo CSS expression | JavaScript analog |
|---|---|
|
foo-bar
|
foo("bar")
|
A utility function may take multiple arguments, separated by dashes. For example, given the utility function foo, we may be able to pass it 3 numeric arguments 1, 2, 3 via foo-1-2-3.
| Turbo CSS expression | JavaScript analog |
|---|---|
|
foo-1-2-3
|
foo(1, 2, 3)
|
Utility function names may contains dashes. For example, my-long-utility-name is a valid utility function name.
| Turbo CSS expression | JavaScript analog |
|---|---|
|
my-long-utility-name
|
myLongUtilityName()
|
When calling the utility function foo-bar-baz, the compiler will try to find the most specific utility function that has a type signature matching the provided arguments. It will first look for a utility function named foo-bar-baz, if it doesn't exist, it will try to find foo-bar, finally foo. The utility function with the longest matching name plus a matching signature will be used.
| Turbo CSS expression | JavaScript analog |
|---|---|
|
foo-bar-baz
|
fooBarBaz()
|
|
foo-bar-baz
|
fooBar('baz')
|
|
foo-bar-baz
|
foo('bar', 'baz')
|
If there is a utility function foo that takes a single argument of type length, then foo-1px will be a valid invocation, while foo-1 will not be, as the type of 1 is not length but a plain number. It is valid to define multiple utility functions with identical names but different input type signatures.