anchor.diff:             * CSS size will not grow without any bounds with duplicating classes.
   
       .grid__row
  -      .grid__cell-xs_size_12.raw-text
  +      .grid__cell-xs_size_12.raw-text(style="border-left: 1px solid #ddd;")
           :markdown
             ## Block
             Block encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
       .grid__row
  -      .grid__cell-md_size_4.raw-text
  +      .grid__cell-md_size_4.raw-text(style="border-left: 1px solid #ddd;")
           :markdown
             #### Naming
   
             Block name may consist of Latin letters, digits, and dashes. To form a CSS class, add short prefix for namespacing: `.block`
  -      .grid__cell-md_size_4.raw-text
  +      .grid__cell-md_size_4.raw-text(style="border-left: 1px solid #ddd;")
           :markdown
             #### HTML
             Any DOM node can be a block if it accepts a class name.
  
positive.code:             <span class="block__elem"></span>
            </div>
            ```
        .grid__cell-md_size_4.raw-text
          :markdown
            #### CSS
             * Use class name selector only
  
negative.code:           div.block__elem { color: #042; }
            ```
      .grid__row
        .grid__cell-xs_size_12.raw-text(style="border-left: 1px solid #ddd;")
          :markdown
            ## Modifier
            Modifiers are flags on blocks or elements. Use them to change appearance or behavior.
      .grid__row
        .grid__cell-md_size_4.raw-text(style="border-left: 1px solid #ddd;")
          :markdown
            #### Naming
            Modifiers (both keys and values) may consist of Latin letters, digits, and dashes.
  