0

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?

Community
  • 1
  • 1
JNat
  • 1,456
  • 4
  • 34
  • 37
  • Your update doesn't make sense. Why on earth would you use javascript to write directly into the css file or html inline style code? – Starscream1984 Apr 12 '14 at 12:19
  • @Starscream1984 If you use JS to hide or show a submenu, for instance, isn't that modifying the style code directly? Either inline or on an external CSS? Or am I seeing this wrong? – JNat Apr 12 '14 at 12:21
  • if you use javascript DOM manipulation to hide, change colour, *whatever* to an element that is fine - it doesn't write the change to your html or css code and doesn't persist if the page is refreshed. – Starscream1984 Apr 12 '14 at 12:23
  • Ok, but what I mean is: is it better to read these properties I'll change (albeit temporarily) from an external CSS file, or from inline declared styles? – JNat Apr 12 '14 at 12:31
  • 1
    For that express purpose, there is no difference. However there are other benefits to having your styles external that I have outlined in my answer – Starscream1984 Apr 12 '14 at 12:34
  • I see. Thanks for the help. I won't accept your answer yet, to see if some more appear. – JNat Apr 12 '14 at 12:36
  • 1
    I'll edit mine to be a more direct reflection of the intent of your question – Starscream1984 Apr 12 '14 at 12:36

2 Answers2

1

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.

Amit Joki
  • 58,320
  • 7
  • 77
  • 95
1

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.

Starscream1984
  • 3,072
  • 1
  • 19
  • 27