When dynamically creating HTML elements with Javascript is it better to have the CSS predefined in a file, or dynamically assigned?

Question

Is it better from performance standpoint / a more efficient use of memory to have the CSS be created with the dynamically generated HTML elements, or to have the classes predefined in a CSS file waiting to be used?

I could imagine that having CSS sitting waiting to be used could make the CSS file unnecessarily big, whereas using JS to create the CSS could be a less efficient use of memory and processing power.

Would love to hear others' thoughts on it.

Even large CSS file have the advantage of being cached in the browser. CSS in the page has to be loaded again and again. There is usually no need for megabytes of CSS - can you share code how much that would be? — Peter Pointer
– Peter Pointer, Commented Mar 4, 2022 at 9:00
I havent yet written the code :D but it wouldnt be too much, like pretty much just display:flex; and justify-content:space-around; type of css. Im just thinking would it be better to have it wait in the css file to be used, or dynamically generated along with the html — BoogaBooga
– BoogaBooga, Commented Mar 4, 2022 at 9:06
You will not have a completely new style for every div. Your examples were static styles - using a class for that style is certainly a better use of ressources. — Peter Pointer
– Peter Pointer, Commented Mar 4, 2022 at 9:11
yeah thats true all these elements will have the same styling, — BoogaBooga
– BoogaBooga, Commented Mar 4, 2022 at 9:12

Salma EL HAJRAOUI · Accepted Answer · 2022-03-04 09:14:10Z

2

I vote for using css classes in separate file :

To separate the display from the processing or the traitement
To be able to manage any changes in the future
Having the possibility to make your CSS dynamic with CSS Custom Properties
Possibility to use css Modules
Take all css advantage

answered Mar 4, 2022 at 9:14

Salma EL HAJRAOUI

1961 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

willm127 · Accepted Answer · 2022-03-04 08:59:19Z

1

Personally, I prefer having things separate, since it's easier to find/read/update later one. Having a bunch of CSS styles mixed in with JS could make it hard to read and maintain in the long run.

I also wouldn't worry about optimization until you feel that your code is taking a while to load.

answered Mar 4, 2022 at 8:59

willm127

394 bronze badges

2 Comments

BoogaBooga Over a year ago

Ok yeah that makes sense, keep the the best practices

nare214 Over a year ago

I agree with you, I would add that you can also let multiple sites of your website be using the same CSS (e. g. for styling the navbar) and later, you just have to update the one CSS file and not every site if you want to edit the CSS.

Nihar Ranjan Das · Accepted Answer · 2022-03-04 09:03:04Z

0

Defined in a css file, is a good practice. If you need to update the css after generating html, Then it will be a good to define in css classes.

answered Mar 4, 2022 at 9:03

Nihar Ranjan Das

371 silver badge11 bronze badges

1 Comment

BoogaBooga Over a year ago

Ok, fair enough, keep it standard

Collectives™ on Stack Overflow

When dynamically creating HTML elements with Javascript is it better to have the CSS predefined in a file, or dynamically assigned?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related