Two of my favourite CSS blog posts are written by Harry Roberts, More Transparent UI Code with Namespaces and Immutable CSS.

A little package called bem-constructor takes both ideas from Harry’s blogs and includes them in a fantastic mixin. Bem-constructor makes writing object oriented css much simpler and wraps the logic in an elegant syntax. Take a look at this rather contrived example:

@include object('media') {
  display: block;
  @include element('image') {
    border: 1px solid black;
    @include modifier('rounded-corners') {
      border-radius: 5px;
    }
  }
}

This will generate the following CSS:

.o-media {
  display: block; }
  .o-media__image {
    border: 1px solid black; }
    .o-media__image--rounded-corners {
      border-radius: 5px; }

By enforcing a consistent and programatic way of defining objects it ensures a more structured, robust and secure object codebase that is easy to understand and maintain. Objects defined using bem-constructor are impossible to modify and reassign by mistake or omission.

---

Published on February 2, 2016.

Previous Post React Native & continuous deployment

Next Post Using the JSON API spec in a Laravel API