0-readme edit

css-classes edit

How the class names are created and used

CSS classes

A modified BEM style is used fairly consistently for most of the modern code.

General class name patterns

Standalone component (component not reused): Use camelCase: .StatsRow
Reusable component: Use kebob-style with wm- append: .wm-description-text
Component's descendants: Use component style from above, then __kebab-style:
.StatsRow__text-section
.wm-card__text-section
Modifier that could be used by any descendant element: Use --kebab-style:
.--cards4or
.--landscape
Component state - only used by component: Use component style from above--kebab-style: this is not currently used anywhere that I can think of.
Helper and layout classes: Use alpha-kebab-style; .h-helper-name (.h-theme-card); .l-layout-name (.l-listing)

Important Rules

No more than one selector per css statement

This keeps specificity low and you can easily make changes to your HTML markup without having to refactor a bunch of CSS classes.


        ✓ Yes: .ComponentName__descendant { ... }
✕ No: .ComponentName .ComponentName__descendant { ... }

Keep BEM one level deep

Using a selector like .block-element1-element2 presumes that element2 will always be a child of element1 in the markup, and you want to avoid that. Just stick to one level of nesting. This:

<div class="blockName">
  <div class="blockName__element1">
    <div class="blockName__element2"></div>
  </div>
</div>

would use the css:


         .blockName {
    &__element1 {}
    &__element2 {}
 }

Example of Usage

Reusable components (.wm-card, .wm-description-text, .wm-statnum, and all their descendants) control the default look and layout.
Standalone components have classes that match the reusable components (.StatsRow__card, .StatsRow__description-text-title, etc) so the default classes can be overwritten within each row's css if needed.
The theme class, .h-theme-card, applies a theme to the card (color theme info can found here).
More information on reusable components can be found here.


    <li class="wm-card h-theme-card StatsRow__card">
    <!-- visual area with designed text -->
    <div class="wm-card__graphic-section StatsRow__graphic-section">
        <div class="wm-statnum">
            <sup class="wm-statnum--prepend-bottom"></sup>
            <sup class="wm-statnum--prepend-top">Top</sup>
            <span class="wm-statnum__number">3</span>
        </div>
    </div>

    <!-- text area -->
    <div class="wm-card__text-section StatsRow__text-section">
        <h4 class="wm-description-text__title StatsRow__description-text-title">
            Alt theme</h4>
        <div class="wm-description-text__publication StatsRow__description-text-publication">
            Barnes &amp; Noble </div>
    </div>
</li>

HTML
Output
SCSS

Expand

Copy

Edit

<div class="wm-ad-docs"> <h5>CSS classes</h5> <p>A modified BEM style is used <em>fairly</em> consistently for most of the modern code. </p> <h6>General class name patterns</h6> <dl> <dt>Standalone component (component not reused)</dt> <dd>Use camelCase: <code>.StatsRow</code></dd> <dt>Reusable component</dt> <dd>Use kebob-style with wm- append: <code>.wm-description-text</code></dd> <dt>Component's descendants</dt> <dd>Use component style from above, then __kebab-style:<BR> <code>.StatsRow__text-section</code><BR> <code>.wm-card__text-section</code> </dd> <dt>Modifier that could be used by any descendant element</dt> <dd>Use --kebab-style:<BR> <code>.--cards4</code>or<BR> <code>.--landscape</code> </dd> <dt>Component state - only used by component</dt> <dd>Use component style from above--kebab-style: this is not currently used anywhere that I can think of.</dd> <dt>Helper and layout classes</dt> <dd>Use alpha-kebab-style</dd> <dd><code>.h-helper-name</code> (.h-theme-card)</dd> <dd><code>.l-layout-name</code> (.l-listing)</dd> </dl> <h6>Important Rules</h6> <strong>No more than one selector per css statement</strong> <p>This keeps specificity low and you can easily make changes to your HTML markup without having to refactor a bunch of CSS classes.</p> <code> <pre> &check; Yes: .ComponentName__descendant { ... } ✕ No: .ComponentName .ComponentName__descendant { ... } </pre> </code> <BR><BR> <strong>Keep BEM one level deep</strong> <p>Using a selector like <code class="inline">.block-element1-element2</code> presumes that <code class="inline">element2</code> will always be a child of <code class="inline">element1</code> in the markup, and you want to avoid that. Just stick to one level of nesting. This:</p> <pre><code class="language-html" data-lang="html"><div class="blockName"> <div class="blockName__element1"> <div class="blockName__element2"></div> </div> </div></code></pre> <p>would use the css:</p> <code> <pre> .blockName { &__element1 {} &__element2 {} } </pre> </code> <h6>Example of Usage</h6> <ul> <li>Reusable components (<code>.wm-card</code>, <code>.wm-description-text</code>, <code> .wm-statnum</code>, and all their descendants) control the default look and layout. </li> <li>Standalone components have classes that match the reusable components (<code>.StatsRow__card</code>, <code>.StatsRow__description-text-title</code>, etc) so the default classes can be overwritten within each row's css if needed.</li> <li>The theme class, <code>.h-theme-card</code>, applies a theme to the card (<a href="/atomic-docs/wm/atomic-core/?cat=0-readme#color-themes">color theme info can found here</a>).</li> <li>More <a href="/atomic-docs/wm/atomic-core/?cat=0-readme#row-components">information on reusable components can be found here</a>.</li> </ul> <pre><code> <li class="wm-card h-theme-card StatsRow__card">  <div class="wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">Top</sup> <span class="wm-statnum__number">3</span> </div> </div>  <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-description-text__title StatsRow__description-text-title"> Alt theme</h4> <div class="wm-description-text__publication StatsRow__description-text-publication"> Barnes &amp; Noble </div> </div> </li> </code></pre> </div>