export const commenting = `
<h1>COMMENTING</h1>
<p style="width:70%;">
    As simple as CSS can get, there is still a lot of room for comments. These could be explaining:
</p>
<ul>
    <li>The structure and/or role of a file.</li>
    <li>The goal of a ruleset.</li>
    <li>The idea behind a magic number.</li>
    <li>The reason for a CSS declaration.</li>
    <li>The order of CSS declarations.</li>
    <li>The thought process behind a way of doing things.</li>
</ul>
<p style="width:70%;">
    Ideally, any CSS ruleset should be preceded by a C-style comment explaining the point of the CSS block. This
    comment also hosts numbered explanations regarding specific parts of the ruleset. For instance:
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">

    <pre>
/**
 * Helper class to truncate and add ellipsis to a string too long for it to fit
 * on a single line.
 * 1. Prevent content from wrapping, forcing it on a single line.
 * 2. Add ellipsis at the end of the line.
 */
.ellipsis {{'{'}}
  white-space: nowrap; /* 1 */
  text-overflow: ellipsis; /* 2 */
  overflow: hidden;
{{'}'}}
    </pre>
</div>

<p style="width:70%;">
    When commenting a Sass-specific section, use Sass inline comments instead of a C-style block. This makes the
    comment invisible in the output, even in expanded mode during development.
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">

    <pre>
// Add current module to the list of imported modules.
// '!global' flag is required so it actually updates the global variable.
$imported-modules: append($imported-modules, $module) !global;
    </pre>
</div>`;
