Blocktail Web Development Methodology

Blocktail is a web development methodology that maintains code integrity through semantic markers and predictable patterns.

Our traditional web development practices often lead to verbose class names and unclear semantic relationships as our projects grow. We express our component variations through compound names, making our patterns harder to recognize and maintain over time. As codebases grow, small errors compound into larger issues, and relationships become unclear.

Blocktail solves these issues through semantic hierarchies and predictable structures that serve as clear reference points. The methodology favors adding states and features without breaking base components, helping maintain clear relationships in the code as projects grow. This approach helps us move beyond rigid structures towards more dynamic, context-aware development.

Every interface element is treated as a block—a self-contained unit that adapts to changing contexts and states while retaining clear boundaries.

<!-- Context provides a theme environment -->
<main class="context--catalog">
    <!-- Block adapts to context without losing its structure -->
    <article class="product_card --featured">
        <!-- Tails keep internal elements clearly scoped to the parent block -->
        <h2 class="-title">Featured Product</h2>
        <div class="-content">
            <!-- Mutations (--discounted) apply local state changes -->
            <span class="-price --discounted">$99</span>
        </div>
    </article>
</main>

• Blocks: Self-contained components that keep relationships and evolution predictable
• Tails (-): Structure internal elements and reinforce parent-child clarity
• Mutations (--): Introduce new states or features without disturbing core component logic
• Contexts: Provide “environments” where blocks adapt while preserving their fundamental structure

• Pattern Stability: Clear semantic markers maintain relationships through iterations
• State Management: Add features systematically without breaking base components
• Context Adaptation: Components respond to environments while preserving their structure

• Use _ for compound names
• Use -- prefix for mutations
• Use - prefix for tails
• No mixing of marker patterns

Learn more about Pattern Syntax →

Blocktail organizes components into distinct layers:

• System Context (L1): Template-level scope with matrix-- markers
• Local Context (L2): Feature-level scope with context-- markers
• Component Reference (L3): Block-level scope with underscores (no prefix required)
• Mutation Layer (L4): State changes with -- prefix
• Element Layer (L5): Block elements with - prefix

Learn more about Layers → 

Blocktail is not a library or framework. It is a methodology that seamlessly integrates into any project or workflow, requiring no specific tools or dependencies.  

Learn more about Blocktail Reference Guide →