我计划建立一个数据库表来存储表单的css值。形式是动态的，这意味着人们不能说它在组成中包含什么样的元素。
例如，表单可以包含文本输入框、单选按钮、下拉框的组合。以下是我的问题：如果我需要为这种表单存储css值，我如何构建我的表。（css属性及其值也将在表单生成时分配）
根据我的计划，表格可能是这样的：
考虑两个表：classes, Styles
Classes表包含以下列：id, class_name
样式表包含以下列：id, class_id(foreign key), css_property, css_values
如果我为每个表单元素分配class，那么我可以使用上面的表来存储css值。但这是解决此类问题的正确方法吗？如果没有，还有比这更好的解决方案吗？
5条答案
按热度按时间jhdbpxl91#
你不应该在数据库中存储CSS值。你只是为自己创造了更多的工作，并放慢了这个过程。您应该做的是将类添加到表单字段中，并在external stylesheet中编写与每个类对应的样式。
z5btuh9x2#
这听起来像是在构建一个允许用户为表单元素分配样式的表单编辑器，并且希望能够将这些更改保存在数据库中。如果是这样的话，您可能已经有一个像
form_elements这样的表和一个像forms这样的表--我只添加两个文本列：form_elements.extra_html_attrs和forms.extra_html。这将允许您将任意属性附加到每个元素（例如extra_html_attrs=class="fancy-element" style="width:100px"），并在表单中包含任意html（例如extra_html=<style>.fancy-element{border:blue}</style>）。在单独的数据库表中对CSS相关属性进行建模会增加复杂性，而且在这种情况下不会给您带来任何好处。okxuctiv3#
我认为你可以动态地生成表单字段并指定字段ID和唯一的表单ID，如果你想指定css样式，如位置，颜色，大小等，你可以为每个字段指定所有这些属性和值，如#FormId #FieldID {properties：values;}并存储在数据库中唯一的文本字段中。
表格
：）
eiee3dmh4#
我会创建一个javascript类并使用jQuery。每个查询都将使用addClass设置正确的类。你正在添加的类将在javascript类中动态创建。
zlhcx6iw5#
时代变了
CSS-in-JS解决方案将CSS格式化为JSON，因此可以相当容易地存储在数据库中。虽然我不会在DB中存储完整的样式定义，但我认为以这种方式存储设计标记是有意义的。然后，可以通过CMS编辑令牌值，从而消除了工程师对设计系统执行简单更改的需要。
或者，设计令牌值可以直接从Figma导出，以便在每次构建之后立即反映对应用主题的更改，而无需进一步的开发人员干预。
对于单个小型应用程序来说，这可能是过度设计的，但如果您正在设计前端架构以使用单个共享组件库支持多个应用程序，这可能是一个很好的解决方案。
查看Styled Components API、Design Tokens Plugin for Figma和Amazon Style Dictionary。