html – 为个性化页面视觉效果存储和返回自定义CSS的有效方法

我有一个Web应用程序需要显示CSS值通过表单设置的页面.要明确：不是CSS参数,只是它们的值是用户定义的.

我正在使用一个框架(jquery mobile).我的css文件大约有700行(sass文件有点长,但有很多颜色,边距等的注释和变量).用户可以定义大约十几个变量(例如$pageBackgroundColor,$borderWidth,$spanColor),但是每个变量在sass文件中多次使用.

假设我现在已经将这十几个变量安全地存储在我的数据库中,并且用户请求一个页面.我如何提供必要的CSS？

我可以：

>在表单提交和链接时编译缩小的css文件
当请求页面时(缺点：我的服务器上可能有几千个CSS文件)
>编译一个缩小的css文本字符串并将其转储到两个< style>之间. < head>中的标签(缺点：丑陋,没有缓存,请求处理时间增加)

还有其他选择吗？我查看了一个为每个用户执行自定义视觉效果的网站,他们为每个人提供了一个单独的CSS文件.

我正在使用Django Postgres后端,如果它是相关的.

解决方法

您可以在< head>中将使用这些变量的样式声明移动到内联CSS中.此外,您可以使用几种样式执行此操作,但它确实需要您向HTML添加更多类：

<style type="text/css">
    .user-background-color {
        background-color: #abc123;
     }
    .user-color {
        color: #abc123;
     }
    .user-border-color {
        border-color: #abc123;
     }
</style>

然后你的HTML获得了额外的类：

<div class="style-1 style-2 user-border-color"></div>