Merge pull request #10341 from bbc/andrewscfc-patch-1

Remove inaccurate guidance

docs/Coding-Standards/Styles.md

@@ -253,120 +253,6 @@ const styles = {
 };
 ```
 
-## CSS-in-JS: For style reusability, extend styled components rather than keeping styles in reusable functions or variables
-
-### Why?
-
-It is better for performance when sharing styles by extending components with Emotion’s `styled`
-method than it is to keep reusable styles in functions or variables.
-
-By extending a styled component with `styled`, Emotion shares the CSS class name from the extended component and creates a new CSS class name for the new styles.
-
-For example:
-
-✅
-
-```js
-const Paragraph = styled.p`
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans, Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(63, 63, 66);
-  padding-bottom: 1.5rem;
-  margin: 0px;
-`;
-
-const RedParagraph = styled(Paragraph)`
-  color: red;
-`;
-```
-
-When the CSS and class names are generated, it will look something like this:
-
-```css
-.paragraph {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans, Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(63, 63, 66);
-  padding-bottom: 1.5rem;
-  margin: 0px;
-}
-
-.red-paragraph {
-  color: red;
-}
-```
-
-```html
-<p class="paragraph red-paragraph">Some text</p>
-```
-
-In the above example, `Paragraph` is the component being extended so it has all of the paragraph styles but with a red colour. The `class` attribute on the HTML element will then include both the `paragraph` and the `red-paragraph` class names. This is the most performant way to share styles.
-
-Previously, we’ve done something different with shared typography styles which creates a lot of duplicated CSS:
-
-❌
-
-```js
-const getSansRegular = () => `
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans, Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(63, 63, 66);
-  padding-bottom: 1.5rem;
-  margin: 0px;
-`;
-
-const Paragraph = styled.p`
-  ${getSansRegular()}
-`;
-
-const RedParagraph = styled.p`
-  color: red;
-  ${getSansRegular()}
-`;
-```
-
-This creates the following CSS and class names:
-
-```css
-.paragraph {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans, Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(63, 63, 66);
-  padding-bottom: 1.5rem;
-  margin: 0px;
-}
-
-.red-paragraph {
-  color: red;
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans, Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(63, 63, 66);
-  padding-bottom: 1.5rem;
-  margin: 0px;
-}
-```
-
-```html
-<p class="red-paragraph">Some text</p>
-```
-
-Note we now have duplicated styles and no common class name that elements can share to inherit styles. This bloats the CSS which degrades performance and can cause some of our pages to exceed AMP’s 75kB stylesheet limit and cause AMP pages to be invalid.
-
 ## CSS-in-JS: Be aware that passing props to styled components will generate a new class for different arguments
 
 ### Why?