DESKTOP-129: 💄 address PR feedback

Author: yourpalsonja

css/class-naming-conventions/readme.md

@@ -308,7 +308,7 @@ Sometimes there are situations when a component makes use of other components, a
 </button>
 ```
 
-In situations like this it is tempting to just style the icon's class inside of the button. However, this practice is poor and creates tight coupling between the Button and Icon components that shouldn't exist. As a rule of thumb, a component should only know about what it's responsible for; it shouldn't be aware of anything external to itself. Since Icon is an external component, the Button component should be completely unaware that of `c-icon`.
+In situations like this it is tempting to just style the icon's class inside of the button. However, this practice is poor and creates tight coupling between the Button and Icon components that shouldn't exist. As a rule of thumb, a component should only know about what it's responsible for; it shouldn't be aware of anything external to itself. Since Icon is an external component, the Button component should be completely unaware of `c-icon`.
 
 The solution to this challenge is to instead give the external component a new class that our new component can know about, like `c-button__icon`. This way, the component is treated like a sub-component of Button, and eliminates any tight coupling between the components.  Both components can change, be added or removed, without affecting the other in an unpredictable way.
 

css/css-best-practices/readme.md

@@ -90,7 +90,7 @@ When authoring CSS, you should be always aware of the selectors that you are cre
 
 Strive to create selectors that actually fully describe where it is authored. Put another way, any given selector should tell you which file and where in the file it is written.
 
-This can be down by following this simple rule: the first class in a selector is the file it can be found.
+This can be done by following this simple rule: the first class in a selector is the file it can be found.
 
 For example `.t-pdp .c-product` would be written in `_pdp.scss` and NOT `_product.scss`.
 
@@ -101,7 +101,7 @@ The exception to this rule is when a base or root class is dependent on a global
 
 ## Mobile First
 
-When styling responsively, we use min-width queries and build on top of them when we need to. Learn more about our other responsive best practices [here](responsive-best-practices/readme.md). 
+When styling responsively, we use min-width queries and build on top of them when we need to. Learn more about our other responsive best practices [here](responsive-best-practices/readme.md).
 
 ## Single Direction Rule
 

css/introduction/readme.md

@@ -28,7 +28,7 @@ These guidelines are a summary of our base principles: Our code bases should all
 
 * Be written like a single person typed it
 * Be mobile-first
-* Be modular–components are better than page specific styles
+* Be modular: components are better than page specific styles
 * Be page specific only as a last resort
 * Be written with nesting no deeper than 4 levels
 * Be written with selectors that self document their location

css/responsive-best-practices/readme.md

@@ -1,16 +1,22 @@
 # Responsive Best Practices
 
+## Table of Contents
+
+* [Mobile First](#mobile-first)
+* [Use 4 or Less Major Breakpoints](#use-4-or-less-major-breakpoints)
+* [Keep Your Queries With Their Components](#keep-your-queries-with-their-components)
+
 ## Mobile First
 
 Our philosophy is that _the first breakpoint is no breakpoint_.
 
-There are plenty of good reasons to approach [design](https://www.lukew.com/ff/entry.asp?933) and [content strategy](https://alistapart.com/article/your-content-now-mobile) from this perspective, and the same goes for styling. An experience shouldn't depend on a specific viewport width work well.
+There are plenty of good reasons to approach [design](https://www.lukew.com/ff/entry.asp?933) and [content strategy](https://alistapart.com/article/your-content-now-mobile) from this perspective, and the same goes for styling. An experience shouldn't depend on a specific viewport width to work well.
 
 When writing your CSS, a mobile-first mindset will help keep your code DRY. *Using `min-width` only queries is the key.*
 
 Instead of:
 
-```
+```scss
 // Button
 // ===
 
@@ -29,7 +35,7 @@ Instead of:
 
 Try:
 
-```
+```scss
 // Button
 // ===
 
@@ -64,11 +70,11 @@ SCSS allows you to write media queries inside a declaration. This has several ad
 1. All component and sub-component styles, including modifiers, are in one place
 1. You can easily see what you are building on top of
 1. Less scrolling and reduced cognitive overhead
-1. Debugger is simpler
+1. Debugging is simpler
 
 Instead of:
 
-```
+```scss
 // Some Component
 // ===
 
@@ -112,7 +118,7 @@ Instead of:
 
 Try:
 
-```
+```scss
 // Some Component
 // ===
 

css/sass-best-practices/readme.md

@@ -45,7 +45,7 @@ Chances are you'll have to use a combination of all these strategies that works
 
 ## Global vs. Local Variables/Mixins
 
-Any `$variable` that is used in more than one file should be placed in the `/variables.scss` file. Others should be placed at the top of the file in which they're used.
+Any `$variable` that is used in more than one file should be placed in the `_variables.scss` file. Others should be placed at the top of the file in which they're used.
 
 Any `@mixin` that is used in more than one file should be placed in the `/utilities` folder.