Provide mixins for list-bare and list-inline

[csshugs]

More often than using the actual .o-list-bare and .o-list-inline objects, I create mixins for those abstractions, so I can use these on my custom components. E.g.:

// _tools.list-inline.scss
@mixin list-inline() {
  display: flex;
  margin-left: 0;
  list-style: none;
}



// _components.site-nav.scss
.c-site-nav {
  @include list-inline;
  ...
}

  .c-site-nav__item {
    margin-right: 12px;
    ...
  }

This way, I can keep my markup “clean”, i.e. not mixing object and component classes.

Proposal

By extracting the CSS of the list-bare and list-inline to mixins, we can give users the possibility to use just the mixins in their custom components. Additionally, we still provide the objects for those users who are more attracted towards adding the object classes to their markup.

This is backwards compatible and doesn’t introduce a breaking change, hence can be implemented into the current v6 major version.

[herzinger]

While I won't say "don't do it", I'll point out that this kills the concept of an object per the ITCSS model. It removes the code from the objects layer and repeat it n times in the components one instead, making it non-abstract in the compiled code. You can discuss if it does or doesn't matter for you and make it optional, but what makes the list related objects special in that regard? If you go with this, the same apply to any object. One way or another, I see no benefit and personally wouldn't use it.