Здравствуйте. Пытаюсь вкурить БЭМ. Пишу более коротко ибо
post__item--color довольно громоздко. Мне нужен совет так как я недопонимаю некоторых моментов. С блоками внутри блоков. Код будет ниже.
В официальной документации написанно: Блок - Функционально независимый компонент страницы, который может быть повторно использован
У меня есть секция с
class="news" в ней у меня будет 2-а вида поста маленький и большой, но пока что я рассмотрю маленький.
Блок маленького поста имеет
class="post" первым делом в него входит
post_item в котором будет находиться картинка
post_item_img и блок который будет появляться при наведении hidden
В этом месте я хотел бы остановиться и спросить. Если этот блок будет использоваться в большом посту и я его считаю независимым т.е. блоком который может использоваться где либо еще. иогу ли я его написать без родителя
post_ выходит это не элемент блока и не модификатор, а блок в блоке!!!
Далее в hidden есть кнопка с
class="hidden_button" ну это его элемент по этому я написал так.
в блоке с
class="post" есть еще один вложенный блок с
class="content" Я его тоже считаю независимым. Блоком который будет использоваться в большом посте, но с некоторыми изменениями.
В большом посте останется только а H2 &p будут заменены так как там будет другая структура.
Собственно вопрос правильно ли я мыслю и вообще правильно ли я делаю.
КОД: https://jsfiddle.net/b41z19vz/2/
В SASS выглядит так:
/* section pots end */
.news
padding: 46px 0
background-color: $body_color
.post
position: relative
min-height: 266px
&_item
position: relative
&::after
position: absolute
bottom: 0
left: 0
right: 0
height: 3px
content: ""
background-color: $gray_color
&_img
width: 100%
.ln
&_green
&::after
background-color: $green_color
&_yellow
&::after
background-color: $yellow_color
&_purple
&::after
background-color: $purple_color
.hidden
top: 0
left: 0
width: 100%
height: 100%
position: absolute
background-color: rgba(0,0,0,.7)
&_button
width: 141px
height: 35px
padding: 6px 5px 5px 35px
color: $white_color
text-transform: uppercase
border: 2px solid $white_color
border-radius: 25px
display: block
margin: 0 auto
margin-top: 10%
background-image: url(../img/loopa.png)
background-repeat: no-repeat
background-position: 12% 50%
.shade
&_green
background-color: rgba(27,175,93,.7)
&_yellow
background-color: rgba(248,151,31,.7)
&_purple
background-color: rgba(136,73,156,.7)
.content
position: relative
padding: 20px 15px 0
text-align: center
&_ticket
width: 61px
height: 61px
border-radius: 50%
border: 3px solid $white_color
background-color: $gray_color
margin: 0 auto
left: 0
top: -30px
right: 0
bottom: 0
position: absolute
&_title
color: $black_color
font-size: 14px
&_text
font-size: 12px
color: $gray_color
text-transform: uppercase
font-weight: bold
bottom: 0
.tic
&_green
background-color: $green_color
&_yellow
background-color: $yellow_color
&_purple
background-color: $purple_color
.txt
&_green
color: $green_color
&_yellow
color: $yellow_color
&_purple
color: $purple_color
