我計劃建立一個數據庫表來存儲表單的css值。形式是動態的,這意味著人們不能說它在構成中包含了什么樣的元素。
例如,表單可能包含文本輸入框、單選按鈕和下拉框的組合。我的問題是:如果我需要為這種表單存儲css值,我該如何構建我的表。(css屬性及其值也將在表單生成時分配)
就我的計劃而言,這些表格可能是這樣的:
考慮兩個表:類、樣式
Classes表包含id、class_name等列
Styles表有如下列:id,class_id(外鍵),css_property,css_values
如果我為每個表單元素分配class,那么我可以使用上面的表來存儲css值。但這是解決這類問題的直接方法嗎?如果沒有,有沒有比這個更好的解決方案?
您不應該將CSS值存儲在數據庫中。你只是在給自己創造更多的工作,并減慢這個過程。您應該做的是將類添加到表單字段中,并在外部樣式表中編寫對應于每個類的樣式。
聽起來好像您正在構建一個允許用戶為表單元素分配樣式的表單編輯器,并且您希望能夠將這些更改保存在數據庫中。如果是這樣,您可能已經有了一個類似form_elements的表和一個類似forms的表——我只是添加了兩個文本列:form_elements.extra_html_attrs和forms.e xtra_html。這將允許您為每個元素附加任意屬性(例如extra _ html _ attrs = class = " fancy-element " style = " width:100px "),并在表單中包含任意html(例如extra _ html = & ltstyle & gt。花式元素{ border:blue } & lt;/style & gt;).在單獨的數據庫表中建模CSS相關的屬性增加了復雜性,而且在這種情況下沒有任何好處。
我認為你可以動態地生成表單字段,并指定字段Id和唯一的表單Id,如果你想指定css樣式,如位置、顏色、大小等,你可以為每個字段指定所有這些屬性和值,如# FormId # Field Id { properties:values;}并存儲在數據庫中一個唯一的文本字段中。
表單的表格
FormId | Html | Styles | "the rest of the interested form properties"
:)
我會創建一個javascript類并使用JQuery。每個查詢將使用addClass獲得正確的類。您添加的類將在javascript類中動態創建。
時代變了。
JS中的CSS解決方案將CSS格式化為JSON,因此可以很容易地存儲在數據庫中。雖然我不會將完整的樣式定義存儲在數據庫中,但我認為以這種方式存儲設計標記是有意義的。然后,可以通過CMS編輯令牌值,無需工程人員對設計系統進行簡單更改。
或者,可以從Figma中直接導出設計令牌值,以便在每次構建后立即反映對應用程序主題的更改,而無需開發人員的進一步干預。
對于單個小型應用程序來說,這可能是過度設計的,但是如果您正在設計前端架構來使用單個共享組件庫支持多個應用程序,這可能是一個好的解決方案。
查看Styled Components API、Figma的設計令牌插件和Amazon Style Dictionary。