Is changing CSS styles through Javascript without the use of class bad practice? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

Want to improve this question? Because this question may lead to opinionated discussion, debate, and answers, it has been closed. You may edit the question if you feel you can improve it so that it requires answers that include facts and citations or a detailed explanation of the proposed solution. If edited, the question will be reviewed and might be reopened.

Closed 6 years ago.

Improve this question

$('.desktop_search').css({
    visibility: 'visible',
    width: '100%',
    opacity: '1'
});

For instance, I'm changing the element with class desktop_search using JS above. Will it be better to provide all those CSS in my CSS Stylesheet first and just do toggleClass(new_class_name) or is it the same if I did the above? I'm asking because I've changed quite a lot of CSS styles using JS and I'm worried that it might have an impact to my performance. Most of the JS I use is to change CSS when a particular element is clicked or when the page is scrolled, etc.

EDIT:

More details. For example, I'd like an element this_element_will_expand to expand from width: 0 to width: 100% when I click on trigger_a_element which is a. Therefore, I will use this JS:

$('.trigger_a_element').click(function() {
    if ($('.this_element_will_expand').css('width') == 0)
        $('.this_element_will_expand').css('width', '100%');

    else
        $('.this_element_will_expand').css('width', '');
});

For that specific example, it is better to use toggleClass. Use CSS for styling as much as you can. U will be aware of, when you will have to do something with Javascript. Don't worry about the performance, in this case, setting styles with javascript will only affect the performance if you did this like 10x per second, otherwise it is completely OK. — Darko Riđić
– Darko Riđić, Commented Jan 25, 2019 at 7:33
@Kaiido I'm only changing some styles that have already been provided by my CSS class. Most of the changes happen when I do some scrolling, or clicking an element that is not a button (like clicking on a) etc. I'm really just changing the styles from width x to width y to mimic animation using JS. — Richard
– Richard, Commented Jan 25, 2019 at 7:35
@Kaiido Hi, I've added an example to illustrate what I meant. — Richard
– Richard, Commented Jan 25, 2019 at 7:39

Blake Plumb · Accepted Answer · 2019-01-25 07:46:28Z

5

To answer the question of "performance" between using JavaScript to set inline styles versus having a style sheet has a couple points to consider.

Redraws: There is a very negligible difference between the two. One could actually argue that inline styles have actually a performance improvement over style sheet, but it is not something that should ever become a bottleneck in your app.

Page Refresh: The browser will cache the style sheet as well as the javascript. So they both should be performant on page load.

So I would argue that this is not a performance question as much as it is a maintainability question. Is it easier to have a css class that stores styles you are planning to use over and over again. I would argue yes. If you are setting an inline style that is very specific to one use case then I would argue that it would be easier to maintain the style inline in the javascript.

answered Jan 25, 2019 at 7:46

Blake Plumb

7,2593 gold badges39 silver badges56 bronze badges

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

2 Comments

Richard Over a year ago

I see. Thank you, this is answer that I needed. However, I think that you should be able to apply the same exact set of styles to multiple elements using the functions you built in JS, no?

Blake Plumb Over a year ago

Yes you could save the styles as objects and then reuse the objects across your application, but I believe the more common approach is to use a css class.

phunder · Accepted Answer · 2019-01-25 07:46:15Z

3

It has become good practice in recent years to avoid using JavaScript for styling as much as possible. Especially on mobile devices, CSS is typically hardware driven, whilst JavaScript can be taxing on the processor (which means CSS animations for instance runs faster and smoother).

Defining styles and using addClass / removeClass would be much better, and more extendable. If you want this to happen in more than one place for instance, and the exact styl changes at some point, you can update it in one CSS class instead of doing it multiple times in the JavaScript.

answered Jan 25, 2019 at 7:46

phunder

1,7254 gold badges20 silver badges41 bronze badges

1 Comment

Richard Over a year ago

For the second point, using JS functions can replace that feature too, though.

Silvio Biasiol · Accepted Answer · 2019-01-25 07:30:58Z

2

It would be certainly better to use addClass / removeClass since the javascript should not be in charge of manipulating the styles. Refer to this answer

answered Jan 25, 2019 at 7:30

Silvio Biasiol

9649 silver badges14 bronze badges

Comments

Wicak · Accepted Answer · 2019-01-25 07:30:43Z

0

I suggest to you to use tool base on what the purpose the tool. For example, use css for styling, use javascript for dynamic content, use html for structured web. You can use javascript to changing css if thats needed to dynamic content (don't always use javascript if not necesryly)

answered Jan 25, 2019 at 7:30

Wicak

4095 silver badges13 bronze badges

Collectives™ on Stack Overflow

Is changing CSS styles through Javascript without the use of class bad practice? [closed]

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Related