Сергей delphinpro

Термин неверный. Это не "каскадность", а "вложенность селекторов".
Каскад - это переопределение стилей. Когдав браузере определен стиль по умолчанию для тега, потом в файле вы определили стиль для класса присвоенного этому тегу, потом еще раз переопределили в теге style на странице и наконец последний каскад - в атрибуте style тега. Стили каскадно переопределяются.

Еще вопрос во времени, коллеги говорят что каскадность - быстрее, и нет смысла называть классы по бему.

Вложенность априори не может быть быстрее одиночного селектора. Так как селекторы обрабатываются справа налево. Возьмем селектор .parent.child
Сначала браузер найдет все селекторы .child на странице, потом среди них отфильтрует те, что вложены в .parent.
Очевидно, что это будет дольше, чем просто найти селектор .parent__child

https://jsfiddle.net/cdew73gL/
Ничего они не жирные.
Вы, определенно, что-то не договариваете.

gulp-uncss

менять непосредственно классы col-* не следует. Но дописать в разметку еще один класс и дать ему необходимые свойства - норм. т.е в принципе сделано нормально. Но адаптивность своим классам нужно будет сделать самому.

https://jsfiddle.net/7601rswk/

https://jsfiddle.net/DelphinPRO/xuhv9bu3/1/

Зачем такие извраты, когда можно просто поменять вложенность местами?

normalize
init (box-sizing для всех, font-size для html, и прочие общие свойства такого рода)
layout - базовые раскладки для сайта
grid-system
typography
forms
components (BEM-blocks)
helpers - примитивы вроде .text-center: {text-align:center}
override - свалка стилей, перекрывающих стандартные стили CMS, поменять которые напрямую либо лень, либо нет возможности, либо слишком геморрно.

Разумеется, на вкус и цвет все фломастеры разные, так что определите для себя сами структуру стилей.

Ну вот, как-то так
https://jsfiddle.net/DelphinPRO/3Lp67w6s/

Потому что ширина auto

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

https://jsfiddle.net/DelphinPRO/oonue910/

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

display:flex;
justify-content: space-between;

А проблема-то в чем?

$(function(){

  // initialization here...

});

хотя нет

вы же пишете $('.loop')
А где у вас на странице этот селектор?

$(function(){

  $('.owl-carousel').owlCarousel({
      center: true,
      items:2,
      loop:true,
      margin:10,
      responsive:{
          600:{
              items:4
          }
      }
  });

});

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

Кнопку разместить внутри окна.
Абсолютное позиционирование кнопки.
Она будет зафиксирована относительно окна.

div{
  .media-s({
    width: 100%;
    color: #000;
  });
}

так вроде в less

https://jsfiddle.net/mvuuwmw6/

эх, пока писал код, тут уже накидали вариантов.... :(

https://jsfiddle.net/DelphinPRO/py4gLqjy/