# BEM

We have specifics BEM rules for each widget.

The prefix m_ must be used only on a minotaure plugin or theme. There is no reason to used this prefix on another type of projet.

Each widget must be a <section>.

W3C

A widget have a specific name. In this exemple we are using the widget events

The section will contains all events, so with a little logic we agree that it should be called m_events.

<section class="m_events">
</section>
1
2

Most of the time the headline of a widget will be the same everywhere. This header will be named m_headline Of course there is a faster and easier way to use headline. Considers that includes remains the best solution for multiple use of the same design.

The <header> tag can be use in this contexte — remember that a <section>, an <article> or a <aside> tags resets de semantic. This should be a standard in several year but at this time, <header>, <footer> and <h1> is not an obligation.

<!-- Basic way -->
<section class="m_events">
    <header class="m_headline">
        <h1 class="m_headline__title">{{title}}</h1>
        <p class="m_headline__content">{{text}}</p>
    </header>
</section>
1
2
3
4
5
6
7
<!--  Better way  -->
<section class="m_events">
    {% 
        include "components/widgets/m_headline.twig" 
        with {title: title, content: text} only
    %}
</section>
1
2
3
4
5
6
7

In case the widget header is an exception

<!-- Exception way  -->
<section class="m_events">
    <header class="m_events__headline">
        <h1 class="m_events__title">{{title}}</h1>
        <p class="m_events__content">{{text}}</p>
    </header>
</section>
1
2
3
4
5
6
7

Next step is find a name for a unique event. Tho it is really very complicated, I think you have found the solution.


<section class="m_events">
    {% 
        include "components/widgets/m_headline.twig" 
        with {title: title, content: text} only
    %}
    {% for item in posts if posts %}
        <a class="m_event">

        </a>
    {% endfor %}
</section>
1
2
3
4
5
6
7
8
9
10
11
12

Get it ?

There a lot of possibilities with classname, if you hesitate refer to a clean widget. There is no reason to add a lot of class, if there are already utilities class. Exemple :

You need a button in each event. This button is exactly the same as the others, so call the same class do not add m_event_button if you are not adding specific css.

Last Updated: 5/25/2020, 2:34:53 PM