Remoe nested CSS rules and element selectors in favor of class selectors

components/Navigation/Navigation.js

@@ -13,8 +13,12 @@ export default class extends Component {
   render() {
     return (
       <ul className="Navigation" role="menu">
-        <li><a href="/" onClick={Link.handleClick}>Home</a></li>
-        <li><a href="/about" onClick={Link.handleClick}>About</a></li>
+        <li className="Navigation-item">
+          <a className="Navigation-link" href="/" onClick={Link.handleClick}>Home</a>
+        </li>
+        <li className="Navigation-item">
+          <a className="Navigation-link" href="/about" onClick={Link.handleClick}>About</a>
+        </li>
       </ul>
     );
   }

components/Navigation/Navigation.scss

@@ -12,29 +12,29 @@
   margin: 2em 0 5em 0;
   list-style: none;
   justify-content: flex-end;
+}
 
-  li {
-    padding: 0 2em;
+.Navigation-item {
+  padding: 0 2em;
+}
 
-    a {
-      padding: 0.5em 1em;
-      color: $brand-color;
-      text-decoration: none;
-      text-transform: uppercase;
-      cursor: pointer;
+.Navigation-link {
+  padding: 0.5em 1em;
+  color: $brand-color;
+  text-decoration: none;
+  text-transform: uppercase;
+  cursor: pointer;
 
-      &:hover {
-        border-bottom: 3px solid $brand-color;
-        color: $text-color;
-      }
+  &:hover {
+    border-bottom: 3px solid $brand-color;
+    color: $text-color;
+  }
 
-      &:visited {
-        color: $brand-color;
+  &:visited {
+    color: $brand-color;
 
-        &:hover {
-          color: $text-color;
-        }
-      }
+    &:hover {
+      color: $text-color;
     }
   }
 }