html CSS / Sass：按数据属性的元素属性。 #css #sass

Posted 2021-05-11

<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>

/* =============================================
   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 */
}

// ----
// 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 */
}

<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>