export const modifier = `
<h1>MODIFIER</h1>

<p style="width: 70%">
    Flags on blocks or elements. Use them to change appearance, behavior or state.
</p>

<h3>Naming</h3>
<p style="width: 70%">
    Modifier names may consist of Latin letters, digits, dashes and underscores.
    CSS class is formed as block’s or element’s name plus two dashes: <strong>.block--mod
     or .block__elem--mod and .block--color-black with .block--color-red</strong>.
     Spaces in complicated modifiers are replaced by dash.
</p>

<h3>HTML</h3>
<p style="width: 70%">
    Modifier is an extra class name which you add to a block/element DOM node.
    Add modifier classes only to blocks/elements they modify, and keep the original class:
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
{{'<'}}div class="block block--mod"{{'>'}}...{{'<'}}{{'/'}}div{{'>'}}
{{'<'}}div class="block block--size-big
    block--shadow-yes"{{'>'}}...{{'<'}}{{'/'}}di{{'>'}}

//Nope
{{'<'}}div class="block--mod"{{'>'}}...{{'<'}}{{'/'}}div{{'>'}}
    </pre>
</div>

<h3>CSS</h3>
<p>
    Use modifier class name as selector:
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.block--hidden {{'{ }'}}
    </pre>
</div>

<p>
    To alter elements based on a block-level modifier:
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.block--mod .block__elem {{'{ }'}}
    </pre>
</div>

<p>No dependency on other blocks/elements on a page</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.block {{'{'}} color: #042; {{'}'}}
    </pre>
</div>

`;
