RobinMalfait · November 16, 2017 16:10 · Nov 16, 2017 · Nov 16, 2017 · Nov 16, 2017 · Nov 16, 2017
diff --git a/benefits.md b/benefits.md
@@ -38,4 +38,7 @@ const Button = styled.button('Button')`
 ```
 
 7. We only have to think about "single" names for BEM (Blocks, Elements, Modifiers)
+  - We have seen in our codebases that the naming conventions was different throughout the months/years, now we kind of force the BEM structure implicitely
 8. We don't allow for hacks, or styling tags directly, we need to define a className
+  - "hacks" might be a bit strange here, but out of lasyness we've seen styled css directly on tags and nested children `div > *` which is not that great for specifity.
+ 9. The generated css tries to be the lowest specifity, because we need the ability to override it later (if that makes sense somehow, more context maybe be required)
diff --git a/benefits.md b/benefits.md
@@ -0,0 +1,41 @@
+1. Determenistic classNames
+2. No context switching, the styles are in the same file as the component
+3. Allows for easy deletability (if that's a word), in pure CSS files you can have the problem that you don't (always) know if you can uberhaupt delete the css or not
+4. We still allow for nested styles like:
+
+```js
+import { Button } from './Button';
+const Accordion = styled.div`
+  // We don't need to know which class `.Button` uses, in pure css we _do_ need to know which one
+  ${Button} {
+    border: none;
+  }
+`
+```
+
+5. We can do variables/theming (okay we can use scss/sass/less, but that's an extra step as well)
+
+```js
+import theme from './theme';
+const Button = styled.div`
+  color: ${theme.color};
+`
+```
+
+6. We can apply some magic with props
+
+```js
+const Button = styled.button('Button')`
+  background-color: transparent;
+
+  disabled {
+    background-color: grey;
+  }
+`
+
+// <Button disabled /> -> <button class="Button Button--disabled"></button>
+// <Button /> -> <button class="Button"></button>
+```
+
+7. We only have to think about "single" names for BEM (Blocks, Elements, Modifiers)
+8. We don't allow for hacks, or styling tags directly, we need to define a className
diff --git a/pitch.md b/pitch.md
@@ -9,7 +9,7 @@ const Button = styled.button('Button')`
   border-radius: 2px;
   padding: .5em 1em;
 
-  /** If there is a truthy prop, disabled, and it is true */
+  /** If there is a prop named disabled, and it is truthy */
   disabled {
     background-color: grey;
   }

diff --git a/pitch.md b/pitch.md
@@ -57,7 +57,7 @@ const SmallButton = Button.modify('small')`
 ### OUT
 
 ```js
-<SmallButton class="Button Button--small Button--disabled"></button>
+<button class="Button Button--small Button--disabled"></button>
 ```
 
 ### IN

diff --git a/pitch.md b/pitch.md
@@ -1,6 +1,6 @@
 # Styled components with deterministic classNames
 
-> **Use case**: we want to use the ease of development of styled components, but we're building a library instead of an isolated app. Therefor, we need predictable, deterministic classNames. The generated classnames are inspired by BEM.
+> **Use case**: we want to use the ease of development of styled components, but we're building a library instead of an isolated app. That's why we need predictable, deterministic classNames. The generated classnames are inspired by BEM.
 
 ```js
 const Button = styled.button('Button')`

diff --git a/pitch.md b/pitch.md
@@ -1,5 +1,7 @@
 # Styled components with deterministic classNames
 
+> **Use case**: we want to use the ease of development of styled components, but we're building a library instead of an isolated app. Therefor, we need predictable, deterministic classNames. The generated classnames are inspired by BEM.
+
 ```js
 const Button = styled.button('Button')`
   background-color: transparent;

diff --git a/pitch.md b/pitch.md
@@ -0,0 +1,124 @@
+# Styled components with deterministic classNames
+
+```js
+const Button = styled.button('Button')`
+  background-color: transparent;
+  border: 1px solid black;
+  border-radius: 2px;
+  padding: .5em 1em;
+
+  /** If there is a truthy prop, disabled, and it is true */
+  disabled {
+    background-color: grey;
+  }
+`
+```
+
+### IN
+
+```js
+<Button disabled />
+```
+
+### OUT
+
+```js
+<button class="Button Button--disabled"></button>
+```
+
+### IN
+
+```js
+<Button />
+```
+
+### OUT
+
+```js
+<button class="Button"></button>
+```
+
+## Modifications
+
+```js
+const SmallButton = Button.modify('small')`
+  padding: 1px 2px;
+`
+```
+
+### IN
+
+```js
+<SmallButton disabled />
+```
+
+### OUT
+
+```js
+<SmallButton class="Button Button--small Button--disabled"></button>
+```
+
+### IN
+
+```js
+<SmallButton />
+```
+
+### OUT
+
+```js
+<button class="Button Button--small"></button>
+```
+
+## Nested Elements
+
+```js
+const ButtonIcon = Button.i('Icon')`
+  font-family: FontAwesome;
+`
+```
+
+### IN
+
+```js
+<Button>
+  <ButtonIcon />
+</Button>
+```
+
+### OUT
+
+```js
+<button class="Button">
+  <i class="Button__Icon"></i>
+</button>
+```
+
+## With predefined contents
+
+```js
+const IconButton = Button
+  .withContents(Root => ({ icon, children, ...rest }) => (
+    <Root {...rest}>
+      <ButtonIcon className={`fa-${icon}`} />
+      {children}
+    </Root>
+  ))``
+```
+
+### IN
+
+```js
+<IconButton icon="house">
+  My House
+</IconButton>
+```
+
+### OUT
+
+```js
+<button class="Button">
+  <i class="Button__Icon fa-house"></i>
+  My House
+</button>
+```
No results found