HTML/CSS/Sass: Aggregation vs Composition #css #sass
<!-- .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>
/* ================
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 */
}
// ----
// 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 */
}
<!-- .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>