Как верстать руководствуясь одновременно «pixel perfect» и «mobile first» подходами?

Никак.
pixel perfect - миф.
Он не достижим в принципе, из-за особенностей рендера текста различными браузерами на разных осях.

Начал верстать на bootstrap

Он нужен для макетирования, не для нормальной верстки.

Mobile First у вас в принципе нет. Почитайте про наследование в CSS.

Бывает сложно верстать mobile-first, потому что нету дизайна того самого mobile, или вообще не знаешь что нужно будет делать адаптив...
Я в таком случае уже в готовой десктопной верстке "чищу" все от разметки для десктопа, заворачиваю отступы и размеры где указаны в min-width: (~ширина макета) и начинаю размечать все для 0+, выставляя ширину в браузере 320. потом для ~ 600+ (больших телефонов и планшетов) - тут зачастую нужно совсем немного правок. И вообще не выношу никуда стили в отдельные файлы, все в одном классе, то есть

.my-class {
	color: red;
	@media (min-width: 600px) {
		color: green;
	}
	@media (min-width: 1200px) {
		color: black;
	}
}

Так вам дублировать не придется, все будет в одном месте, в коде будут видны стили для всех разрешений.

С pixel-perfect особо не увлекайтесь, многие дизайнеры отступы расставляют как попало. Просто проверяйте чтобы примерно совпало.

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

Делайте pixel perfect только для тех версий макета, что вам представлены. Если представлены макеты и для мобильной, и для полноэкранной версии, придется попотеть, а если нет, то и заморачиваться не следует.