Use nested rules

app/assets/stylesheets/framework/typography.scss

@@ -195,108 +195,133 @@
       }
     }
 
-    &.grid-none > thead > tr > th {
-      border-bottom-width: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
+    &.grid-none {
+      > thead > tr {
+        > th {
+          border-bottom-width: 0;
+          border-right-width: 0;
+          border-left-width: 0;
+
+          &:first-child {
+            border-left-width: 1px;
+          }
+
+          &:last-child {
+            border-right-width: 1px;
+          }
+        }
+      }
 
-    &.grid-rows > thead > tr > th,
-    &.grid-rows > tbody > tr > td {
-      border-right-width: 0;
-      border-left-width: 0;
-    }
+      > tbody {
+        > tr {
+          > td {
+            border-width: 0;
 
-    &.grid-none > thead > tr > th:first-child,
-    &.grid-rows > thead > tr > th:first-child {
-      border-left-width: 1px;
-    }
+            &:first-child {
+              border-left-width: 1px;
+            }
 
-    &.grid-none > thead > tr > th:last-child,
-    &.grid-rows > thead > tr > th:last-child {
-      border-right-width: 1px;
-    }
+            &:last-child {
+              border-right-width: 1px;
+            }
+          }
 
-    &.grid-none > tbody > tr > td {
-      border-width: 0;
+          &:last-child > td {
+            border-bottom-width: 1px;
+          }
+        }
+      }
     }
 
-    &.grid-none > tbody > tr > td:first-child {
-      border-left-width: 1px;
-    }
+    &.grid-rows {
+      > thead > tr > th,
+      > tbody > tr > td {
+        border-right-width: 0;
+        border-left-width: 0;
+      }
 
-    &.grid-none > tbody > tr > td:last-child {
-      border-right-width: 1px;
-    }
+      > thead > tr {
+        > th:first-child {
+          border-left-width: 1px;
+        }
 
-    &.grid-none > tbody > tr:last-child > td {
-      border-bottom-width: 1px;
-    }
+        > th:last-child {
+          border-right-width: 1px;
+        }
+      }
 
-    &.grid-rows > tbody > tr > td {
-      border-left-width: 0;
-      border-right-width: 0;
-    }
+      > tbody > tr {
+        > td {
+          border-left-width: 0;
+          border-right-width: 0;
+        }
 
-    &.grid-rows > tbody > tr > td:first-child {
-      border-left-width: 1px;
-    }
+        > td:first-child {
+          border-left-width: 1px;
+        }
 
-    &.grid-rows > tbody > tr > td:last-child {
-      border-right-width: 1px;
+        > td:last-child {
+          border-right-width: 1px;
+        }
+      }
     }
 
-    &.grid-cols > thead > tr > th {
-      border-bottom-width: 0;
-    }
+    &.grid-cols {
+      > thead > tr > th {
+        border-bottom-width: 0;
+      }
 
-    &.grid-cols > tbody > tr > td {
-      border-top-width: 0;
-      border-bottom-width: 0;
-    }
+      > tbody > tr > td {
+        border-top-width: 0;
+        border-bottom-width: 0;
+      }
 
-    &.grid-cols > tbody > tr:last-child > td {
-      border-bottom-width: 1px;
+      > tbody > tr:last-child > td {
+        border-bottom-width: 1px;
+      }
     }
 
-    &.frame-sides > thead > tr > th {
-      border-top-width: 0;
-    }
+    &.frame-sides {
+      > thead > tr > th {
+        border-top-width: 0;
+      }
 
-    &.frame-sides > tbody > tr:last-child > td {
-      border-bottom-width: 0;
+      > 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 {
-      border-left-width: 0;
-    }
+    &.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 {
-      border-right-width: 0;
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
+        border-right-width: 0;
+      }
     }
 
-    &.frame-none > thead > tr > th {
-      border-top-width: 0;
-    }
+    &.frame-none {
+      > thead > tr > th {
+        border-top-width: 0;
+      }
 
-    &.frame-none > tbody > tr:last-child > td {
-      border-bottom-width: 0;
-    }
+      > tbody > tr:last-child > td {
+        border-bottom-width: 0;
+      }
 
-    &.frame-none > thead > tr > th:first-child,
-    &.frame-none > tbody > tr > td:first-child {
-      border-left-width: 0;
-    }
+      > 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 {
-      border-right-width: 0;
+      > thead > tr > th:last-child,
+      > tbody > tr > td:last-child {
+        border-right-width: 0;
+      }
     }
 
     &.stripes-all tr,