From a5b6940eb0548c50fe8c3afcb2418b1b5993d05d Mon Sep 17 00:00:00 2001
From: Andrew Bennett <andrew.bennett07@bbc.co.uk>
Date: Thu, 6 Oct 2022 17:17:29 +0100
Subject: [PATCH] Remove inaccurate guidance

---
 docs/Coding-Standards/Styles.md | 114 --------------------------------
 1 file changed, 114 deletions(-)

diff --git a/docs/Coding-Standards/Styles.md b/docs/Coding-Standards/Styles.md
index 7a5a1ca5eb2..024b2c8deb3 100644
--- a/docs/Coding-Standards/Styles.md
+++ b/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?