HTML/CSS/Sass: Aggregation vs Composition #css #sass

SassMeister-input-HTML.html

<!-- .list is an aggregation of .li -->
<ul class="list">
  <li class="list--li li">Item</li>
</ul>

<!-- .list is a composition of .list--li -->
<ul class="list">
  <li class="list--li">Item</li>
</ul>

SassMeister-input.scss

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

// HTML/CSS/Sass: Aggregation vs Composition
//
// SEE ALSO:
// CSS/Sass: Robust/Scalable Layered CSS Architecture
// http://sassmeister.com/gist/8e1941924605cc062020
//
// see also:
// http://en.wikipedia.org/wiki/Object_composition
//
// http://twitter.com/whizark
//
// Other ideas
// https://github.com/whizark/xass#ideas

/* ================
   1. Element Layer
   ================ */

li { /* defines generic li styles */ }
ul { /* defines generic ul styles */ }

/* ======================
   2. Object Layer (IS-A)
   ====================== */

.li   { /* overrides li stylex */ }
.list { /* overrides ul styles */ }

/* ==========================
   3. Component Layer (HAS-A)
   ========================== */

.list     { /* overrides .list styles */ }

.list--li {
  /* In case of Aggregation: overrides **.li** styles */
  /* In case of Composition: overrides **li** styles */
}

SassMeister-output.css

/* ================
   1. Element Layer
   ================ */
li {
  /* defines generic li styles */
}

ul {
  /* defines generic ul styles */
}

/* ======================
   2. Object Layer (IS-A)
   ====================== */
.li {
  /* overrides li stylex */
}

.list {
  /* overrides ul styles */
}

/* ==========================
   3. Component Layer (HAS-A)
   ========================== */
.list {
  /* overrides .list styles */
}

.list--li {
  /* In case of Aggregation: overrides **.li** styles */
  /* In case of Composition: overrides **li** styles */
}

SassMeister-rendered.html

<!-- .list is an aggregation of .li -->
<ul class="list">
  <li class="list--li li">Item</li>
</ul>

<!-- .list is a composition of .list--li -->
<ul class="list">
  <li class="list--li">Item</li>
</ul>

TuUkQ8QDojXgM8jC65xf7X

TuUkQ8QDojXgM8jC65xf7X