From 153ba4dff3ac941ad38743b35e3f58522b8b29c9 Mon Sep 17 00:00:00 2001
From: Shaun Grady <grady@shaungrady.com>
Date: Thu, 22 Feb 2018 09:42:56 -0800
Subject: [PATCH] docs(aio): Reorganize style guide sections on prefixing
 components/directives (#22571)

Closes https://github.com/angular/angular/issues/22081

PR Close #22571
---
 aio/content/guide/styleguide.md | 142 ++++++++++++++++----------------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index 8ddf7ab8b0..52fe100c7c 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -933,29 +933,18 @@ As always, strive for consistency.
 
 <a href="#toc">Back to top</a>
 
-{@a 02-06}
+{@a 05-02}
 
-### Directive selectors
+### Component selectors
 
-#### Style 02-06
+#### Style 05-02
 
 
 <div class="s-rule do">
 
 
 
-**Do** Use lower camel case for naming the selectors of directives.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
 
 
 </div>
@@ -966,16 +955,40 @@ As always, strive for consistency.
 
 
 
-**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
+**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
 
 
 </div>
 
+
+
+<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+
+</code-example>
+
+
+
+
+
+<code-tabs>
+
+  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
+
+  </code-pane>
+
+  <code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
 <a href="#toc">Back to top</a>
 
 {@a 02-07}
 
-### Custom prefix for components
+### Component custom prefix
 
 #### Style 02-07
 
@@ -1078,11 +1091,51 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
 
 
+<a href="#toc">Back to top</a>
 
+{@a 02-06}
+
+### Directive selectors
+
+#### Style 02-06
+
+
+<div class="s-rule do">
+
+
+
+**Do** Use lower camel case for naming the selectors of directives.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
 
 {@a 02-08}
 
-### Custom prefix for directives
+### Directive custom prefix
 
 #### Style 02-08
 
@@ -3710,59 +3763,6 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 ## Components
 
-{@a 05-02}
-
-### Component selector names
-
-#### Style 05-02
-
-
-<div class="s-rule do">
-
-
-
-**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
-
-</code-example>
-
-
-
-
-
-<code-tabs>
-
-  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
-
-  </code-pane>
-
-  <code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<a href="#toc">Back to top</a>
-
 {@a 05-03}
 
 ### Components as elements