[css-variables] Move naming recommendation to a note.

Author: tabatkins

css-variables/Overview.html

@@ -154,6 +154,13 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 	<a data-autolink="link" href="#custom-property">Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
 
+</p><p class="note">	Note: Authors are recommended to choose custom property names
+	so that the part after the "var-" is an identifier by itself,
+	so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
+	For example, <a data-autolink="property" class="property" title="var-0">var-0</a> needs to be referenced as <a data-autolink="maybe" class="css">var(\30)</a>,
+	because <a data-autolink="maybe" class="css">0</a> isn't a valid identifier.
+	(U+0030 is the hexadecimal code for the <a data-autolink="maybe" class="css">0</a> character.)
+
 	</p><div class="example">
 		Custom properties define variables,
 		referenced with the <a data-autolink="maybe" class="css">var()</a> notation,
@@ -179,15 +186,6 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 		rather than requiring many edits across all stylesheets in the webpage.
 	</p></div>
 
-	<div class="example">
-		Authors are recommended to choose custom property names
-		so that the part after the "var-" is an identifier by itself,
-		so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
-		For example, <a data-autolink="property" class="property" title="var-0">var-0</a> needs to be referenced as <a data-autolink="maybe" class="css">var(\30)</a>,
-		because <a data-autolink="maybe" class="css">0</a> isn't a valid identifier.
-		(U+0030 is the hexadecimal code for the <a data-autolink="maybe" class="css">0</a> character.)
-	</div>
-
 <p>	Unlike other CSS properties,
 	custom property names are <strong>case-sensitive</strong>.
 	The "var-" prefix <strong>must</strong> be written in lower-case.
@@ -880,7 +878,7 @@ <h3 class="no-ref" id="testing">
 
 <h3 id="normative" class="no-num no-ref">
 Normative References</h3>
-<div data-fill-with="normative-references"><dl><dt id="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a></dd><dt id="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd></dl></div>
+<div data-fill-with="normative-references"><dl><dt id="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd><dt id="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a></dd></dl></div>
 
 <h3 id="informative" class="no-num no-ref">
 Informative References</h3>

css-variables/Overview.src.html

@@ -79,6 +79,13 @@ <h2 id='defining-variables'>
 	<a>Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
 
+	Note: Authors are recommended to choose custom property names
+	so that the part after the "var-" is an identifier by itself,
+	so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
+	For example, 'var-0' needs to be referenced as ''var(\30)'',
+	because ''0'' isn't a valid identifier.
+	(U+0030 is the hexadecimal code for the ''0'' character.)
+
 	<div class='example'>
 		Custom properties define variables,
 		referenced with the ''var()'' notation,
@@ -106,15 +113,6 @@ <h2 id='defining-variables'>
 		rather than requiring many edits across all stylesheets in the webpage.
 	</div>
 
-	<div class='example'>
-		Authors are recommended to choose custom property names
-		so that the part after the "var-" is an identifier by itself,
-		so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
-		For example, 'var-0' needs to be referenced as ''var(\30)'',
-		because ''0'' isn't a valid identifier.
-		(U+0030 is the hexadecimal code for the ''0'' character.)
-	</div>
-
 	Unlike other CSS properties,
 	custom property names are <strong>case-sensitive</strong>.
 	The "var-" prefix <strong>must</strong> be written in lower-case.