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

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ć, Jan 25 '19 at 07:33
Possible duplicate of [Can I use non existing CSS classes?](https://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes) — Adrian Pop, Jan 25 '19 at 07:34
@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, Jan 25 '19 at 07:35
@Kaiido Hi, I've added an example to illustrate what I meant. — Richard, Jan 25 '19 at 07:39

score 5 · Accepted Answer · answered Jan 25 '19 at 07:46

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.

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? — Richard, Jan 25 '19 at 07:52
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. — Blake Plumb, Jan 25 '19 at 07:54

score 3 · Answer 2 · answered Jan 25 '19 at 07:46

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.

For the second point, using JS functions can replace that feature too, though. — Richard, Jan 25 '19 at 07:50

score 2 · Answer 3 · answered Jan 25 '19 at 07:30

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 '19 at 07:30

Silvio Biasiol

856
8
14

score 0 · Answer 4 · answered Jan 25 '19 at 07:30

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)

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

4 Answers4