export const element = `
<h1>ELEMENT</h1>

<p style="width: 70%">
Parts of a block and have no standalone meaning. Any element is semantically tied to
its block.
</p>

<h3>Naming</h3>
<p style="width: 70%">
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is
formed as block name plus two underscores plus element name: <strong>.block__elem</strong>
</p>

<h3>HTML</h3>
<p style="width: 70%">
Any DOM node within a block can be an element. Within a given block, all elements are
semantically equal.
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
    {{'<'}}div class="block"{{'>'}}
    ...
    {{'<'}}span class="block__elem"{{'>'}}{{'<'}}{{'/'}}span{{'>'}}
  {{'<'}}{{'/'}}div{{'>'}}
    </pre>
</div>

<h3>CSS</h3>
<ul style="width: 70%">
    <li>Use class name selector only</li>
    <li>No tag name or ids</li>
    <li>No dependency on other blocks/elements on a page</li>
</ul>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
.block_elem {{'{'}} color: #042; {{'}'}}

//Nope
.block .block__elem {{'{'}} color: #042; {{'}'}}
	div.block__elem {{'{'}} color: #042; {{'}'}}
    </pre>
</div>

`;
