title: Is using parenthesis in HTML classes okay?
body: <p>I'm trying to create some helper classes in a reusable and <strong>readable</strong> way.</p>
  
  <p>I want to use this scheme : <code>class="property-name(direction)(value)"</code></p>
  
  <p>For example : <code>class="margin(top)(15)"</code></p>
  
  <p>In CSS, It will be written as <code>.margin\(top\)(\15\) { ... }</code></p>
  
  <p>Does it works? Yes, see the fiddle below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sample__wrapper {
    border: 1px solid #eee;
    padding: 15px;
  }
  
  .sample__item {
    width: 100%;
    height: 100px;
    background: #eee;
  }
  
  .margin\(top\)\(15\) {
    margin-top: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sample__wrapper"&gt;
    &lt;div class="sample__item"&gt;&lt;/div&gt;
    &lt;div class="sample__item margin(top)(15)"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Because I rarely see this kind of syntax (using <code>\</code> for parenthesis), I wonder if <em>It's allowed to do so?</em></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <ul>
  <li>Regarding the <a href="https://www.w3.org/TR/CSS21/grammar.html#scanner" rel="nofollow noreferrer">grammar of CSS</a> (here 2.1), parenthesis are allowed.</li>
  <li>Thanks to @Dan Kreiger in comments below, there is a CSS framework - using the same "readability idea" - called <a href="https://acss.io/" rel="nofollow noreferrer">Atomic CSS</a>. Also, a link to a <a href="https://css-tricks.com/lets-define-exactly-atomic-css/" rel="nofollow noreferrer">CSS tricks article</a> about it (not the Framework, the terminology).</li>
  <li>Finally, HTML will be (<em>to me</em>) extremely readable. CSS or JS will not!</li>
  <li>Have fun! ☺</li>
  </ul>