Currently, I am in the process of developing a website that supports "plugins" as external "displays". These plugins consist of custom full-screen HTML content managed by a client-provided JavaScript driver. The website engine utilizes an API to allow these plugins to interact with other clients efficiently.
In order to organize different themes, they will be stored in external repositories with each theme having a .theme file containing a list of associated files. These files will be loaded and stored in IndexedDB for quicker local usage, along with CSS rules for client HTML customization.
The main challenge arises when clients need to access and modify CSS rules to adjust responsive layouts. Any changes to the primary layout's CSS result in reloading styles, causing the loss of all previous modifications made by JavaScript. Since clients are dynamically loaded, these changes can occur at any time.
To tackle this issue, there are two possible solutions:
Using CSS text modules - this option involves extending the primary CSS text after loading a new client by adding new content (innerHTML) and calling a cssreload function on all clients.
Employing multiple stylesheets and providing an API for clients to modify only their own stylesheet to prevent unnecessary reloading after injecting new clients.
Which option would offer better performance? Considering an average of 10-20 clients, is there perhaps another superior solution that has not been considered yet?
While multiple stylesheets may seem more lightweight without requiring JS reloading, the concern remains whether maintaining a high number of distinct stylesheets could cause a significant performance decline during site rendering compared to using a single, extensive stylesheet.