Sass: The Way to Define Robust CSS Module/Component #sass

SassMeister-input-HTML.html

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

// Sass: The Way to Define Robust CSS Module/Component
//
// Using back-slash as the namespace separator in HTML/CSS
// https://gist.github.com/whizark/ea2ba0ff3f47956fda0f
//
// Other ideas
// https://github.com/whizark/xass#ideas 

// You may use single back-slash as the namespace
// for Mixin/Function/Placeholder selector in Sass,
// but you must use double back-slash in CSS.

// The reason I use placeholder for base definitions,
// wrap it with mixin
// and use mixin in other modules/client code is
// that extending is fragile and a bad practice for extension.
// Mixin encapsulates inner extending in this case.

// Module Definitions
// ========================
// Defines base styles
// for Horizontal List.
%vendor\\horizontal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

// Wraps base styles and extends them
// for Horizontal List.
@mixin vendor\\horizontal-list($spacing: .5em) {
  // Wraping placeholder, it reduces duplicated code
  // and it's opened for extension. 
  @extend %vendor\\horizontal-list;

  // Lobotomized Owl Selector
  // http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
  > * + * {
    margin-left: $spacing;
  }
}

// Defines base styles
// for Horizontal List Item.
%vendor\\horizontal-list\\item {
  display: inline-block;
  margin: 0;
  padding: 0;
}

// Wraps base styles and extends them
// for Horizontal List Item.
@mixin vendor\\horizontal-list\\item() {
  @extend %vendor\\horizontal-list\\item;
}

// Client Code: Concrete Classes
// =====================================================
// Using mixin, it may accept arguments
// and it's closed for modification.
.horizontal-list {
  @include vendor\\horizontal-list();
}

.horizontal-list\\item {
  @include vendor\\horizontal-list\\item();
}

SassMeister-output.css

.horizontal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.horizontal-list\\item {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.horizontal-list > * + * {
  margin-left: 0.5em;
}

SassMeister-rendered.html

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
</ul>