#ShareYourDocs: The start of Larva’s Naming Guidelines Wiki

Posted October 25, 2019 in Web Development


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.

Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

Submit a Comment