Variable Naming

Variable Naming

Foundation for Apps has many, many settings variables, so it's important that we write them the same way to keep things consistent.

Hierarchy

Only use the hyphen to denote hierarchy, not to separate words. Use this format:

$component-subcomponent-property-state

Component names

Condense the name of the component into one word.

// Button
$button-background: #000;

// Title bar
$titlebar-background: #000;

Property names

For common CSS properties, use these terms:

Variable name	CSS property
fontsize	font-size
color	color
background	background, background-color
border	border
shadow	box-shadow
radius	border-radius
padding	padding
margin	margin
width	width
height	height

State

States should always come last in the variable name. The most common states are hover, active, and focus.

$button-background-hover: #666;
$button-background-active: #333;