Анатолий Медведев

проблема в .thumbs overflow

А зачем вам этот обработчик? При нажатии на лейбл связанный чекбокс автоматом отметиться и без него, а так это действие производится дважды (при нажатии на чекбокс) и ничего не происходит.

Примерно так, возможно где то ошибся, не проверял.

<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">

var images = document.querySelectorAll('.image');
images.forEach(function(image) {
  image.addEventListener('click', function(e) {
   if(e.target.src.match("img/like.png")) {
    e.target.src = "img/like-full.png";
  }
  else {
    e.target.src = "img/like.png";
  }
 })
})

пример jsfiddle.net/barzik/QZ3ff

Результирующие бандлы css и js не должны лежать в гит от слова совсем. Сжимать можно чему угодно, берем любимый бандлер/таксранер и плагины к нему по вкусу. В вашем случае gulp хватит с головой. О том как с этим делом управляться куча статей.

Возможно тебе надо что то типо этого, но понятие красиво очень субъективно. Если у тебя есть чувство прекрасного и ты делаешь сайт, то зачем тебе фотошоп? Он нужен(как правило) дизайнеру.

Если див вставлен в некий другой файл, который подключается в страницу

Что вы имеете в виду?
Если под подключением имеется в виду Iframe то на документ в iframe не действуют стили основной страницы. Что бы стили работали надо подключить их на страницу которую вы загружаете в Iframe.

PS. скриншоты не несут полезной информации

Ты об этом?

Дивы там не нужны, для начала формочке в стилях добавте display: flex; а дальше уже там по падингам выравнивайте.

Чем гитхабовский вариант не угодил?


PS: зачем в теги нагадил? все теги кроме git не имеют к делу отношения.

Что бы сборка не тормозила, нужно использовать Gulp
И отговорки типа "нет времени" не принимаются, ты его гораздо больше тратишь если не осваиваешь самые эффективные инструменты.

Не являюсь специалистом высокого класса в данном вопросе, но склонен доверять мнению людей с большим опытом в области и работающих над большими проектами со сложной структурой и они говорят что БЭМ полезен, но вот научиться использовать его правильно сложно, поэтому и появляются хэйтеры(неосиляторы).