Scalable styling with flat structure and bem/smacss

flat-structure-with-bem-smaccs.md

Scalable styling with flat structure and BEM/SMACSS

Scalability of the code has become a major requirement for web development recently. In css development, scalability could be achieve with flat structure and BEM/SMACSS on top of Atom design and Style composition.

The concept of flat structure and BEM/SMACCS maybe alien to developers are working with inheritance styling code. but with overwhelming benefit, this scalable solution has be adopted by some advanced developers.

Flat structure

Here is a quick explanation why flat structure is a better solution for managing scalable development. To implement flat structure, component styling shall be equally treaded by two factors:

• Selector: by class and class only
• Level of selector: only base level selector, which means some css selecting rules like nesting and sibling shall be avoid.

Sample code

.block {
  margin: 8px;
}

.block__text {
  font-size: 16px;
}

<div class="block">
  <p class="block__text"> text, just text</p>
</div>

In the HTML code, the parent child relationship is indicated via root class name block, that is part of our BEM/SMACCS settings

BEM/SMACSS

For the base styling, we are following the introduction of BEM, see implementation above. For modification on top of base style. we could use Modifier in BEM

.block {
  margin: 8px;
}

.block__text {
  font-size: 16px;
}

.block__text--mod {
  padding-left: 8px;
}

<div class="block">
  <p class="block__text block__text--mod"> text, just text</p>
</div>

For Javascript dependency, we could add SMACSS State .

.block {
  margin: 8px;
}

.block__text {
  font-size: 16px;
}

.block__text--mod {
  padding-left: 8px;
}

.is-block__text-error {
  color: red;
}

<div class="block">
  <p class="block__text block__text--mod"> text, just text</p>
</div>

document.getElementsByClassName('block__test').classList.add('is-block__text-error');

Enhancement

The BEM/SMACCS works fine in most cases, but leaving state and mod outside of block scope irritates me. Here is the Enhancement on top of BEM/SMACCS rules: move state and mod into the scope.

.block {
  margin: 8px;
}

.block__text {
  font-size: 16px;
  
  &.is-error {
    color: red;
  }
  &.mod-padding {
    padding-left: 8px;
  }
}

<div class="block">
  <p class="block__text mod-padding"> text, just text</p>
</div>

document.getElementsByClassName('block__test').classList.add('is-error');

By moving state and mod in the scope and hooking with .block__text, the .block__text styling has be glued into one place. It would be easier for us to read and to maintain .block__text style.

Benefits in maintaining

By implementing the solution, we have gain readability, independence and scalability

• Readability: the optimized code (above) shows clear mapping between HTML and CSS.
• Independence: the block component would be standalone with all its dependencies (assuming our development is based on Atomic design and Style composition)
• Scalability: since it is independent from other components, add or remove elements in block should NOT have any side effects. The component is also reusable across the online services

Conclusion

Implementing flat structure and BEM/SMACSS would lead to readable and independent code base. This development would be ideal for scalable developing process