vasanthk · December 16, 2018 20:38 · Jan 22, 2018 · Jan 22, 2018 · Jan 20, 2018 · Jan 20, 2018
diff --git a/0 basics.md b/0 basics.md
@@ -6,19 +6,15 @@ First, an exercise. Can we represent all of css with plain data? Let's try.
 
 ```jsx
 let redText = { color: 'red' };
-
-let blueBG = { backgroundColor: 'blue' };
 ```
 
-This is nice, it's fairly obvious what this code 'does'. We've switched to camelCase for property names (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
-
-Let's make another.
+This is nice, it's fairly obvious what this code 'does'. Let's make another.
 
 ```jsx
 let boldText = { fontWeight: 'bold' };
 ```
 
-Again, super apparent. Now, Let's combine the two.
+Still pretty clean. We've switched to camelCase for property names (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred. Now, Let's combine the two.
 
 ```jsx
 let boldRedText = { ...redText, ...boldText };
@@ -35,7 +31,9 @@ An alternate representation of combining the two with an array -
 
 ```jsx
 let boldRedText = [redText, boldText];
+
 console.log(boldRedText);
+
 // [{ color: 'red' }, { fontWeight: 'bold' }]
 ```
 
@@ -78,7 +76,7 @@ this would be equivalent to -
 */
 ```
 
-Say we wanted bold text only on hover; how would we represent that?
+Now say we wanted bold text only on hover; how would we represent that?
 
 ```jsx
 let composed = [redGreenText, { ':hover': boldText }];
@@ -137,7 +135,7 @@ let style = {
 ```
 
 
-With these few rules, we now can write css styles that target the _entire_ css spec, no exceptions.
+With these few rules, we can write css styles that target the _entire_ css spec, no exceptions.
 
 Because they're plain javascript objects, there's no third party dependency to import, or fancy syntax, and runs in any javascript environment. You can even type-check the objects with flow/typescript/etc. Leverage decades of data management knowledge and 'architect' your styles in whatever manner you prefer!
 

diff --git a/0 basics.md b/0 basics.md
@@ -7,10 +7,10 @@ First, an exercise. Can we represent all of css with plain data? Let's try.
 ```jsx
 let redText = { color: 'red' };
 
-let blueText = { color: 'blue' };
+let blueBG = { backgroundColor: 'blue' };
 ```
 
-This nice, it's fairly obvious what this code 'does'. We've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
+This is nice, it's fairly obvious what this code 'does'. We've switched to camelCase for property names (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
 
 Let's make another.
 
@@ -141,7 +141,7 @@ With these few rules, we now can write css styles that target the _entire_ css s
 
 Because they're plain javascript objects, there's no third party dependency to import, or fancy syntax, and runs in any javascript environment. You can even type-check the objects with flow/typescript/etc. Leverage decades of data management knowledge and 'architect' your styles in whatever manner you prefer!
 
-Indeed, you're now free to implement any classic css architectures like [itcss](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [smacss](https://smacss.com/), [oocss](https://github.com/stubbornella/oocss/wiki), [bem](http://getbem.com/introduction/), but without any of the constraints of a statically compiled language like sass/less. Further, because we're colocating these styles in a dynamic environment, we can create completely new and powerful abstractions like [glamorous](https://glamorous.rocks/)/[styled-components](https://www.styled-components.com/), [jsxstyle](https://github.com/smyte/jsxstyle), and so on. We'll explore these architectures and abstractions in a future post.
+Indeed, you're now free to implement any of the 'classic' css architectures like [itcss](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [smacss](https://smacss.com/), [oocss](https://github.com/stubbornella/oocss/wiki), [bem](http://getbem.com/introduction/), but without any of the constraints of a statically compiled language like sass/less. Further, because we're colocating these styles in a dynamic environment, we can create completely new and powerful abstractions like [glamorous](https://glamorous.rocks/)/[styled-components](https://www.styled-components.com/), [jsxstyle](https://github.com/smyte/jsxstyle), and so on. We'll explore these architectures and abstractions in a future post.
 
 So far, so good. Now how do we use these styles? Keen observers would have also noticed the lack of any html, or classnames to add to elements.
 

diff --git a/0 basics.md b/0 basics.md
@@ -150,7 +150,7 @@ Let's assume we have a magical function, `css()`, that takes any of these object
 ```jsx
 let cls = css({color:'red'});
 let html = `<div class='${cls}'> this is red! </div>`;
-// <div class='css-1sdfpa`> this is red! </div>
+// <div class='css-1sdfpa'> this is red! </div>
 ```
 
 ... that's it. there's nothing new to 'learn', and it cooperates really well with the rest of your tooling/workflow/ecosystem. Brilliant!

diff --git a/0 basics.md b/0 basics.md
@@ -149,7 +149,7 @@ Let's assume we have a magical function, `css()`, that takes any of these object
 
 ```jsx
 let cls = css({color:'red'});
-let html = `<div class='${cls}'`> this is red! </div>`;
+let html = `<div class='${cls}'> this is red! </div>`;
 // <div class='css-1sdfpa`> this is red! </div>
 ```
 

diff --git a/0 basics.md b/0 basics.md
@@ -2,15 +2,15 @@
 
 ## 0. styles as objects
 
-First, an exercise. Can we represent all of css with plain data?
+First, an exercise. Can we represent all of css with plain data? Let's try.
 
 ```jsx
 let redText = { color: 'red' };
 
 let blueText = { color: 'blue' };
 ```
 
-It's immediately obvious what this code 'does'. There's no third party dependency to import, no helper functions or fancy syntax, and runs in any javascript environment. We've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
+This nice, it's fairly obvious what this code 'does'. We've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
 
 Let's make another.
 
@@ -31,15 +31,15 @@ console.log(boldRedText);
 // { color: 'red', fontWeight: 'bold' }
 ```
 
-An alternate representation of combining the two could be with an array -
+An alternate representation of combining the two with an array -
 
 ```jsx
 let boldRedText = [redText, boldText];
 console.log(boldRedText);
 // [{ color: 'red' }, { fontWeight: 'bold' }]
 ```
 
-This representation has the advantage of preserving the pieces and order that compose the style, which is nice for debugging, while also being more efficient for the computer to handle. (add footnote)
+This representation has the advantage of preserving the pieces and order that compose the style, which is nice for debugging, while also being more efficient for the computer to handle (we'll dive into optimisations in a later post).
 
 Let's extend this object language further by adding pseudo selectors -
 
@@ -78,7 +78,7 @@ this would be equivalent to -
 */
 ```
 
-Say we wanted bold text only on hover, how would we represent that?
+Say we wanted bold text only on hover; how would we represent that?
 
 ```jsx
 let composed = [redGreenText, { ':hover': boldText }];
@@ -107,7 +107,7 @@ let translucentRed = {
 };
 ```
 
-This would mean "background color is a translucent red, unless it has a parent with class 'ie6', in which case it's plain red."
+This would mean "background color is a translucent red, unless it has a parent with class `ie6`, in which case it's plain red."
 
 Similarly, we can add support for `@media` queries and `@supports` blocks. A contrived example showing them all in one object -
 
@@ -119,7 +119,7 @@ let page = {
   },
   '@media screen': {
     color: 'blue',
-    '@supports (mid-width)': {
+    '@supports (display: flex)': {
       color: 'yellow',
     },
   },
@@ -128,32 +128,28 @@ let page = {
 
 You're free to nest arbitrarily and deeply; with whatever combination of selectors or media queries or whatnot.
 
-Finally, sometimes, you want to output multiple values/[fallbacks](https://modernweb.com/using-css-fallback-properties-for-better-cross-browser-compatibility/) for a property. It only feels natural to define this with arrays.
+Finally, sometimes, you want to output multiple values/[fallbacks](https://modernweb.com/using-css-fallback-properties-for-better-cross-browser-compatibility/) for a property. It only feels natural to define this with arrays. For example, suppose you need background color that's translucent red in browsers that support `rgba()`, and plain `red` in older browsers.
 
 ```jsx
 let style = {
   color: ['red', 'rgba(255, 0, 0, 0.8)'],
 };
 ```
 
-With this code, the background color will be a translucent red in browsers that support `rgba()`, and plain `red` in older browsers.
 
-With these few rules, we now can write css styles that target the _entire_ css spec, no exceptions. There's no vendor lockin, they can be used across environments, serialized into json (or any other format) and transmitted over the wire, type checked(footnote - how?). Further, you can leverage decades of data management knowledge and 'architect' your styles in whatever manner you prefer. Need theming? Use functions that accept theme values and return objects. Creating too many objects of the same shape and value? Hoist them and/or use a cache. Etc etc.
+With these few rules, we now can write css styles that target the _entire_ css spec, no exceptions.
 
-mixins
-variables
-themes
+Because they're plain javascript objects, there's no third party dependency to import, or fancy syntax, and runs in any javascript environment. You can even type-check the objects with flow/typescript/etc. Leverage decades of data management knowledge and 'architect' your styles in whatever manner you prefer!
 
-You're now free to implement any classic css architectures like [itcss](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [smacss](https://smacss.com/), [oocss](https://github.com/stubbornella/oocss/wiki), [bem](http://getbem.com/introduction/), but without any of the constraints of a statically compiled language like sass/less.
+Indeed, you're now free to implement any classic css architectures like [itcss](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [smacss](https://smacss.com/), [oocss](https://github.com/stubbornella/oocss/wiki), [bem](http://getbem.com/introduction/), but without any of the constraints of a statically compiled language like sass/less. Further, because we're colocating these styles in a dynamic environment, we can create completely new and powerful abstractions like [glamorous](https://glamorous.rocks/)/[styled-components](https://www.styled-components.com/), [jsxstyle](https://github.com/smyte/jsxstyle), and so on. We'll explore these architectures and abstractions in a future post.
 
-But you're not bound by the inadequacies of sass/less/css.
+So far, so good. Now how do we use these styles? Keen observers would have also noticed the lack of any html, or classnames to add to elements.
 
-So far, so good. Now how do we use these styles? Keen observers would have also noticed the lack of any classnames to add to elements.
-
-Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname to add to our html element.
+Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname.
 
 ```jsx
-let html = `<div class='${css({color:'red'})}`> this is red! </div>`;
+let cls = css({color:'red'});
+let html = `<div class='${cls}'`> this is red! </div>`;
 // <div class='css-1sdfpa`> this is red! </div>
 ```
 

diff --git a/0 basics.md b/0 basics.md
@@ -1,68 +1,73 @@
 #### A series of posts on css-in-js
 
-## 0. the basics
+## 0. styles as objects
 
-Consider this object. 
+First, an exercise. Can we represent all of css with plain data?
 
 ```jsx
 let redText = { color: 'red' };
+
 let blueText = { color: 'blue' };
 ```
 
-It is immediately apparent what this code does. There's no third party dependency to import, no helper functions, no fancy syntax, etc. It can run in any environment that runs javascript, and can be eliminated from the bundle if no one uses it. 
+It's immediately obvious what this code 'does'. There's no third party dependency to import, no helper functions or fancy syntax, and runs in any javascript environment. We've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred.
+
+Let's make another.
 
-Let's make another. 
 ```jsx
 let boldText = { fontWeight: 'bold' };
 ```
 
-again, super apparent. we've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred. 
+Again, super apparent. Now, Let's combine the two.
 
-let's combine the two 
 ```jsx
-let boldRedText = {...redText, ...boldText};
+let boldRedText = { ...redText, ...boldText };
 ```
-again, nothing special, just plain javascript. you can `console.log` it and see what it has, no surprises.  
+
+Nothing special, it's "just javascript". you can inspect it and see what it contains, no surprises.
 
 ```jsx
 console.log(boldRedText);
 // { color: 'red', fontWeight: 'bold' }
 ```
 
-an alternate representation of combining the two could be with an array - 
+An alternate representation of combining the two could be with an array -
+
 ```jsx
 let boldRedText = [redText, boldText];
 console.log(boldRedText);
 // [{ color: 'red' }, { fontWeight: 'bold' }]
 ```
 
-this representation has the advantage of preserving the pieces and order that compose the style which is nice for introspecting, while also being more efficient for the computer to handle. (add footnote) also, by delaying the actual 'joining' till as late as possible, we can extend this object language with more fun stuff. For example, let's add pseudo selectors - 
+This representation has the advantage of preserving the pieces and order that compose the style, which is nice for debugging, while also being more efficient for the computer to handle. (add footnote)
+
+Let's extend this object language further by adding pseudo selectors -
 
 ```jsx
 let redGreenText = {
   color: 'red',
   ':hover': {
-    color: 'green'
-  }
-}
+    color: 'green',
+  },
+};
 ```
-it's immediately obvious what this object represents - a style for text that's red by default, and green when hovered.
 
-This composes well like before 
+It should hopefully be clear what this object represents - a text style text that's red by default, and green when hovered. Like before, this composes well.
+
 ```jsx
 let composed = [redGreenText, boldText];
-/* 
+/*
 [{
   color: 'red',
   ':hover': {
     color: 'green'
   }
-}, 
-{
+}, {
   fontWeight: 'bold'
 }]
 
 this would be equivalent to -
+
 {
   color: 'red',
   fontWeight: 'bold',
@@ -71,14 +76,14 @@ this would be equivalent to -
   }
 }
 */
-
 ```
 
-Now say we wanted bold text only on hover, how would we represent that? 
+Say we wanted bold text only on hover, how would we represent that?
+
 ```jsx
-let composed = [ redGreenText, { ':hover': boldText } ];
+let composed = [redGreenText, { ':hover': boldText }];
 /*
-this would be equivalent to - 
+this would be equivalent to -
 {
   color: 'red',  
   ':hover': {
@@ -91,48 +96,67 @@ this would be equivalent to -
 
 Nice!
 
-We can nest more than just pseudo classes. Sass/Less folks will be familiar with contextual selectors - 
+We can nest more than just pseudo classes. Sass/Less folks will be familiar with contextual selectors -
+
 ```jsx
 let translucentRed = {
   backgroundColor: 'rgba(255, 0, 0, 0.8)',
   '.ie6 &': {
-    backgroundColor: 'red'
-  }
-}
-``` 
-This would mean "background color is a translucent red, unless it has a parent class of 'ie6', in which case it's plain red." 
+    backgroundColor: 'red',
+  },
+};
+```
 
-Similarly, we can add support for `@media` queries and `@supports` blocks. A contrived example showing them all in one object - 
+This would mean "background color is a translucent red, unless it has a parent with class 'ie6', in which case it's plain red."
+
+Similarly, we can add support for `@media` queries and `@supports` blocks. A contrived example showing them all in one object -
 
 ```jsx
 let page = {
   color: 'red',
   ':hover': {
-    color: 'blue'
+    color: 'blue',
   },
   '@media screen': {
     color: 'blue',
     '@supports (mid-width)': {
-      color: 'yellow'
-    }
-  }
-}
+      color: 'yellow',
+    },
+  },
+};
 ```
 
-You're free to nest arbitrarily and deeply; with whatever combination of selectors or media queries or whatnot. (footnote - fallbacks)
+You're free to nest arbitrarily and deeply; with whatever combination of selectors or media queries or whatnot.
 
-With these few rules, we now can write css styles that target the *entire* css spec, no exceptions. There's no vendor lockin, they can be used across environments, serialized into json (or any other format) and transmitted over the wire, type checked(footnote - how?). 
+Finally, sometimes, you want to output multiple values/[fallbacks](https://modernweb.com/using-css-fallback-properties-for-better-cross-browser-compatibility/) for a property. It only feels natural to define this with arrays.
 
-So far, so good. Now how do we use them?
+```jsx
+let style = {
+  color: ['red', 'rgba(255, 0, 0, 0.8)'],
+};
+```
+
+With this code, the background color will be a translucent red in browsers that support `rgba()`, and plain `red` in older browsers.
+
+With these few rules, we now can write css styles that target the _entire_ css spec, no exceptions. There's no vendor lockin, they can be used across environments, serialized into json (or any other format) and transmitted over the wire, type checked(footnote - how?). Further, you can leverage decades of data management knowledge and 'architect' your styles in whatever manner you prefer. Need theming? Use functions that accept theme values and return objects. Creating too many objects of the same shape and value? Hoist them and/or use a cache. Etc etc.
+
+mixins
+variables
+themes
+
+You're now free to implement any classic css architectures like [itcss](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [smacss](https://smacss.com/), [oocss](https://github.com/stubbornella/oocss/wiki), [bem](http://getbem.com/introduction/), but without any of the constraints of a statically compiled language like sass/less.
+
+But you're not bound by the inadequacies of sass/less/css.
+
+So far, so good. Now how do we use these styles? Keen observers would have also noticed the lack of any classnames to add to elements.
+
+Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname to add to our html element.
 
-Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname to add to our html element. 
 ```jsx
 let html = `<div class='${css({color:'red'})}`> this is red! </div>`;
 // <div class='css-1sdfpa`> this is red! </div>
 ```
 
-
 ... that's it. there's nothing new to 'learn', and it cooperates really well with the rest of your tooling/workflow/ecosystem. Brilliant!
 
-
-In the next post, we'll dive into what `css()` does behind the scenes.
+In the next post, we'll dive into what `css()` does behind the scenes.
diff --git a/0 basics.md b/0 basics.md
@@ -1,16 +1,15 @@
-A series of posts on css-in-js
----
+#### A series of posts on css-in-js
 
-#### 0. the basics
+## 0. the basics
 
 Consider this object. 
 
 ```jsx
 let redText = { color: 'red' };
-let blueText = { color: 'red' };
+let blueText = { color: 'blue' };
 ```
 
-It is immediately apparent what this line of code is. There's no third party dependency to import, no helper functions, no fancy syntax, etc. It can run in any environment that runs javascript, and can be eliminated from the bundle if no one uses it. 
+It is immediately apparent what this code does. There's no third party dependency to import, no helper functions, no fancy syntax, etc. It can run in any environment that runs javascript, and can be eliminated from the bundle if no one uses it. 
 
 Let's make another. 
 ```jsx
@@ -103,7 +102,7 @@ let translucentRed = {
 ``` 
 This would mean "background color is a translucent red, unless it has a parent class of 'ie6', in which case it's plain red." 
 
-Similarly, we can add support for @media queries and @supports blocks. A contrived example showing them all in one object - 
+Similarly, we can add support for `@media` queries and `@supports` blocks. A contrived example showing them all in one object - 
 
 ```jsx
 let page = {
@@ -127,9 +126,10 @@ With these few rules, we now can write css styles that target the *entire* css s
 So far, so good. Now how do we use them?
 
 Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname to add to our html element. 
-
+```jsx
 let html = `<div class='${css({color:'red'})}`> this is red! </div>`;
 // <div class='css-1sdfpa`> this is red! </div>
+```
 
 
 ... that's it. there's nothing new to 'learn', and it cooperates really well with the rest of your tooling/workflow/ecosystem. Brilliant!

diff --git a/0 basics.md b/0 basics.md
@@ -0,0 +1,138 @@
+A series of posts on css-in-js
+---
+
+#### 0. the basics
+
+Consider this object. 
+
+```jsx
+let redText = { color: 'red' };
+let blueText = { color: 'red' };
+```
+
+It is immediately apparent what this line of code is. There's no third party dependency to import, no helper functions, no fancy syntax, etc. It can run in any environment that runs javascript, and can be eliminated from the bundle if no one uses it. 
+
+Let's make another. 
+```jsx
+let boldText = { fontWeight: 'bold' };
+```
+
+again, super apparent. we've switched to camelCase (as opposed to css hyphen-case), but that seems super natural in javascript, and preferred. 
+
+let's combine the two 
+```jsx
+let boldRedText = {...redText, ...boldText};
+```
+again, nothing special, just plain javascript. you can `console.log` it and see what it has, no surprises.  
+
+```jsx
+console.log(boldRedText);
+// { color: 'red', fontWeight: 'bold' }
+```
+
+an alternate representation of combining the two could be with an array - 
+```jsx
+let boldRedText = [redText, boldText];
+console.log(boldRedText);
+// [{ color: 'red' }, { fontWeight: 'bold' }]
+```
+
+this representation has the advantage of preserving the pieces and order that compose the style which is nice for introspecting, while also being more efficient for the computer to handle. (add footnote) also, by delaying the actual 'joining' till as late as possible, we can extend this object language with more fun stuff. For example, let's add pseudo selectors - 
+
+```jsx
+let redGreenText = {
+  color: 'red',
+  ':hover': {
+    color: 'green'
+  }
+}
+```
+it's immediately obvious what this object represents - a style for text that's red by default, and green when hovered.
+
+This composes well like before 
+```jsx
+let composed = [redGreenText, boldText];
+/* 
+[{
+  color: 'red',
+  ':hover': {
+    color: 'green'
+  }
+}, 
+{
+  fontWeight: 'bold'
+}]
+
+this would be equivalent to -
+{
+  color: 'red',
+  fontWeight: 'bold',
+  ':hover': {
+    color: 'green'
+  }
+}
+*/
+
+```
+
+Now say we wanted bold text only on hover, how would we represent that? 
+```jsx
+let composed = [ redGreenText, { ':hover': boldText } ];
+/*
+this would be equivalent to - 
+{
+  color: 'red',  
+  ':hover': {
+    color: 'green',
+    fontWeight: 'bold'
+  }
+}
+*/
+```
+
+Nice!
+
+We can nest more than just pseudo classes. Sass/Less folks will be familiar with contextual selectors - 
+```jsx
+let translucentRed = {
+  backgroundColor: 'rgba(255, 0, 0, 0.8)',
+  '.ie6 &': {
+    backgroundColor: 'red'
+  }
+}
+``` 
+This would mean "background color is a translucent red, unless it has a parent class of 'ie6', in which case it's plain red." 
+
+Similarly, we can add support for @media queries and @supports blocks. A contrived example showing them all in one object - 
+
+```jsx
+let page = {
+  color: 'red',
+  ':hover': {
+    color: 'blue'
+  },
+  '@media screen': {
+    color: 'blue',
+    '@supports (mid-width)': {
+      color: 'yellow'
+    }
+  }
+}
+```
+
+You're free to nest arbitrarily and deeply; with whatever combination of selectors or media queries or whatnot. (footnote - fallbacks)
+
+With these few rules, we now can write css styles that target the *entire* css spec, no exceptions. There's no vendor lockin, they can be used across environments, serialized into json (or any other format) and transmitted over the wire, type checked(footnote - how?). 
+
+So far, so good. Now how do we use them?
+
+Let's assume we have a magical function, `css()`, that takes any of these objects and gives us a classname to add to our html element. 
+
+let html = `<div class='${css({color:'red'})}`> this is red! </div>`;
+// <div class='css-1sdfpa`> this is red! </div>
+
+
+... that's it. there's nothing new to 'learn', and it cooperates really well with the rest of your tooling/workflow/ecosystem. Brilliant!
+
+
+In the next post, we'll dive into what `css()` does behind the scenes.