Naming Guidelines

This document is a general area for collecting rules and guidelines for naming.

Naming Utilities

The general algorithm for naming utilities, as evidenced above, is: .u-[pattern||property]-[value] where pattern corresponds to the file name of the pattern.

Unfortunately, there is some technical debt in Larva around the units used when naming certain types of utility class. These are as follows:

• Margins and padding: rem
• Font size, border, transform: px

For values that contain multiple entries, e.g. transforms or borders, the values should be separated by hyphens. n represents negative, and p represents percent.

.u-transform-x-10-y-10 .u-transform-x-n10-y-50p

For utilities requiring a modifier such as top/right/bottom/left, use the following pattern:

• .u-margin-r-auto
• .u-margin-t-n4 - margin-top: -4rem
• .u-padding-lr-1 - padding-left: 1rem; padding-right: 1rem
• .u-padding-a-1 - padding: 1rem;

For border utilities, the border color and its size should be separated.

• .u-border-t-2 - border-top: 2px solid;
• .u-border-a-5- border: 5px solid;
• .u-border-color-brand-primary - A border-color set to the color-brand-primary token.

In most cases (padding and margin), a generator mixin will take care of naming the classes.

Use the words inner and outer instead of wrapper

The word "wrapper" should only appear in association with lrv-a-wrapper, or any related algorithm that contains a max-width and margins l/r auto. When naming elements with a wrapping nature in patterns, use the words inner and outer.

Use inner when the desire is to containing elements that are inside a main element. Example of inner:

<figcaption class="c-figcaption {{ c_figcaption_classes }}">
	{% if c_figcaption_inner %}
		<div class="c-figcaption__inner {{ c_figcaption_inner_classes }}">
	{% endif %}

		{% if c_figcaption_caption_markup %}
			<span class="{{ c_figcaption_caption_classes }}">{{ c_figcaption_caption_markup|raw }}</span>
		{% endif %}
		{% if c_figcaption_credit_text %}
			<cite class="{{ c_figcaption_credit_classes }}">{{ c_figcaption_credit_text }}</cite>
		{% endif %}

	{% if c_figcaption_inner %}
		</div>
	{% endif %} 
</figcaption>

Use outer when adding an element outside a main element. Example of outer:

{% if c_heading_outer %}
	<div class="c-heading__outer {{ c_heading_outer_classes }}">
{% endif %}

	<h2 class="c-heading {{ modifier_class }} {{ c_heading_classes }}">

	{% if c_heading_url %}
		<a href="{{ c_heading_url }}" class="{{ c_heading_link_classes }}">
	{% endif %}

		{{ c_heading_text }}

	{% if c_heading_url %}
		</a>
	{% endif %}

	</h2>

{% if c_heading_outer %}
	</div>
{% endif %}

Both inner and outer elements – despite one being technically outside the main element – should contain identifying BEM class names.