External CSS vs inline style performance difference?

by

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it’s easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

More Related Contents:

  1. What’s so bad about in-line CSS?
  2. How to identify unused CSS definitions from multiple CSS files in a project
  3. React.js inline style best practices [closed]
  4. Actual table Vs. Div table
  5. Is !important bad for performance?
  6. What’s the difference between inline styles vs classes?
  7. CSS shorthand vs longhand?
  8. Why does enabling hardware-acceleration in CSS3 slow down performance?
  9. How to use JSF generated HTML element ID with colon “:” in CSS selectors?
  10. What does an asterisk (*) do in a CSS selector?
  11. What is the default padding and/or margin for a p element (reset css)?
  12. Which CSS properties create a stacking context?
  13. Is it possible to include one CSS file in another?
  14. How to display list items as columns?
  15. How do I right align div elements?
  16. Should I use ‘border: none’ or ‘border: 0’?
  17. How to make round corners to both inside of a box and its border?
  18. How does one target IE7 and IE8 with valid CSS?
  19. Background Image for Select (dropdown) does not work in Chrome
  20. How to change btn color in Bootstrap
  21. How to Include CSS style when converting svg to png
  22. SASS – use variables across multiple files
  23. Make floating child visible outside an overflow:hidden parent
  24. How do I select an element only when inside another element?
  25. How to make div background color transparent in CSS
  26. How do I apply a style to all children of an element
  27. Using Font Awesome icon for bullet points, with a single list item element
  28. CSS3 transitions on pseudo-elements (:after, :before) not working?
  29. Center a column using Twitter Bootstrap
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment