嘿，有人知道允许用户保存自定义 CSS 的最佳方式是什么吗？具体来说，我希望允许用户选择大约 4 种颜色值，这些颜色将用于为用户创建自定义主题。我正在考虑将值保存在数据库中，然后使用 dom:loaded 和原型来设置自定义样式值，但我想知道是否有更快的方法？比如动态创建css文件什么的？
【问题讨论】：
标签： css
我认为最好的方法是将其保存到 Db，因为您不想让用户弄乱您的网站。至少如果某些页面是公开的。
而且我个人认为“不使用 JavaScript”之类的答案只不过是老派 BS……他们今天是否尝试过放弃 JavaScript？我不这么认为...通过本段，我并不是说您必须使用 JavaScript 来完成。以适合您需求的方式进行操作?
祝你有美好的一天
【讨论】：
然后使用 dom:loaded 原型
哎呀，不要那样做！当 JavaScript 关闭时，这将不起作用。
方法一：静态样式表，文档头部动态值
为了不必使用动态创建的样式表，请使用一个单独的静态 CSS 文件，其中包含所有不会更改的定义。
<link rel="stylesheet" href="styles/static.css" type="text/css">
<!-- Or whatever you name it -->
将更改的所有定义，您可以放入 HTML 文档的 head，从数据库中获取用户可更改的值。
<style type="text/css">
.classname { font-size: (fontsize); } <-- Insert dynamic value here
.classname { color: (color); } <-- Insert dynamic value here
....
<style>
这样，大部分 CSS 保留在静态的、可缓存的文件中，而动态部分不会引起另一个 HTTP 请求。
方法 2：动态样式表
如果您有很多动态变化的值，请将整个样式表放入脚本文件并输出，用数据库中的值替换占位符。
这样做的缺点是，要强制浏览器在更改时重新加载样式表，您必须使用版本方法stylesheet.css?version=400，这非常复杂，但有时比乱扔head 更可取带有 CSS 的部分。
您决定哪种方法更适合您的情况。我发现自己最常选择第一个。
【讨论】：
创建自定义 css 文件会添加浏览器必须发出的另一个请求，因此您需要确保正确设置标题以缓存它。如果用户确实更改他们的设置，您需要做一些事情来确保浏览器立即停止兑现旧的 css 文件并加载新文件。一种方法是更改 css 文件的 url。
例子：
/usercustom.css?version=(last saved date hash)
改为我会使用您的第一种方法并创建一个 JSON 数组，您将其注入到页面中，然后您使用您的 javascript 框架来加载并使用该数组来设置页面样式。
您还可以将颜色值存储在来自服务器的 cookie 中，并在客户端上使用和/或写入它们。
【讨论】：
我会将这 4 个值保存在数据库中，然后从这些值创建一个 css 文件。您需要确保并缓存为每个用户创建的 css 文件，这样您就不必在每个页面视图中动态创建它。
【讨论】：