use real BEM almost everywhere. Some restructuring is still missing

views/course.pug

@@ -4,7 +4,7 @@ include mixins/_lesson
 
 block content
   .wrapper.wrapper-with-sidebar
-    section.wrapper__sidebar
+    section.wrapper-with-sidebar__sidebar
       h2 Table of contents
       .table-of-contents
         ul
@@ -13,7 +13,7 @@ block content
           each lesson in course.fields.lessons
             li
               a(href=`/courses/${course.fields.slug}/lessons/${lesson.fields.slug}`) #{lesson.fields.title}
-    section.wrapper__content
+    section.wrapper-with-sidebar__content
       h1= course.fields.title
 
       if lesson

views/courses.pug

@@ -4,7 +4,7 @@ include mixins/_courseCard
 
 block content
   .wrapper.wrapper-with-sidebar
-    section.wrapper__sidebar
+    section.wrapper-with-sidebar__sidebar
       h2 Categories
       .sidebar-menu
         ul
@@ -13,7 +13,7 @@ block content
           each category in categories
             li
               a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
-    section.wrapper__content
+    section.wrapper-with-sidebar__content
       h1= title
       .courses.grid-list-small
         each course in courses

views/layout.pug

@@ -7,12 +7,12 @@ html
     #main
       #main__header
         .wrapper
-          header#header
+          header.header
             section.header__logo
-              a.logo--link(href='#')
+              a.header__logo-link(href='#')
                 img(src='/images/logo.png' alt='Contentful University')
             section.header__navarea
-              section.controls
+              section.header__controls
                 form(action="." method="get")
                   fieldset
                     label(for='api') API type:
@@ -24,7 +24,7 @@ html
                     select(name='locale' onChange='this.form.submit()')
                       option(value='en-US') English
                       option(value='de-DE') German
-              nav.navigation
+              nav.header__navigation
                 ul
                   li
                     a.active(href='/') Home
@@ -40,9 +40,9 @@ html
 
       #main__footer
         .wrapper
-          footer#footer
-            .upper
-              nav.navigation
+          footer.footer
+            .footer__upper
+              nav.footer__navigation
                 ul
                   li
                     a.active(href='/') Home
@@ -52,15 +52,15 @@ html
                     a(href='/about') About
                   li
                     a(href='/settings') Settings
-              .apps
+              .footer__apps
                 a(href='#')
                   img(src='/images/app-store-badge.png')
                 a(href='#')
                   img(src='/images/google-play-badge.png')
-            .lower
-              .disclaimer
+            .footer__lower
+              .footer__disclaimer
                 p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
-              .social
+              .footer__social
                 p
                   a(href='#') FB
                   a(href='#') TW

views/mixins/_copyModule.pug

@@ -1,8 +1,5 @@
 mixin copyModule(module)
-  .module
-    .module__copy
-      h1.module__copy__title #{module.fields.title}
-      h3.module__copy__headline #{module.fields.headline}
-      div.module__copy__copy !{helpers.markdown(module.fields.copy)}
-
-
+  .module.module-copy
+    h1.module-copy__title #{module.fields.title}
+    h3.module-copy__headline #{module.fields.headline}
+    div.module-copy__copy !{helpers.markdown(module.fields.copy)}

views/mixins/_courseCard.pug

@@ -3,11 +3,10 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
     .course-card__categories
       if(course.fields.categories)
         each category in course.fields.categories
-          a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
-    .course-card__title
-      h2= course.fields.title
-    .course-card__description
+          a.course-card__category(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
+    h2.course-card__title= course.fields.title
+    .course-card__description-wrapper
       p !{helpers.markdown(course.fields.shortDescription)}
-    .course-card__link
-      a(href=`/courses/${course.fields.slug}`) view course
+    .course-card__link-wrapper
+      a.course-card__link(href=`/courses/${course.fields.slug}`) view course
 

views/mixins/_heroImageModule.pug

@@ -1,6 +1,5 @@
 mixin heroImageModule(module)
-  .module
-    .module__heroImage
-      h2.module__heroImage__title #{module.fields.title}
-      h3.module__heroImage__headline #{module.fields.headline}
-      img.module__heroImage__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
+  .module.module-hero-image
+    h2.module-hero-image__title #{module.fields.title}
+    h3.module-hero-image__headline #{module.fields.headline}
+    img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)

