[laimas]

На каждой странице вам нужно определить значения для css, которые надо продемонстрировать. Этого достаточно, все остальное возьмет на себя подключаемый js-файл, который единый для всех страниц. Но тут встает вопрос - достаточно ли определить наборы изменяемых значений как массив? Если стили, которые будут описаны на ваших страницах для этого требуют только одно css правило, то да. А если для этого потребуется более одного правила?

Лучше определять правила как массив объектов, в котором указаны правила и их изменяемые значения, в примере это rules. Здесь нужно только соблюдать соглашение - количество изменяемых значений у каждого правила должно быть одинаково (хотя и этот вопрос решаем, но пока это не рассматривается). В примере после запуска, просмотра, удалите комментарий объекта описывающего правило box-shadow, будут работать два правила.

Подключаемый js-файл js.js работает с определенными в объекте rules css правилами и их значениями, которые применяет к объекту демонстратору #visualizer и отображает их в объекте #informer

var i = 0, //кольцевой счетчик демонстраций
    k = rules[0].values.length, //определили количество демонстраций
    visual = document.getElementById('visualizer'), //объект демонстратор
    info = document.getElementById('informer'); //объект информатор
    
//показываем первую демонстрацию
getRules();

//устанавливаем обработчик смены демонстраций
visual.addEventListener('click', function() {
   //увеличили счетчик демонстраций, если он выйдет за пределы, то установим его в начало 
   i = ++i % k;
   //показать следующую демонстрацию
   getRules();
});

//функция применения и отображения текущих стилей  
function getRules() {
    //получим все правила и значения текущей демонстрации 
    var a = rules.map(function(e) {
        //формируем и возвращаем в массив правило и его значения
        return e.name + ': ' + e.values[i]; 
    });
    //применим правила к объекту демонстратору
    visual.style.cssText = a.join(';');
    //покажем правила в объекте информаторе
    info.innerHTML = a.join(';<br>');     
}