10

I'm working on a large project in asp.net. I like breaking it apart by user controls so I was wondering if it would be OK to load the css in the user control code instead of in master page header?

Chances are, some of those controls would be represented multiple times on a single page so there would be duplicate style tags, would the browsers reload them or just ignore in that case?

user81993
  • 6,167
  • 6
  • 32
  • 64

5 Answers5

6

So this is a good question, so I decided to test it out.

I made a page with single div with the class "test", and made two CSS files (1.css and 2.css). The first defined test to have a red background, the second a blue.

When including them as 

1.css
2.css
div

The div did as you'd expect and displayed as blue. But! When included as

1.css
2.css
div
1.css

The div became red.

So yes, the browser WILL re-evaluate the styles, even though it didn't launch another request for 1.css and just used the cached version.

Tested on Firefox Nightly 43.0a

pmccallum
  • 808
  • 7
  • 14
6

the browser will load twice the css file, but in the second time it will probably cached, so it will be much faster.

the issue is, loading the file is not the only overhead here, because the browser will also need to re parse the css file, and re iterate the DOM tree, to check if any of the nodes in it match the new selectors, and then to apply them.

you are probobly better of including the css file once, and you should also look into css bundling, and minification.

MoLow
  • 3,056
  • 2
  • 21
  • 41
4

Browser will try to load each stylesheet, of course if it has already been loaded and cached then it won't be downloaded again (but it will parse it).

I assume you don't want to put it in your master page because you have several components and each one has its own stylesheet (then you don't want to download all of them when using just few components).

Performance impact should be pretty small (both in parsing and applying same stylesheet again) but if you do one of these:

  • You do patch CSS classes in multiple stylesheets (because patches by other CSSes will be overwritten);
  • You do some trickery with your stylesheets (for example $("#linkId").attr("href", "/example.com/override.css"););
  • You change them programmatially;
  • You're relying on client side LESS parsing (with type="text/less").

Then you may want to avoid a replacement (see also jQuery: add dom element if it does not exist):

<script type="text/javascript">
    if ($("link[href='/example.com/component.css']").length == 0)
        $("<link href='/example.com/component.css' rel='stylesheet'/>").appendTo("head");
</script>

In alternative you may use id (instead of check with href). Note that if you do it often then you may write an helper function.

Community
  • 1
  • 1
Adriano Repetti
  • 65,416
  • 20
  • 137
  • 208
1

If you embed same stylesheet multiple times then it would load all stylesheet one by one but only if caching is off. When the caching is on then all stylesheet would be loaded from the cache meaning then you don't need to worry about of reloading resources.

But why you want to include the same stylesheet multiple times?

Use it in your master page instead.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
1

There is a few things you could do. Add a class to the main body when you change type.

class="user-one"
class="user-two"

This will let you write custom code for each user type.

You could also add a MD5 check to the CSS file instead as that would force it to download the new CSS.

Darren Willows
  • 2,053
  • 14
  • 21