views/mixins/_highlightedCourse.pug

@@ -1,7 +1,6 @@
 include ./_courseCard
 
 mixin highlightedCourseModule(module)
-  .module
-    .module__higlightedCourse
-      h2.module__higlightedCourse__title #{module.fields.title}
-      +courseCard(module.fields.course)
+  .module.module-higlighted-course
+    h2.module-higlighted-course__title #{module.fields.title}
+    +courseCard(module.fields.course)

views/mixins/_highlightedLessonsModule.pug

@@ -1,9 +1,8 @@
 include _lesson
 
 mixin _highlightLessonsModule(module)
-  .module
-    .module__higlightedLessons
-      h2.module__higlightedLessons__title #{module.fields.title}
-      each lesson in module.fields.lessons
-        +lesson(lesson)
+  .module.module-higlighted-lessons
+    h2.module-higlighted-lessons__title #{module.fields.title}
+    each lesson in module.fields.lessons
+      +lesson(lesson)
 

views/mixins/_lesson.pug

@@ -5,7 +5,7 @@ include _lessonModuleImage
 mixin lesson(lesson)
   .lesson
     h2.lesson__tilte #{lesson.fields.title}
-    div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)}
+    div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
     if lesson.fields.image
       img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
     each module in lesson.fields.modules

views/mixins/_lessonModuleCodeSnippet.pug

@@ -1,21 +1,21 @@
 mixin lessonModuleCodeSnippet(module)
-  .lesson-module.lesson-module__code
+  .lesson-module.lesson-module-code
     h1.lesson-module__title #{module.fields.title}
-    pre.lesson-module__code__curl
+    pre.lesson-module-code__curl
       code.shell= module.fields.curl
-    pre.lesson-module__code__dotnet
-      code.csharp= module.fields.dotNet
-    pre.lesson-module__code__javascript
+    pre.lesson-module-code__dotnet
+      code.csharp= module.fields.dot-net
+    pre.lesson-module-code__javascript
       code.javascript= module.fields.javascript
-    pre.lesson-module__code__java
+    pre.lesson-module-code__java
       code.java= module.fields.java
-    pre.lesson-module__code__javaAndroid
+    pre.lesson-module-code__java-android
       code.java= module.fields.javaAndroid
-    pre.lesson-module__code__php
+    pre.lesson-module-code__php
       code.php= module.fields.php
-    pre.lesson-module__code__python
+    pre.lesson-module-code__python
       code.python= module.fields.python
-    pre.lesson-module__code__ruby
+    pre.lesson-module-code__ruby
       code.ruby= module.fields.ruby
-    pre.lesson-module__code__swift
+    pre.lesson-module-code__swift
       code.swift= module.fields.swift

views/mixins/_lessonModuleCopy.pug

@@ -1,4 +1,4 @@
 mixin lessonModuleCopy(module)
-  .lesson-module.lesson-module__copy
-    h3.lesson-module__copy__title #{module.fields.title}
-    .lesson-module__copy__copy !{helpers.markdown(module.fields.copy)}
+  .lesson-module.lesson-module-copy
+    h3.lesson-module-copy__title #{module.fields.title}
+    .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}

views/mixins/_lessonModuleImage.pug

@@ -1,4 +1,4 @@
 mixin lessonModuleImage(module)
-  .lesson-module.lesson-module__image
-    img.lesson-module__image__image(src=module.fields.file.url alt=module.fields.title)
-    div.lesson-module__image__title #{module.fields.title}
+  .lesson-module.lesson-module-image
+    img.lesson-module-image__image(src=module.fields.file.url alt=module.fields.title)
+    div.lesson-module-image__title #{module.fields.title}