Skip to content

Instantly share code, notes, and snippets.

@whizark
Last active August 13, 2018 08:26
Show Gist options
  • Save whizark/536023c5677a0a7aac45 to your computer and use it in GitHub Desktop.
Save whizark/536023c5677a0a7aac45 to your computer and use it in GitHub Desktop.
CSS/Sass: Element Property by data attribute. #css #sass
<div class="app">
<div class="app--note note">
<ul class="note--list list">
<li class="list--li li" data-state="active">Item</li>
</ul>
</div>
</div>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
// HTML/CSS/Sass: Element Property by data attribute.
//
// SEE ALSO:
// CSS/Sass: Robust/Scalable Layered CSS Architecture
// http://sassmeister.com/gist/8e1941924605cc062020
//
// 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 */ }
// `data-li-*` attribute represents its own property of .li
.li[data-state="active"] { /* overrides li styles */ }
// pseudo-code:
// var li = new Li();
// li.dataset.state = 'active';
// if (li.dataset.state === 'active') {
// li.style = { /* styles */ };
// }
// ANTI PATTERN:
// Do not use BEM-like syntax for a variant (`element--modifier`):
// .li--featured { /* variant styles of .li */ }
//
// Defines new name for a variant of object:
// .featured-li { /* variant styles of .li */ }
//
// Or defines it as its own property of .li:
// .li[data-type="featured"] { /* variant styles of .li */ }
.list { /* overrides ul styles */ }
/* ====================================================
3. Component Layer (HAS-A)
==================================================== */
.list { /* overrides .list styles */ }
.list--li { /* overrides .li styles */ }
.list--li[data-state="active"] { /* overrides .li styles */ }
.note { /* defines .note styles */ }
.note--list { /* overrides .list styles */ }
.note--list .list--li { /* overrides .list--li styles */ }
.note--list .list--li[data-state="active"] {
/* overrides .list--li stylex */
}
/* ========================================================
4. Application layer
======================================================== */
.app { /* defines .app styles */ }
.app--note .note--list .list--li {
/* overrides .list--li styles */
}
.app--note .note--list .list--li[data-state="active"] {
/* overrides .list--li styles */
}
/* =============================================
1. Element Layer
============================================ */
li {
/* defines generic li styles */
}
ul {
/* defines generic ul styles */
}
/* ================================================
2. Object Layer (IS-A)
================================================ */
.li {
/* overrides li stylex */
}
.li[data-state="active"] {
/* overrides li styles */
}
.list {
/* overrides ul styles */
}
/* ====================================================
3. Component Layer (HAS-A)
==================================================== */
.list {
/* overrides .list styles */
}
.list--li {
/* overrides .li styles */
}
.list--li[data-state="active"] {
/* overrides .li styles */
}
.note {
/* defines .note styles */
}
.note--list {
/* overrides .list styles */
}
.note--list .list--li {
/* overrides .list--li styles */
}
.note--list .list--li[data-state="active"] {
/* overrides .list--li stylex */
}
/* ========================================================
4. Application layer
======================================================== */
.app {
/* defines .app styles */
}
.app--note .note--list .list--li {
/* overrides .list--li styles */
}
.app--note .note--list .list--li[data-state="active"] {
/* overrides .list--li styles */
}
<div class="app">
<div class="app--note note">
<ul class="note--list list">
<li class="list--li li" data-state="active">Item</li>
</ul>
</div>
</div>
@niktariy
Copy link

niktariy commented Aug 13, 2018

Are you trying to use BEM? You use this -- as element declaration? Very strange I think..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment