Use nested rules

app/assets/stylesheets/framework/typography.scss

@@ -195,109 +195,134 @@
       }
     }
 
-    &.grid-none > thead > tr > th {
+    &.grid-none {
+      > thead > tr {
+        > th {
           border-bottom-width: 0;
           border-right-width: 0;
           border-left-width: 0;
+
+          &:first-child {
+            border-left-width: 1px;
           }
 
-    &.grid-rows > thead > tr > th,
-    &.grid-rows > tbody > tr > td {
-      border-right-width: 0;
-      border-left-width: 0;
+          &:last-child {
+            border-right-width: 1px;
+          }
         }
+      }
+
+      > tbody {
+        > tr {
+          > td {
+            border-width: 0;
 
-    &.grid-none > thead > tr > th:first-child,
-    &.grid-rows > thead > tr > th:first-child {
+            &:first-child {
               border-left-width: 1px;
             }
 
-    &.grid-none > thead > tr > th:last-child,
-    &.grid-rows > thead > tr > th:last-child {
+            &:last-child {
               border-right-width: 1px;
             }
+          }
 
-    &.grid-none > tbody > tr > td {
-      border-width: 0;
+          &:last-child > td {
+            border-bottom-width: 1px;
+          }
+        }
+      }
+    }
+
+    &.grid-rows {
+      > thead > tr > th,
+      > tbody > tr > td {
+        border-right-width: 0;
+        border-left-width: 0;
       }
 
-    &.grid-none > tbody > tr > td:first-child {
+      > thead > tr {
+        > th:first-child {
           border-left-width: 1px;
         }
 
-    &.grid-none > tbody > tr > td:last-child {
+        > th:last-child {
           border-right-width: 1px;
         }
-
-    &.grid-none > tbody > tr:last-child > td {
-      border-bottom-width: 1px;
       }
 
-    &.grid-rows > tbody > tr > td {
+      > tbody > tr {
+        > td {
           border-left-width: 0;
           border-right-width: 0;
         }
 
-    &.grid-rows > tbody > tr > td:first-child {
+        > td:first-child {
           border-left-width: 1px;
         }
 
-    &.grid-rows > tbody > tr > td:last-child {
+        > td:last-child {
           border-right-width: 1px;
         }
+      }
+    }
 
-    &.grid-cols > thead > tr > th {
+    &.grid-cols {
+      > thead > tr > th {
         border-bottom-width: 0;
       }
 
-    &.grid-cols > tbody > tr > td {
+      > tbody > tr > td {
         border-top-width: 0;
         border-bottom-width: 0;
       }
 
-    &.grid-cols > tbody > tr:last-child > td {
+      > tbody > tr:last-child > td {
         border-bottom-width: 1px;
       }
+    }
 
-    &.frame-sides > thead > tr > th {
+    &.frame-sides {
+      > thead > tr > th {
         border-top-width: 0;
       }
 
-    &.frame-sides > tbody > tr:last-child > td {
+      > tbody > tr:last-child > td {
         border-bottom-width: 0;
       }
+    }
 
-    &.frame-topbot > thead > tr > th:first-child,
-    &.frame-ends > thead > tr > th:first-child,
-    &.frame-topbot > tbody > tr > td:first-child,
-    &.frame-ends > tbody > tr > td:first-child {
+    &.frame-topbot,
+    &.frame-ends {
+      > thead > tr > th:first-child,
+      > tbody > tr > td:first-child {
         border-left-width: 0;
       }
 
-    &.frame-topbot > thead > tr > th:last-child,
-    &.frame-ends > thead > tr > th:last-child,
-    &.frame-topbot > tbody > tr > td:last-child,
-    &.frame-ends > tbody > tr > td:last-child {
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
         border-right-width: 0;
       }
+    }
 
-    &.frame-none > thead > tr > th {
+    &.frame-none {
+      > thead > tr > th {
         border-top-width: 0;
       }
 
-    &.frame-none > tbody > tr:last-child > td {
+      > tbody > tr:last-child > td {
         border-bottom-width: 0;
       }
 
-    &.frame-none > thead > tr > th:first-child,
-    &.frame-none > tbody > tr > td:first-child {
+      > thead > tr > th:first-child,
+      > tbody > tr > td:first-child {
         border-left-width: 0;
       }
 
-    &.frame-none > thead > tr > th:last-child,
-    &.frame-none > tbody > tr > td:last-child {
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
         border-right-width: 0;
       }
+    }
 
     &.stripes-all tr,
     &.stripes-odd tr:nth-of-type(odd),