callmeboge · June 5, 2018 23:08 · Oct 30, 2015 · Jul 25, 2014 · Jul 24, 2014 · Jul 24, 2014
diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -55,13 +55,11 @@ Unit | Description
 # Contexts
 
 ## Document-level
-Adjust the root font size in order to make relative units (e.g. `em` and `rem`)
-based on a `10px` scale (i.e. `1em` and `1rem` equals `10px`),
-rather than a typical `16px` scale.
+Assume the root font size is `16px` but don't require it to be so. Either declare the font size as `100%` or don't declare the `font-size` property at all.
 
 ```css
 html {
-  font-size: 62.5%;
+  font-size: 100%;
 }
 ```
 

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -6,38 +6,38 @@ Media | Recommended | Occasional use | Infrequent use | Not recommended
 Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc
 Print | em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax
 
-## Absolute units
-Absolute length units should rarely be used, since their calculated values
-don't adjust to their contexts.
-
-Unit | Description
-:--- | :---
-px | pixel (a dot on the computer screen)
-
 ## Relative units
 [Relative units](http://www.w3.org/TR/css3-values/#font-relative-lengths)
 play nicely with both screen and print media types and should be
 the most frequently used CSS units.
 
 Unit | Description
 :--- | :---
-% | percentage, relative to inherited value
+% | percentage, relative to the same property of the parent element
 [em](http://www.w3.org/TR/css3-values/#em-unit) | relative to font size of the element
 [rem](http://www.w3.org/TR/css3-values/#rem-unit) | relative to font size of the root element
 [ch](http://www.w3.org/TR/css3-values/#ch-unit) | relative to width of the "0" (ZERO, U+0030) glyph in the element's font
 [ex](http://www.w3.org/TR/css3-values/#ex-unit) | relative to x-height of the font
 
-## Physical units
-[Physical length units](http://www.w3.org/TR/css3-values/#absolute-lengths)
-should only be used for print style sheets, never for the screen.
-
-Unit | Description
-:--- | :---
-cm | centimeter
-mm | millimeter
-in | inch (`1in` equals `2.54cm`, `72pt`, and `6pc`)
-pt | point (`1pt` equals `1/72in` and `1/12pc`)
-pc | pica (`1pc` equals `12pt` and `1/6in`)
+## Absolute units
+Physical units (e.g. cm, mm, in, pc, and pt)
+should only be used for print style sheets,
+while pixels (px) should only be used for the screen.
+While there are consistent conversions among all of these
+[absolute length units](http://www.w3.org/TR/css3-values/#absolute-lengths),
+[depending on the device, CSS units can actually mean different things](http://omnicognate.wordpress.com/2013/01/07/in-css-px-is-not-an-angular-measurement-and-it-is-not-non-linear/).
+For example, while `1cm` in CSS should print as one physical centimeter,
+there's no guarantee that `1cm` in CSS results in one physical centimeter
+on the screen.
+
+Unit | Description | cm | mm | in | pc | pt | px
+:--- | :--- | ---: | ---: | ---: | ---: | ---: | ---:
+cm | centimeter | `1cm` | `10mm` | | | |
+mm | millimeter | `1/10cm` | `1mm` | | | |
+in | inch | `2.54cm` | `25.4mm` | `1in` | `6pc` | `72pt` | `96px`
+pc | pica | | | `1/6in` | `1pc` | `12pt` | `16px`
+pt | point | | | `1/72in` | `1/12pc` | `1pt` | `4/3px`
+px | pixel | | | `1/96in` | `1/16pc` | `3/4pt` | `1px`
 
 ## Viewport units
 

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -117,7 +117,6 @@ it may be best to use `rem` for margin and padding than `em`.
 
 ## Media queries
 [Only use `em` within media query definitions, never pixels](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).
-
 Until there's wider [`rem` support within media queries](http://fvsch.com/code/bugs/rem-mediaquery/),
 [`rem` should be avoided in media queries as well](http://codeboxers.com/em-vs-px-vs-rem-in-media-queries/).
 

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -116,7 +116,7 @@ it may be best to use `rem` for margin and padding than `em`.
 ```
 
 ## Media queries
-[Only use `em` within media query definitions, not pixels](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).
+[Only use `em` within media query definitions, never pixels](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).
 
 Until there's wider [`rem` support within media queries](http://fvsch.com/code/bugs/rem-mediaquery/),
 [`rem` should be avoided in media queries as well](http://codeboxers.com/em-vs-px-vs-rem-in-media-queries/).

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -116,4 +116,15 @@ it may be best to use `rem` for margin and padding than `em`.
 ```
 
 ## Media queries
-?
+[Only use `em` within media query definitions, not pixels](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).
+
+Until there's wider [`rem` support within media queries](http://fvsch.com/code/bugs/rem-mediaquery/),
+[`rem` should be avoided in media queries as well](http://codeboxers.com/em-vs-px-vs-rem-in-media-queries/).
+
+```css
+@media (min-width: 20em) {
+  .Component {
+    background-color: blue;
+  }
+}
+```
diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -1,4 +1,5 @@
-# CSS Units
+# CSS units
+Recommendations of unit types per media type:
 
 Media | Recommended | Occasional use | Infrequent use | Not recommended
 :--- | :--- | :--- | :--- | :---
@@ -14,6 +15,9 @@ Unit | Description
 px | pixel (a dot on the computer screen)
 
 ## Relative units
+[Relative units](http://www.w3.org/TR/css3-values/#font-relative-lengths)
+play nicely with both screen and print media types and should be
+the most frequently used CSS units.
 
 Unit | Description
 :--- | :---
@@ -51,8 +55,9 @@ Unit | Description
 # Contexts
 
 ## Document-level
-In order to make relative units (e.g. `em` and `rem`) based on a `10px` scale,
-rather than a `16px` scale (ord)
+Adjust the root font size in order to make relative units (e.g. `em` and `rem`)
+based on a `10px` scale (i.e. `1em` and `1rem` equals `10px`),
+rather than a typical `16px` scale.
 
 ```css
 html {
@@ -71,6 +76,8 @@ Most likely use `px`, as most of the time, the border shouldn't need to scale.
 ## Font-size
 Font-size should only be applied at the lowest possible child elements,
 in order to minimize its cascading impact on relative units.
+While both of the following two examples are essentially equivalent,
+only the first is recommended.
 
 **DO**:
 ```css
@@ -96,16 +103,17 @@ in order to minimize its cascading impact on relative units.
 }
 ```
 
-## Media queries
-In the document root,
-
 ## Padding and margin
 In order to ensure consistent use of whitespace throughout the application,
-its best to use `rem`.
+given a component could be used in a variety of contexts,
+it may be best to use `rem` for margin and padding than `em`.
 
 ```css
 .Component {
   margin: 1rem 0;
   padding: 1rem;
 }
 ```
+
+## Media queries
+?
diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -6,8 +6,8 @@ Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc
 Print | em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax
 
 ## Absolute units
-Absolute units should rarely be used, since their calculated values don't adjust
-to their contexts.
+Absolute length units should rarely be used, since their calculated values
+don't adjust to their contexts.
 
 Unit | Description
 :--- | :---
@@ -17,14 +17,14 @@ px | pixel (a dot on the computer screen)
 
 Unit | Description
 :--- | :---
-% | percentage
+% | percentage, relative to inherited value
 [em](http://www.w3.org/TR/css3-values/#em-unit) | relative to font size of the element
 [rem](http://www.w3.org/TR/css3-values/#rem-unit) | relative to font size of the root element
 [ch](http://www.w3.org/TR/css3-values/#ch-unit) | relative to width of the "0" (ZERO, U+0030) glyph in the element's font
 [ex](http://www.w3.org/TR/css3-values/#ex-unit) | relative to x-height of the font
 
 ## Physical units
-The following [physical units](http://www.w3.org/TR/css3-values/#absolute-lengths)
+[Physical length units](http://www.w3.org/TR/css3-values/#absolute-lengths)
 should only be used for print style sheets, never for the screen.
 
 Unit | Description

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -1,7 +1,7 @@
 # CSS Units
 
 Media | Recommended | Occasional use | Infrequent use | Not recommended
-- | - | - | - | -
+:--- | :--- | :--- | :--- | :---
 Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc
 Print | em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax
 
@@ -10,13 +10,13 @@ Absolute units should rarely be used, since their calculated values don't adjust
 to their contexts.
 
 Unit | Description
-- | -
+:--- | :---
 px | pixel (a dot on the computer screen)
 
 ## Relative units
 
 Unit | Description
-- | -
+:--- | :---
 % | percentage
 [em](http://www.w3.org/TR/css3-values/#em-unit) | relative to font size of the element
 [rem](http://www.w3.org/TR/css3-values/#rem-unit) | relative to font size of the root element
@@ -28,7 +28,7 @@ The following [physical units](http://www.w3.org/TR/css3-values/#absolute-length
 should only be used for print style sheets, never for the screen.
 
 Unit | Description
-- | -
+:--- | :---
 cm | centimeter
 mm | millimeter
 in | inch (`1in` equals `2.54cm`, `72pt`, and `6pc`)
@@ -42,7 +42,7 @@ should be used with caution, as there is still some
 [lingering bugs with their implementation](http://caniuse.com/#feat=viewport-units).
 
 Unit | Description
-- | -
+:--- | :---
 [vw](http://www.w3.org/TR/css3-values/#vw-unit) | relative to 1% of viewport's width
 [vh](http://www.w3.org/TR/css3-values/#vh-unit) | relative to 1% of viewport's height
 [vmin](http://www.w3.org/TR/css3-values/#vmin-unit) | relative to 1% of viewport's smaller dimension

diff --git a/css-units-best-practices.md b/css-units-best-practices.md
@@ -0,0 +1,111 @@
+# CSS Units
+
+Media | Recommended | Occasional use | Infrequent use | Not recommended
+- | - | - | - | -
+Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc
+Print | em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax
+
+## Absolute units
+Absolute units should rarely be used, since their calculated values don't adjust
+to their contexts.
+
+Unit | Description
+- | -
+px | pixel (a dot on the computer screen)
+
+## Relative units
+
+Unit | Description
+- | -
+% | percentage
+[em](http://www.w3.org/TR/css3-values/#em-unit) | relative to font size of the element
+[rem](http://www.w3.org/TR/css3-values/#rem-unit) | relative to font size of the root element
+[ch](http://www.w3.org/TR/css3-values/#ch-unit) | relative to width of the "0" (ZERO, U+0030) glyph in the element's font
+[ex](http://www.w3.org/TR/css3-values/#ex-unit) | relative to x-height of the font
+
+## Physical units
+The following [physical units](http://www.w3.org/TR/css3-values/#absolute-lengths)
+should only be used for print style sheets, never for the screen.
+
+Unit | Description
+- | -
+cm | centimeter
+mm | millimeter
+in | inch (`1in` equals `2.54cm`, `72pt`, and `6pc`)
+pt | point (`1pt` equals `1/72in` and `1/12pc`)
+pc | pica (`1pc` equals `12pt` and `1/6in`)
+
+## Viewport units
+
+[Viewport-percentage length units](http://www.w3.org/TR/css3-values/#viewport-relative-lengths)
+should be used with caution, as there is still some
+[lingering bugs with their implementation](http://caniuse.com/#feat=viewport-units).
+
+Unit | Description
+- | -
+[vw](http://www.w3.org/TR/css3-values/#vw-unit) | relative to 1% of viewport's width
+[vh](http://www.w3.org/TR/css3-values/#vh-unit) | relative to 1% of viewport's height
+[vmin](http://www.w3.org/TR/css3-values/#vmin-unit) | relative to 1% of viewport's smaller dimension
+[vmax](http://www.w3.org/TR/css3-values/#vmax-unit) | relative to 1% of viewport's larger dimension
+
+# Contexts
+
+## Document-level
+In order to make relative units (e.g. `em` and `rem`) based on a `10px` scale,
+rather than a `16px` scale (ord)
+
+```css
+html {
+  font-size: 62.5%;
+}
+```
+
+## Borders
+Most likely use `px`, as most of the time, the border shouldn't need to scale.
+```css
+.Component {
+  border-bottom: 1px solid #ccc;
+}
+```
+
+## Font-size
+Font-size should only be applied at the lowest possible child elements,
+in order to minimize its cascading impact on relative units.
+
+**DO**:
+```css
+.Component {
+}
+.Component-heading {
+  font-size: 1.2em;
+}
+.Component-body {
+  font-size: 0.9em;
+}
+```
+**DO NOT**:
+```css
+.Component {
+  font-size: 1.2em;
+}
+.Component-heading {
+  font-size: 1em;
+}
+.Component-body {
+  font-size: 0.75em;
+}
+```
+
+## Media queries
+In the document root,
+
+## Padding and margin
+In order to ensure consistent use of whitespace throughout the application,
+its best to use `rem`.
+
+```css
+.Component {
+  margin: 1rem 0;
+  padding: 1rem;
+}
+```