Mutation Mutation Layer (--mutation)

mutation is a concept that allows for dynamic, block-specific modifications. Inspired by command-line flags, mutations offer a concise way to create block variants without the verbosity often associated with traditional modifier classes.

In Blocktail, mutations create specific state changes within individual blocks, similar to flags that modify behavior. A mutation:

• Applies changes only to its block
• Can combine with other mutations
• Maintains block identity while changing its state

• Mutations keep modifications where they belong - at the block level
• Allows for specific changes to individual blocks without affecting others

• We don't need to write long class names
• Mutations are concise and clear and improve code readability

• Create multiple versions of a block without duplicating code
• Enables variations without cluttering the base block structure

• Mutations clearly communicate the state or variant of a block
• Improves code understandability for developers

• Can be pre-loaded on page load based on server-side calculations
• Facilitates real-time changes through JavaScript

<article class="product_card --featured">
  <!-- Featured product card content -->
</article>

<article class="product_card <?php echo $is_featured ? '--featured' : ''; ?>">
  <!-- Product card content -->
</article>

<article class="product_card --featured --on_sale">
  <!-- Featured product on sale -->
</article>

document.querySelector('.product_card').classList.add('--featured');

While contexts provide broad, environmental changes, mutations offer granular, block-specific modifications:

• Contexts: Applied to high-level elements, influencing multiple blocks
• Mutations: Applied to individual blocks or tails for specific modifications

Example:

<main class="context--sales_event">
  <article class="product_card --featured">
    <!-- Featured product card in a sales event context -->
  </article>
</main>

✓ class="--featured"                   <!-- Single mutation -->
✓ class="--on_sale"                    <!-- Compound name -->
✓ class="--featured --on_sale"         <!-- Multiple mutations -->

✗ class="-featured"                    <!-- Single dash -->
✗ class="featured--"                   <!-- Wrong prefix position -->
✗ class="--on-sale"                    <!-- Using hyphen instead of underscore -->

.product_card {
  /* Base styles */
  
  &.--featured {
    /* Featured mutation styles */
  }
  
  &.--on_sale {
    /* Sale mutation styles */
  }
  
  /* Combined mutations */
  &.--featured.--on_sale {
    /* Styles for featured items on sale */
  }
}

• Mutations provide block-specific modifications
• Use double dash prefix (--)
• Use descriptive, action-oriented names
• Use underscores for compound names
• Can be combined for complex states
• Each mutation should represent a distinct state change