title: Is changing CSS styles through Javascript without the use of class bad practice?
body: <pre><code>$('.desktop_search').css({
      visibility: 'visible',
      width: '100%',
      opacity: '1'
  });
  </code></pre>
  
  <p>For instance, I'm changing the element with class <code>desktop_search</code> using JS above. Will it be better to provide all those CSS in my CSS Stylesheet first and just do <code>toggleClass(new_class_name)</code> 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.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>More details. For example, I'd like an element <code>this_element_will_expand</code> to expand from <code>width: 0</code> to <code>width: 100%</code> when I click on <code>trigger_a_element</code> which is <code>a</code>. Therefore, I will use this JS:</p>
  
  <pre><code>$('.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', '');
  });
  </code></pre>