use real BEM almost everywhere. Some restructuring is still missing

assets/stylesheets/course.css

@@ -1,4 +1,4 @@
-.course-card {
+@block course-card {
   display: flex;
   flex-direction: column;
   min-height: 30vh;
@@ -10,38 +10,35 @@
   & > * + * {
     margin-top: var(--grid-gutter);
   }
-}
 
-.course-card__categories {
-  flex: 0 0 var(--line-height);
-  color: var(--color-text-grey);
+  @element categories{
+    flex: 0 0 var(--line-height);
+  }
 
-  & a {
+  @element category{
     display: inline-block;
     margin-right: var(--grid-gutter);
+    color: var(--color-text-grey);
   }
-}
 
-.course-card__title {
-  flex: 1 1 auto;
-
-  & h2 {
-    margin: 0;
+  @element title {
+    flex: 1 1 auto;
+    margin-bottom: 0;
   }
-}
 
-.course-card__description {
-  flex: 1 1 auto;
+  @element description-wrapper {
+    flex: 1 1 auto;
 
-  & p {
-    margin: 0;
+    & p {
+      margin: 0;
+    }
   }
-}
 
-.course-card__link {
-  flex: 0 0 auto;
+  @element link-wapper {
+    flex: 0 0 auto;
+  }
 
-  & a {
+  @element link {
     display: inline-block;
     padding-bottom: 0.3em;
     border-bottom: 1px solid var(--color-link-content);

assets/stylesheets/footer.css

@@ -1,66 +1,68 @@
-#footer {
+@block footer {
   margin: var(--grid-gutter) 0;
   padding-top: var(--grid-gutter);
 
   border-top: 2px solid var(--color-bg-separator);
 
-  & .upper {
+  @element upper {
     display: flex;
 
     & > * {
       display: flex;
       align-items: center;
     }
+  }
 
-    & .navigation {
-      flex: 1 0 auto;
-      font-size: 0.9em;
+  @element navigation {
+    flex: 1 0 auto;
+    font-size: 0.9em;
 
-      & ul {
-        display: flex;
-        list-style: none;
+    & ul {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      & li {
         margin: 0;
-        padding: 0;
 
-        & li {
-          margin: 0;
-
-          & + li {
-            margin-left: calc(var(--grid-gutter) * 2);
-          }
-        }
-      }
-    }
-
-    & .apps {
-      flex: 0 0 auto;
-
-      & a {
-        display: inline-block;
-        width: 150px;
-
-        & + a {
-          margin-left: var(--grid-gutter);
-        }
-
-        & img {
-          width: 100%;
-          height: auto;
+        & + li {
+          margin-left: calc(var(--grid-gutter) * 2);
         }
       }
     }
   }
-  & .lower {
-    display: flex;
 
-    & .disclaimer {
-      flex: 1 0 auto;
-      font-size: 0.7em;
-      color: var(--color-text-grey);
-    }
-    & .social {
-      flex: 0 0 auto;
+  @element apps {
+    flex: 0 0 auto;
+
+    & a {
+      display: inline-block;
+      width: 150px;
+
+      & + a {
+        margin-left: var(--grid-gutter);
+      }
+
+      & img {
+        width: 100%;
+        height: auto;
+      }
     }
   }
+
+  @element lower {
+    display: flex;
+  }
+
+  @element disclaimer {
+    flex: 1 0 auto;
+    font-size: 0.7em;
+    color: var(--color-text-grey);
+  }
+
+  @element social {
+    flex: 0 0 auto;
+  }
 }
 

assets/stylesheets/global.css

@@ -31,31 +31,32 @@ body {
   }
 }
 
-.wrapper-with-sidebar {
+@block wrapper-with-sidebar {
   @media (--breakpoint-desktop) {
     display: flex;
   }
-}
 
-.wrapper__sidebar {
-  @media (--breakpoint-desktop) {
-    flex: 0 0 220px;
-    padding: var(--grid-gutter);
-    border-radius: 7px;
-    box-shadow: var(--card-box-shadow);
+  @element sidebar {
+    @media (--breakpoint-desktop) {
+      flex: 0 0 220px;
+      padding: var(--grid-gutter);
+      border-radius: 7px;
+      box-shadow: var(--card-box-shadow);
 
-    & > h2 {
-      margin-bottom: calc(var(--grid-gutter) * 3);
+      & > h2 {
+        margin-bottom: calc(var(--grid-gutter) * 3);
+      }
     }
   }
-}
-.wrapper__content {
-  padding: var(--grid-gutter) 0;
 
-  @media (--breakpoint-desktop) {
-    flex: 1 1 auto;
-    margin-left: var(--grid-gutter);
-    overflow: hidden;
+  @element content {
+    padding: var(--grid-gutter) 0;
+
+    @media (--breakpoint-desktop) {
+      flex: 1 1 auto;
+      margin-left: var(--grid-gutter);
+      overflow: hidden;
+    }
   }
 }
 

assets/stylesheets/header.css

@@ -1,4 +1,4 @@
-#header {
+@block header {
   display: flex;
   flex-wrap: wrap;
 
@@ -11,13 +11,9 @@
     flex-wrap: nowrap;
   }
 
-  & .header__logo,
-  & .header__navarea {
+  @element logo {
     display: flex;
     flex: 0 0 100%;
-  }
-
-  & .header__logo {
     align-items: center;
 
     @media (--breakpoint-desktop) {
@@ -25,7 +21,9 @@
     }
   }
 
-  & .header__navarea {
+  @element navarea {
+    display: flex;
+    flex: 0 0 100%;
     flex-direction: column;
     justify-content: space-around;
 
@@ -35,7 +33,7 @@
     }
   }
 
-  & .navigation {
+  @element navigation {
     & ul {
       display: flex;
       list-style: none;
@@ -74,45 +72,44 @@
       }
     }
   }
-}
 
-.header__navarea {
-  & form {
-    display: flex;
-    flex-wrap: wrap;
+  @element navarea {
+    & form {
+      display: flex;
+      flex-wrap: wrap;
 
-    @media (--breakpoint-desktop) {
-      justify-content: flex-end;
-    }
-
-    & > * {
-      flex: 0 0 auto;
-    }
-
-    & fieldset {
-      padding: 0.2em 1em;
-      margin: 0;
-      border: none;
-      background: var(--color-bg-grey);
-      color: var(--color-text-grey);
-      border-radius: var(--border-radius);
-      font-size: 0.8em;
-
-      & + fieldset {
-        margin-left: var(--grid-gutter)
+      @media (--breakpoint-desktop) {
+        justify-content: flex-end;
       }
 
-      & label + select {
-        margin-left: 0.5em;
+      & > * {
+        flex: 0 0 auto;
       }
 
-      & select,
-      & label {
-        display: inline-block;
-        margin-top: 0;
-        margin-bottom: 0;
+      & fieldset {
+        padding: 0.2em 1em;
+        margin: 0;
+        border: none;
+        background: var(--color-bg-grey);
+        color: var(--color-text-grey);
+        border-radius: var(--border-radius);
+        font-size: 0.8em;
+
+        & + fieldset {
+          margin-left: var(--grid-gutter)
+        }
+
+        & label + select {
+          margin-left: 0.5em;
+        }
+
+        & select,
+        & label {
+          display: inline-block;
+          margin-top: 0;
+          margin-bottom: 0;
+        }
       }
     }
   }
 }
-

assets/stylesheets/homepage.css

@@ -1,25 +0,0 @@
-.hero {
-  display: flex;
-  justify-content: space-between;
-}
-.hero__image {
-  background-color: #20B5B6;
-  width: 65%;
-  height: 600px;
-  border-radius: .375rem;
-  box-shadow: var(--card-box-shadow);
-}
-.featured-cards-list {
-  width: 30%;
-  height: 600px;
-  display:flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.featured-cards__list {
-  background-color: #00AAE0;
-  height: 150px;
-  border-radius: .375rem;
-  box-shadow: var(--card-box-shadow);
-}

assets/stylesheets/module-landing.css

@@ -7,7 +7,6 @@
     padding: 0;
   }
 
-
   & img {
     width: 100%;
     height: auto;

assets/stylesheets/style.css

@@ -11,7 +11,6 @@
 @import './header';
 @import './footer';
 
-@import './homepage';
 @import './course';
 @import './module-landing';
 @import './module-lesson';

assets/stylesheets/variables.css

@@ -1,7 +1,7 @@
 @custom-media --breakpoint-desktop (min-width: 700px);
 
 :root {
-  --grid-gutter: 1rem;
+  --grid-gutter: 22px;
   --border-radius: 3px;
 
   --line-height: 1.5em;