Popular posts

This sounds like a perfect use-case for CSS Variables, if you can handle the browser support for them :)

In the case of your app, for each thing you wanted to possible expose as a user-settable value in your CSS, you could replace it with var(--variableName), where --variableName is a name you're inventing to store this information. Suppose we want to let users set a background image on the page, and an avatar image they they see. You could write some CSS like this:

.avatar {
  background: var(--user-avatar);
}
main {
  background: var(--user-bg);
}

Here the background is set using CSS variables. You'll want to initialize them with a default value, this can be done by including a rule like this somewhere in your CSS:

:root {
  --user-avatar: url(path/to/default/avatar.png);
  --user-bg: url(path/to/default/bg.jpg);
}

Now we should see the default avatar and background on our site. All we have to do to override this with a user preference is include the following in CSS, HTML, or JavaScipt:

CSS

:root {
  --user-avatar: url(path/to/user/avatar.png);
  --user-bg: url(path/to/user/bg.png);
}

HTML

<style>
  :root {
    --user-avatar: url(path/to/user/avatar.png);
    --user-bg: url(path/to/user/bg.png);
  }
</style>

JS

document.documentElement.style.setProperty('--user-avatar', 'url(path/to/user/avatar.png)')
document.documentElement.style.setProperty('--user-avatar', 'url(path/to/user/bg.png)')

You can use whichever language is most convenient for you to output, but as long as these variables are re-declared with the user's specific values after the default values are set, the CSS above will display the correct value in the right place :D

Hopefully this helps solve your problem or at least gives you a few new ideas about how to approach it!