Добавил блок про очередность селекторов в контексте

.gitignore

@@ -1,33 +1,17 @@
-_gh_pages
-_site
-.ruby-version
-
-*.diff
-*.err
-*.orig
+.Saved/
+_arc/
+bower_components/
+node_modules/
+.vscode/
+.DS_Store
 *.log
-*.rej
-*.swo
-*.swp
+*.sublime-*
+*.rar
 *.zip
-*.vi
-*~
-
-.DS_Store
-._*
-Thumbs.db
-.cache
-.project
-.settings
-.tmproj
-*.esproj
-nbproject
-*.sublime-project
-*.sublime-workspace
+!build.zip
 .idea
-
-validation-status.json
-validation-report.json
-
-node_modules
-bower_components
+TEMP*
+old*
+.publish
+ex_files
+Thumbs.db

index.html

@@ -466,7 +466,6 @@ <h3>Амперсанд</h3>
         </li>
         <li><strong>Никогда</strong> не используйте амперсанд в&nbsp;местах разделения словосочетаний имён блоков, элементов или модификаторов (см. пример).</li>
         <li><strong>Никогда</strong> не повторяйте написанный с амперсандом селектор внутри одного контекста.</li>
-        <li>Внутри контекста блока пишите сначала псевдоселекторы и псевдоэлементы, потом элементы блока, потом модификаторы блока.</li>
       </ul>
     </div>
     <div class="col">
@@ -492,6 +491,49 @@ <h3>Амперсанд</h3>
     </div>
   </div>
 
+  <div class="section" id="amp">
+    <div class="col">
+      <h3>Очередность написания в контексте селектора</h3>
+      <p>В контексте селектора используйте следующую очередность:</p>
+      <ol>
+        <li>Стилевые правила для этого селектора.</li>
+        <li>Вложенные сторонние селекторы.</li>
+        <li>Псевдоселекторы и псевдоэлементы.</li>
+        <li><code>@media</code> этого контекста.</li>
+        <li>БЭМ-элементы.</li>
+        <li>БЭМ-модификаторы.</li>
+      </ol>
+    </div>
+    <div class="col">
+      <pre class="code"><code class="code__syntax  lang-less"><span class="code__line">.page-header { // БЭМ-блок. Корневой контекст.</span>
+<span class="code__line">  position: relative;</span>
+<span class="code__line">  display: block;</span>
+<span class="code__line">  </span>
+<span class="code__line">  .fp-tableCell { ... }</span>
+<span class="code__line">  </span>
+<span class="code__line">  &:before { ... }</span>
+<span class="code__line">  </span>
+<span class="code__line">  @media (min-width: @screen-lg) { ... }</span>
+<span class="code__line">  </span>
+<span class="code__line">  &__item {</span>
+<span class="code__line">    display: block;</span>
+<span class="code__line">  </span>
+<span class="code__line">    &:before { ... }</span>
+<span class="code__line">  </span>
+<span class="code__line">    @media (min-width: @screen-md) { ... }</span>
+<span class="code__line">  }</span>
+<span class="code__line">  </span>
+<span class="code__line">  &--large {</span>
+<span class="code__line">  </span>
+<span class="code__line">    .page-header__item { ... }</span>
+<span class="code__line">  </span>
+<span class="code__line">    @media (min-width: @screen-md) { ... }</span>
+<span class="code__line">  }</span>
+<span class="code__line">  </span>
+<span class="code__line">}</span></code></pre>
+    </div>
+  </div>
+
   <div class="section" id="vars">
     <div class="col">
       <h3>Переменные</h3>