Lara Schenck

Ugh, I am oh, so behind in sharing the large amounts of progress made on Larva over the past several months, but here is a small nugget. The system is solid and predictable enough at this point that is is possible to start documenting some micro-decisions, specifically around naming guidelines.

Here is a bit I added today to start off the Naming Guidelines page in the Larva wiki.

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 {{ 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. Remember that these class names are purely for readability purposes when viewing markup, and should not be used for writing CSS.