Block Component Reference Layer (block_name)

block is fundamental to the entire methodology. This section explores the rationale behind treating everything on a page as a block, the benefits of this approach, and how it shapes the way we think about a page.

A block in Blocktail is a self-contained, reusable component that represents a section or element of a web page. Blocks are the primary building units of our interface.

• Self-contained: Blocks encapsulate their own styles and behavior
• Reusable: Blocks can be reused multiple times across a project
• Independent: Blocks function independently of their surroundings
• Modular: Blocks can be combined to create complex layouts

Blocktail introduces the concept of superpositioned blocks, where a single block can exist in multiple states depending on its context. This analogy helps us understand how blocks adapt to different environments while maintaining their core structure and identity.

Just as a quantum particle can exist in multiple states until observed, a block in Blocktail maintains its fundamental identity while adapting to different contexts. This superposition allows blocks to manifest differently based on their environment without losing their core nature.

<article class="product_card">
  <!-- Base block that can adapt to different realities -->
</article>

<main class="context--featured">
  <article class="product_card">
    <!-- The same product card, now in featured reality -->
  </article>
</main>

<aside class="context--sidebar">
  <article class="product_card">
    <!-- The same product card, now in sidebar reality -->
  </article>
</aside>

This superposition concept enables blocks to adapt seamlessly across different contexts while reducing code duplication.

1. Use underscores (_) to separate words in block names
2. No prefixes needed for basic blocks
3. Each block maintains its own semantic boundary
4. Block names should be descriptive and semantic

<article class="product_card">
  <h2 class="-title">Product Name</h2>
  <p class="-description">Product description</p>
  <button class="-buy_button">Buy Now</button>
</article>

Mutations provide us with block-specific modifications using double dashes (--):

<article class="product_card --featured --on_sale">
  <!-- Product card with featured and sale mutations -->
</article>

Mutation Advantages

• Flexibility: Enable state-dependent modifications
• Clarity: Clear syntax separation from other class types
• Modularity: Maintain block reusability while allowing variations

Tails structure internal elements using a single dash (-):

<nav class="main_navigation">
  <ul class="-menu">
    <li class="-item"><a class="-link" href="#">Home</a></li>
    <li class="-item"><a class="-link" href="#">About</a></li>
  </ul>
</nav>

Tail Benefits

• Clarity: Single-dash prefix clearly identifies tails
• Brevity: Short, descriptive names reduce verbosity
• Scope: Tails are scoped to their parent block
• Simplicity: Easy to understand and apply consistently

.main_navigation {
  /* Block styles */
  
  .-menu {
    /* Menu tail styles */
  }
  
  .-item {
    /* Item tail styles */
  }
  
  .-link {
    /* Link tail styles */
  }
  
  &.--featured {
    /* Featured mutation styles */
  }
}

✓ <div class="product_card">         <!-- Clean block name -->
✓ <article class="product_card --featured">  <!-- Block with mutation -->
✓ <div class="-title">              <!-- Tail within block -->

✗ <div class="product-card">         <!-- Never use hyphens in block names -->
✗ <div class="block_product">        <!-- Never use block prefix -->
✗ <div class="product_card-header">  <!-- Never combine block with dash -->

Blocktail encourages developers to think of every component on a page as a block. This approach offers several advantages:

1. Consistency: By treating everything as a block, we create a consistent mental model for us and the structure of our code. This consistency reduces cognitive load and makes it easier to understand and maintain large codebases.
2. Modularity: Thinking in blocks naturally leads to more modular code. Each block becomes a discrete unit that can be developed, tested, and maintained independently.
3. Reusability: Blocks are designed to be reusable. This approach encourages the creation of components that can be used in multiple contexts, reducing code duplication.
4. Scalability: As projects grow, the block-based approach scales well. New features can be added by creating new blocks or combining existing ones, all without disrupting the overall structure.
5. Clarity: The block structure provides clear boundaries between different parts of the interface, making it easier to reason about the codebase and debug issues.

• Blocks are the fundamental building units in Blocktail
• Every component is treated as a block by default
• Blocks exist in superposition, adapting to different contexts
• Use underscores for compound block names
• Blocks can be modified through mutations (--)
• Tails (-) provide internal structure
• This approach promotes maintainable, scalable code