bikeshed-all-the-classes.html

<!-- BEM -->
<div class="section__item section__item--someoption grid__row grid__row--gutter">
    <div class="grid__item grid__item--small1 grid__item--wide3">
        Some content
    </div>
</div>

<!-- Suit CSS -->
<div class="Section-item Section-item--someoption Grid-row Grid-row--gutter">
    <div class="Grid-item Grid-item--small1 Grid-item--wide3">
        Some content
    </div>
</div>


<!-- "Attribute Modules" (non standard but works) -->
<div am-Grid-Row="gutter" am-Section-Item="some-option">
    <div am-Grid-Item="small1 wide3">
        Some content
    </div>
</div>

<!-- Block-item classes + modifiers in attribute -->
<div class="Section-item Grid-row" data-grid="gutter" data-section="some-option">
    <div class="Grid-item" data-grid="small1 wide3">
        Some content
    </div>
</div>

<!-- Single letter prefix for modifier classes (selectors should use both classes) -->
<div class="section-item s_someoption grid-row g_gutter">
    <div class="grid-item g_small1 g_wide3">
        Some content
    </div>
</div>

<!-- Module-item and m+modifier -->
<div class="Section-item s+someoption Grid-row g+gutter">
    <div class="Grid-item g+small:1 g+wide:3">
        Some content
    </div>
</div>

<!-- module-item and module_modifier -->
<div class="section-item section_someoption grid-row grid_gutter">
    <div class="grid-item grid_small1 grid_wide3">
        Some content
    </div>
</div>