From fc00989cfc120b3e2058aba89270142ea6179d04 Mon Sep 17 00:00:00 2001 From: Alex Krolick <whokilledtheelectricmonk@gmail.com> Date: Sun, 26 Nov 2017 23:52:55 -0800 Subject: [PATCH 1/2] add note about best practices for style attribute --- content/docs/reference-dom-elements.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 328557e5..da5ef6df 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -114,6 +114,8 @@ React will automatically append a "px" suffix to certain numeric inline style pr 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. + ### 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. From 03c6ed87472876e070f57a726b257e9284a6916a Mon Sep 17 00:00:00 2001 From: Alex <alexkrolick@users.noreply.github.com> Date: Mon, 27 Nov 2017 10:30:06 -0800 Subject: [PATCH 2/2] add link to styling faq --- content/docs/reference-dom-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index da5ef6df..738b3c13 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -114,7 +114,7 @@ React will automatically append a "px" suffix to certain numeric inline style pr 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. +**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