Formatting

articles/writing-performant-css.md

@@ -10,9 +10,9 @@ Writing performant CSS is one way we can help the page render faster.
 A mobile-first approach takes the most simple version of our layouts, i.e. mobile, and treats it as the baseline for all other styles. This means that we  should write CSS breakpoints with `min-width` and not with `max-width`. 
 
 This does a few things:
-- it avoids having to define complicated styles for larger screens, only to have to undo them for mobile
-- it gives the mobile device less to parse
-- it results in less code in general
+- Avoids having to define complicated styles for larger screens, only to have to reset them to a simpler style for mobile
+- Gives the mobile device less to parse
+- Often results in less code
 
 Take a typical article layout structure as an example. On mobile, the entire layout is 1 column, but on desktop, the article body is about 2/3 of the layout and the sidebar containing ads and related content is a fixed 340px. 
 
@@ -32,6 +32,12 @@ The HTML might look like this.
 __Avoid__
 
 ```css
+/**
+ * Here we're starting with styles for large screens as the default.
+ * This is bad because we're making mobile phones, who are likely to have
+ * less computing power, to parse these rules when they are reset in the 
+ * media query below.
+ */
 .article {
   display: flex;
 }
@@ -61,6 +67,9 @@ __Avoid__
 __Prefer__
 
 ```css
+/**
+ * We start with common styles that apply to all devices.
+ */
 .article__body {
   margin-bottom: 20px;
 }
@@ -91,7 +100,7 @@ __Prefer__
 ## Be Aware of Layout Triggers
 When content is displayed on screen, the browser has to perform a 3-step process known layout, paint, and composite.
 
-- __Layout__ allocates the height and width of the element.
+- __Layout__ allocates the height and width of the element and its location on screen.
 - __Paint__ draws pixels on the screen.
 - __Composite__ stacks the layers on top of one another. Think of it like a z-index for the entire document.
 
@@ -101,6 +110,7 @@ For information about what CSS properties trigger paint, layout, and composites,
 
 ## Dead CSS
 If you are copying CSS from another site, be aware that it may not all be needed. Also, as the site ages, modules might be removed or hidden as they are no longer needed or as strategy changes.
+
 Shipping unneeded code does nothing to enhance the site. It's only a detriment.  
 
 Removing CSS is a tricky process because you don't want unstyled elements, but there are some things you can do to make refactoring easier.