Олег

https://codepen.io/werty1001/pen/BqwzaL - подход неидеальный, но это чисто декоративный элемент, поэтому более менее можно забить

Модификаторы норм, в БЭМ можно использовать каскад (только с умом), что касается второго вопроса, можно отказаться от блоков select, input, textarea и сделать один - field, который может быть и селектом и инпутом.

Все довольно просто:

блок - это независимая и самодостаточная единица, например кнопка, ссылка, логотип, весь сайт это лишь набор блоков. В стили можно писать все (кроме отступов и позиционирования*).

модификатор позволит добавить какие-то особенности блоку или элементу, для модификатора блока в стили можно писать все (кроме отступов и позиционирования*), для модификатора элемента можно все.

элемент - это зависимая единица, которая не имеет смысла вне блока и не понадобится на сайте в другом месте, также отвечает за позиционирование блоков внутри других блоков, в стили можно писать все.

*position, display, float, margin

Я бы сделал так

1. У блока не должно быть margin'a в принципе
2. Нужно использовать два микса: .header__logo и .footer__logo
3. Для нормального переопределения используйте сборки для БЭМ'a

h3 #[span Тут слово] и вот еще пару слов

Я сделал блок grid и все, один раз написал и пользуйся потом во всех проектах, если лень, то да, можно просто взять от bootstrap, но тогда лучше вкладывать БЭМ сущности в сетку, если миксовать, то будет совсем кашка.

Возможно

.product--production-wrapper
	each item in [ {image: 'bed-1.jpg', price: '1999', name: 'Название продукта 1'}, {image: 'bed-2.jpg', price: '345', name: 'Название продукта 2'}, {image: 'bed-3.jpg', price: '2329', name: 'Название продукта 3'} ]

		article.bed.card
			.product--image
				a(href="#"): img(src=`assets/img/product-image/${item.image}`)
			.product--desc-wrapper
				.product--name-href
					h5= item.name
					a(href="#") Кровати
				a(href="#").price= item.price

Да, но лучше объединять модификаторы, когда это возможно.

mixin list( items )
	each item in items 
		li
			a(href=item.href)=item.text

+list( [ {href: 'index.html', text: 'Home'}, {href: 'about.html', text: 'About'}, {href: 'contacts.html', text: 'Contacts'} ] )

label.pure-checkbox(for="cb")
	input#cb(type="checkbox")
	| I've read the terms and conditions