I'm building an advanced, full-page WYSIWYG tool using Vue. For this, I need to dynamically render a CSS stylesheet based on JSON blobs that contain CSS properties into the <head> of a page.
What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn't allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.
Current solution
I currently have a regular Vue component, in which I use a reducer to transform the JavaScript into a CSS string, which is rendered inside a <style> tag.
However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.
Desired solution
A solution that would render my CSS rules without relying on a single Vue component, so that it's picked up by Vue's Virtual DOM and benefits from its performance.
Now that I'm writing this, I think it might be a solution to render a Vue component for every single CSS class, but I'm not sure if that would work. I'm curious to hear other perspectives to this problem.
Related
Currently trying to remove bootstrap CSS as a dependency from a large monorepo.
Specifically, we are using react-bootstrap which requires a default stylesheet imported into a page.
I have successfully removed all custom components and those with logic but there are multiple global styles that break when removing the imported css.
Is there a way to find out all the things that have changed before/after it's removed? Doing it manually is going to be a grueling task. Any suggestions are appreciated.
ALSO: we are utilizing CSS Modules to ensure global styles aren't getting out of hand. It adds another difficulty to this issue. Where would I even put the changed styles if I do find them?
I am currently using an HTML template and am trying to return those as react components, however when I run the HTML code natively the page looks like this.
However, running the same code being returned by a react component, it is almost as if the components are only taking up half the page. Some of the elements such as the text of the name and collar have been changed but I haven't touched any of the DOM elements so I don't know why the proportions are not correctly outputted. Any advice on how I can combat this issue?
Here are some suggestions:
Check your css.
You have some styling overrides on your react side. Those styles are overriding the ones defined on the html template that you are trying to render. Look for any styling your react app is doing on list items.
Its not exactly a good idea, returning a whole html template from the react component. Since we don't know your use-case, can't give any advice on this.
Try a react component library, if you want to create a similar page using pure react components. Will be a more sensible approach.
I just started with React and have a simple question I couldn't find anywhere.
So, should every React component have it's own stylesheet?
For example if I have my main App component which I render to the browser should I just include a css file there and have all my styles in that or is it bettet to have an own css file for every component?
Thanks.
CSS best practices in React are still heavily debated. There are pros and cons to each variation.
What you are probably looking for is modularity in your CSS. While having unique style sheets for your components does accomplish this to some degree I suggest taking a look at CSS modules. Packages like this can keep your CSS contained to a specific component so you don't over-write styles on other components.
Personally, I've done a little bit of both. I use a base style sheet (bootstrap for example). Then I use CSS-modules to help me make components that are unique that I might want to easily port over to other projects.
I'm working on an app where each user can define custom colors for its dashboard. Like textColor, accentColor and backgroundColor;
The entire UI will use those colors.
I know how to set a css property dynamic but doesn't seem correct to do it every single element.
I was wondering if I can create a dynamic css and inject it into the app. (is it too much workaround?)
I managed to make it work by using a server-side generated theme.css (something like /users/1.css). Can you smell it?
What's the proper way to do it?
We've developed an application that had to be white label, so we've created directives for the editable items and the directives listened to the service that handled the layout package from server, overwriting if needed the property. In your case you could choose to have only textColor, accentColor and backgroundColor directives instead of each layout component have your own layout directive.
I'm currently looking for a way to actually receive an entire scss from server that would overwrite the variables inside Sass, but I could not find any approach yet.
I would also share this article, that could be helpful:
https://engineering.thetrainline.com/how-we-implemented-a-single-page-application-using-react-3f22e4d545c4
What are the benefits of changing particular bits of style inline in the HTML or changing it from an external stylesheet using Javascript?
For instance, this post explains how one can accomplish changing styles from an external stylesheet. However, the process seems to be much more complicated than changing it inline, and it also refers there may be cross-browser problems. However, the post may be outdated (it is 3 years old, and one of the comments says even then it was 4 years old). Is there another more recent way of doing this?
I ask this because I try to keep my HTML and CSS completely separate.
However, is it maybe simpler, in terms of legibility and performance of the code, to simply specify the styles I want to change inline rather than on an external stylesheet?
Are there any best practices in regard to this matter?
When temporarily accessing or modifying an element's style using Javascript, there is no difference involved in whether that style was defined inline or in css - you will get the style that is applied by precedence and Javascript changes will override any declared style.
However, general best practice is to have a separate stylesheet (or maybe several if you intend to have conditional stylesheets for IE9 and below, or to split up lots of styles into manageable chunks)
This method is less complicated when it comes to debugging and changing styles in real time.
With external stylesheets you can change the entire site in seconds by dropping a new .css file in place. You can't do that with inline styles.
There are no benefits from inline-css except that it will be given more importance.
External css have the benefits of being cached.
However while rendering the below is the order followed.
Inline CSS styles are given more importance than to styles declaredd in <style></style> and styles declared in <style> is given more importance than to styles declared in external css. files.
Inline-css and even <style> is not preferred and is generally bad practice as extra bytes are transmitted over HTTP and they cannot be cached as external css files can be.
Styling using javascript should be just up to adding a class or removing a class or hiding and showing them, to improve the user experience.