Сергей Горячев

Страница-заглушка у Вас должна лежать здесь:
/usr/local/mgr5/etc/www.skel/index.html

mixin portfolio_item(n)
  .portfolio-main-prev__item(style="background-image: url('static/img/content/portfolio/port1/port-#{n}.jpg')")

each i in [1,2,3,4,5,6,7,8,9,10,11,12]
  +portfolio_item(i)

each val in [1,2,3,4,5,6,7,8,9,10,11,12]
	.portfolio-main-prev__item(style=`background-image: url('static/img/content/portfolio/port1/port-${val}.jpg')`)

$browser-context: 16; // Default

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

Ну вот базовая схема.

$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}

Функцию можно заменить на миксин, как удобнее. С миксином проще пиксельный фоллбэк сделать (актуально только IE8).

Можно миксины из vertical-rhytm заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.

БЭМ

>не вижу недостатков.
Бесконечная простыня html вас не смущает?

Какие-то сложные транзишны и анимации в одну строку не сделать - уже нарушение css простоты вроде бы.

tachyons открыл доку. Названия классов адище.
Если б я на такое наткнулся был бы в шоке.
Сможете без доки угадать как оформлен элемент?
fw1 dib ttc lh-solid

https://jsfiddle.net/Politonius/tn6qptvm/

Это пробел между инлайновыми элементами.
«Загадочные отступы» между инлайн-элементами
Fighting the Space Between Inline Block Elements

Типа фтп, все по сети.
Места на диске использует немного под кэш.

https://clipboardjs.com/

после var status = $.cookie('blockColor'); вставьте
status && $(".block").addClass(status);

А зачем куку дергать и потом тягать ее туда сюда. Я бы так сделал:

$(".special__link--imgoff").click(function(e){
    $("*:not(.sp_ignored) img").addClass('imgoff');
localStorage.setItem("class", "imgoff");
    e.preventDefault();
});

https://www.w3schools.com/html/html5_webstorage.asp