Document Component Class Mixing

[jmuzina]

Vanilla has an unspoken style rule that component class names should not be mixed (i.e., an element should only have classes from one component, and possibly is-<theme> modifier).

For example (adapted from thread by @petesfrench ):

<!-- Unofficial "recommended" usage -->
<div class="row--50-50">
  <div class="col">
    <div class="p-section">
      <p>Text</p>
    </div>
  </div>
</div>

<!-- This happens quite a bit in sites -->
<div class="row--50-50">
  <div class="col p-section">
      <p>Text</p>
  </div>
</div>

<!-- This can also happen -->
<div class="row--50-50">
  <div class="col">
      <p class="p-section">But this also works</p>
  </div>
</div>

This introduces inconsistency between projects and could lead to broken styling. We should document this (perhaps at the site-wide level) and inform users about the recommended usage more officially, so that this convention can be more formalized.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-17170.

This message was autogenerated