All geek questions in one place

An efficient way to store and retrieve custom CSS for personalized page visuals

I have a web application that should display pages whose CSS values ​​are set through a form. To be clear: not CSS parameters, just their values ​​are user-defined.

I use the framework (jquery mobile). My css file is about 700 lines (the sass file is a bit longer, but contains comments and variables for colors, fields, etc.). There are about a dozen variables which must be defined by the user (e.g., $pageBackgroundColor, $borderWidth, $spanColor), but each variable is used several times in sass file.

Say, now I have these dozens of variables stored in my database, and the user requests a page. How to provide the necessary CSS?

I could:

  • compiling a mini css file while submitting the form and link is when the page is requested (disadvantage: I will probably have several thousand CSS files sitting on my server).
  • compile the shortened css text string and upload it between the two tags <style>in <head>(flaw: ugliness, lack of caching and query processing time).

Are there any other options? I looked at one site that makes custom visual effects for each user, and they went to a separate CSS file for each person.

I use the Django + Postgres backend if it matters.

+4
2

, heredoc , , db. , , , .

0

, CSS, <head>. , , :

<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>
0

Source: https://habr.com/ru/post/1620169/

More articles:


All Articles