anchor.diff:              display: none;
             }
             ```
  -          Both block and modifier selectots have the same specifity. As modifier declaration goes after the block, it redefines the CSS
  -          properties. These styles belong to block and are stored in the block file. Thus, independantly on how the resultant CSS is built
  +          Both block and modifier selectors have the same specificity. As modifier declaration goes after the block, it redefines the CSS
  +          properties. These styles belong to block and are stored in the block file. Thus, independently on how the resultant CSS is built
             from source, you will always have them in this order and be sure that redefining happens.
   
             In the case of global modifier, its properties can be redefined by the blocks if they follow modifiers in code:
  
positive.code: 
          ul
            li
              a(href="#why-the-modifier-classes-are-prefixed") Why the modifier CSS classes are prefixed with their parent block name?
            li
              a(href="#can-i-create-global-modifier") Can I create a modifier global applicable to any block? Like visible/invisible.
  
    .grid.grid_fixed
      .grid__row
        .grid__cell-xs.grid__cell-xs_size_12.raw-text
          a(id="why-the-modifier-classes-are-prefixed")
          :markdown
            ## Why the modifier CSS classes are prefixed with their parent block name?
  
            > BEM recommends to modify blocks like this `<div class="block block_mod">`. Why not to use the simple version like `<div class="block mod">`? Since we now have combined selectors `.block.mod`, it's easy to define all the CSS properties to it.
  
            The recommendation to prefix modifier CSS class with its block name has multiple reasons.
  
            Firsly, since it is possible to mix several blocks an elements at the same DOM node, we need to ensure that a modifier would affect only
            the block it belongs to. Let's say that we have a menu item element and a button mixed together. In HTML this construction is represented
            by the following markup:
  
  
negative.code:           ```html
            <div class="block hidden">you still see me</div>
            ```
            One of the possible solutions to this problem is to raise the selector specificity of global modifiers by adding `!important` to them.
            But in this case any side-effects of such a global modifier might be overwritten only by declarations with the same `!important`
            instruction.
  
            Another way is to load global modifier CSS after al the other styles. But in this case you are not able any more to use *lazy
            loading* strategy for your components. The additional lazy CSS will still be loaded after the modifiers and you get the same problem.
  
            The next problem is combination of several global modifiers at the same block.
  
  