BEM naming

src/components/mixins.pug

@@ -1,7 +1,7 @@
 include data.pug
 -
   // Данные для меню навигации
-  const menuItems = {
+  const navbarItems = {
     Home: './index.html',
     Embedded: './embeded_details.html',
     OpenCV: './opencv_details.html',
@@ -47,17 +47,17 @@ include data.pug
         { src: require('../images/sqesp32.png'), alt: 'STM32'}
       ]
 
-mixin menuItem(selectedItem)
+mixin navbarMixin(selectedItem)
-    nav.menu
+    .navbar
-        each menuUrl,menuName in menuItems
+        each navbarUrl,navbarName in navbarItems
-            if menuName == selectedItem
+            if navbarName == selectedItem
-                a.menu__link(href=menuUrl)
+                a.navbar__link__wrapper(href=navbarUrl)
-                    .menu__item.menu__item_selected #{menuName}
+                    .navbar__item.navbar__item_selected #{navbarName}
             else
-                a.menu__link(href=menuUrl)
+                a.navbar__link__wrapper(href=navbarUrl)
-                    .menu__item #{menuName}
+                    .navbar__item #{navbarName}
 
-mixin cards()
+mixin infoCardsMinxin()
   each cardData in  smallCards 
     .small-card
         .small-card__content 
@@ -67,6 +67,6 @@ mixin cards()
         .small-card__image
           img(src=cardData.image alt=cardData.imageAlt)
 
-mixin gallery()
+mixin galleryMixin()
   each img in galleryImages
-     img.hero-images__item(src=img.src alt=img.alt)
+     img.gallery__image(src=img.src alt=img.alt)

src/pages/index.pug

@@ -22,33 +22,30 @@ html(lang="en")
         title Portfolio
         
     body
-        +menuItem("Home")
+        +navbarMixin("Home")
 
-        .hero-images
+        .gallery
-            +gallery()
+            +galleryMixin()
          
-        main.main
+        .main-container
-            .main__content
+            .main-container__content
-                // Информационный блок A
                 article.info-block
                     h2.info-block__header #{infoBlockA.header}
-                    .info-block__container.info-block__container_layout_a
+                    .info-block__container.info-block__container_layout-a
                         p.info-block__text #{infoBlockA.text}
                         .info-block__details
                             p.info-block__description #{infoBlockA.description}
                             a.info-block__link(href="#") More info
                         img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt)
 
-                // Информационный блок B
                 article.info-block
                     h2.info-block__header #{infoBlockB.header}
-                    .info-block__container.info-block__container_layout_b
+                    .info-block__container.info-block__container_layout-b
                         p.info-block__text #{infoBlockB.text}
                         img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt)
                         .info-block__details
                             p.info-block__description #{infoBlockB.description}
                             a.info-block__link(href="#") More info
 
-            // Боковая панель
+            .sidebar
-            aside.sidebar
+                +infoCardsMinxin()
-                +cards()

src/styles/index.styl

@@ -1,5 +1,4 @@
-// БЭМ блок: Меню навигации
+.navbar
-.menu
     border-top double thick silver
     border-bottom double thick silver
     font-size 0
@@ -8,7 +7,7 @@
     grid-template-rows 1fr
     justify-items start
     
-    &__link
+    &__link__wrapper
         color black
         text-decoration none
         
@@ -31,14 +30,13 @@
             border-left double thin silver
             border-right double thin silver
 
-// БЭМ блок: Hero изображения
+.gallery
-.hero-images
     display flex
     flex-direction row
     width 90%
     margin auto
     
-    &__item
+    &__image
         margin auto
         width 100%
         border thin solid black
@@ -46,16 +44,12 @@
         &:nth-child(2n+1)
             margin-top 10px
 
-// БЭМ блок: Основной контейнер
+.main-container
-.main
     display grid
     grid-template-columns 3fr 1fr
     grid-template-rows 1fr
     
-    &__content
-        // Стили для основного контента
 
-// БЭМ блок: Информационный блок
 .info-block
     border solid thin black
     padding 2vw
@@ -67,12 +61,12 @@
         text-align center
         
     &__container
-        &_layout_a
+        &_layout-a
             display grid
             grid-template-columns 3fr 3fr 2fr
             grid-template-rows 1fr
             
-        &_layout_b
+        &_layout-b
             display grid
             grid-template-columns 4fr 7fr 4fr
             grid-template-rows 1fr
@@ -88,18 +82,15 @@
         width 100%
         
     &__link
-        // Стили для ссылок
         color inherit
         
-    &__details
-        // Стили для деталей
 
-// БЭМ блок: Боковая панель
+
+
 .sidebar
     border-left thin solid black
     margin 30px 0 0 50px
 
-// БЭМ блок: Маленькая карточка
 .small-card
     margin 20px 10px 0
     display grid
@@ -114,9 +105,6 @@
         font-weight bold
         text-align right
         
-    &__text
-        // Базовые стили для текста
-        
     &__link
         display block
         text-align right
@@ -127,14 +115,17 @@
             width 100%
         margin-left:10px
 
-// Медиа-запросы
 @media screen and (max-width: 1000px)
     .small-card
         display flex
         flex-direction column
+    .sidebar
+        margin 0
+        width:100%
+
 
 @media screen and (max-width: 800px)
-    .menu
+    .navbar
         grid-template-columns 1fr 1fr
         grid-template-rows 1fr 1fr 1fr
         justify-items center
@@ -145,19 +136,19 @@
                 border-left none
                 border-right none
     
-    .hero-images
+    .gallery
         display inline-flex
         flex-direction column
         width 100%
         
-        &__item
+        &__image
             width 100%
             height 100%
             
             &:nth-child(2n+1)
                 margin-top 0px
     
-    .main
+    .main-container
         display flex
         flex-direction column