From f58c9a514e4a6f1b2d14acd0774da88c8e2c654f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 29 Nov 2017 13:37:26 +0000
Subject: [PATCH] Move the style note to be more prominent (#370)

* Move the style note to be more prominent

* Fix the link

* Simplify example
---
 content/docs/reference-dom-elements.md | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
index 738b3c13..af0a424a 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/docs/reference-dom-elements.md
@@ -60,6 +60,10 @@ The `selected` attribute is supported by `<option>` components. You can use it t
 
 ### style
 
+>Note
+>
+>Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
+
 The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
 
 ```js
@@ -91,31 +95,19 @@ Style keys are camelCased in order to be consistent with accessing the propertie
 React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
 
 ```js
-// This:
+// Result style: '10px'
 <div style={{ height: 10 }}>
   Hello World!
-</div>;
-
-// Becomes:
-<div style="height: 10px;">
-  Hello World!
 </div>
 
-// This:
+// Result style: '10%'
 <div style={{ height: '10%' }}>
   Hello World!
-</div>;
-
-// Becomes:
-<div style="height: 10%;">
-  Hello World!
 </div>
 ```
 
 Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
 
-**Note:** Some examples in the documentation use `style` for convenience, but per modern web development best practices, **using the `style` attribute as the primary means of styling elements is _not recommended_.** In most cases, [`className`](#className) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
-
 ### suppressContentEditableWarning
 
 Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.