Comparison of loading CSS inline, embedded and from external files

by

It’s all about where in the pipeline you need the CSS as I see it.

1. inline css

Pros: Great for quick fixes/prototyping and simple tests without having to swap back and forth between the .css document and the actual HTML file.

Pros: Many email clients do NOT allow the use of external .css referencing because of possible spam/abuse. Embedding might help.

Cons: Fills up HTML space/takes bandwidth, not resuable accross pages – not even IFRAMES.

2. embedded css

Pros: Same as above regarding prototype, but easier to cut out of the final prototype and put into an external file when templates are done.

Cons: Some email clients do not allow styles in the [head] as the head-tags are removed by most webmail clients.

3. external css

Pros: Easy to maintain and reuse across websites with more than 1 page.

Pros: Cacheable = less bandwidth = faster page rendering after second page load

Pros: External files including .css can be hosted on CDN’s and thereby making less requests the the firewall/webserver hosting the HTML pages (if on different hosts).

Pros: Compilable, you could automatically remove all of the unused space from the final build, just as jQuery has a developer version and a compressed version = faster download = faster user experience + less bandwidth use = faster internet! (we like!!!)

Cons: Normally removed from HTML mails = messy HTML layout.

Cons: Makes an extra HTTP request per file = more resources used in the Firewalls/routers.

I hope you could use some of this?

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Fill remaining vertical space with CSS using display:flex
  3. How to prevent Less from trying to compile CSS calc() properties?
  4. Same font except its weight seems different on different browsers
  5. Is the CSS star selector considered harmful (and why)?
  6. Vertically align text within a div [duplicate]
  7. Is there a way to make a DIV unselectable?
  8. CSS native variables not working in media queries
  9. Is it possible to calculate the Viewport Width (vw) without scrollbar?
  10. CSS 3d transform doesn’t work if perspective is set in the end of property
  11. Every item to have the same width as the widest element [duplicate]
  12. Why doesn’t the CSS calc() function work for me?
  13. How is a CSS “display: table-column” supposed to work?
  14. Why isn’t CSS visibility working?
  15. Changing font colour in Textboxes in IE which are disabled
  16. What is class=”mb-0″ in Bootstrap 4?
  17. Is there a way to use two CSS3 box shadows on one element?
  18. How can a variable-height sticky footer be defined in pure CSS?
  19. Is there a ‘box-shadow-color’ property?
  20. Firefox ignores padding when using overflow:scroll
  21. Background images: how to fill whole div if image is small and vice versa
  22. calc() not working within media queries
  23. Combining :not() selectors in CSS
  24. Select an element with empty class attribute (class=””) using CSS?
  25. How do I target elements with an attribute that has any value in CSS?
  26. div background color, to change onhover
  27. Concatenate strings in Less
  28. How to give border to any element using css without adding border-width to the whole width of element?
  29. CSS selector based on width?
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment