Preferred method for linking to stylesheets from a UserControl?

Question

We primarily use an ASP.NET environment at work. Right now I'm building an application which uses "Modules", which is just a UserControl, with its' Javascript right in the control, and a link element to the stylesheet for that control. I want to keep it modular, and would like the style of this control to be independent from the markup/javascript.

So I'm wondering what the preferred method of doing this is? Obviously if I didn't want the "theme" functionality I'm after, I could just use style tags at the top of the control. Right now I have a link element, as I said, and this isn't proper I don't think.

Does anyone have any preferred methods, and if so, what and why?

Answer 1

It depends on how big your app is, and whether or not it's dependent on Themes elsewhere, IMHO.

If you're using a .skin file, or if the majority of the app is also plugged into the theme, you might as well go with the theme.

But if it's just a few styles you need, you're better off to set the stylesheet manually, keep your css file external (inline styles are a PITA and defeat one of the core purposes of css).

In either case, don't forget to set the CssClass attribute on your controls.

Answer 2

I think what you're supposed to do is use Page.RegisterScriptBlock to register your script blocks. Best-case you shouldn't have them inline in your ascx inside script blocks. This isn't always possible, but theoretically it's the best way.

Ideally your styles should be separate from your markup as well. Your controls can have classes and IDs, but your style is based on your application and not your controls. Controls can theoretically be used in other applications where you might want a different style.

Answer 3

Right, the idea for this is to have a "theme", which is really just a CSS file and a jQuery template. I have them named the same, and have a Theme property on the usercontrol to set it.

When these controls are finalized, I might refactor the javascript to a RegisterScriptBlock on the code-behind, but for now they just in script tags on the control itself.

What prompted this question was DebugBar for IE, giving me warnings that link elements are not allowed inside a div. I don't much care, but after thinking about it, I had no idea how to link to the css file without doing that. I considered very briefly having an 'empty' link tag on the master and then setting THAT in the code behind on Page_Load of the UserControl, but that just seems like ass.

I could use @import I guess but I think link tags are preferred, correct?

Answer 4

It sounds like you're rolling your own theme engine... why not use ASP.NET Themes?

If you're determined to do it yourself, here's some code from the CssFriendly project that may be of interest to you. (I think it should be ok to post the code as long as I cite where it's from.) The .css files are flagged as Embedded Resource and the code below is used to include them as needed.

string filePath = page.ClientScript.GetWebResourceUrl(type, css);

// if filePath is not empty, embedded CSS exists -- register it
if (!String.IsNullOrEmpty(filePath))
{
    if (!Helpers.HeadContainsLinkHref(page, filePath))
    {
     HtmlLink link = new HtmlLink();
     link.Href = page.ResolveUrl(filePath);
     link.Attributes["type"] = "text/css";
     link.Attributes["rel"] = "stylesheet";
     page.Header.Controls.Add(link);
    }
}

Answer 5

To be proper I would have an import.css file - structure the naming of the classes to follow your controls, and import the styles within the header of the document.

If you have a module called "30DayPricingCalc" then you could name the classes/id's:

30DayPricingCalc.css

.30daypricingcalc_main_content
{
  ...
}

Also if you haven't I would setup a list of generic reusable styles to save you room. Since elements will allow multiple classes per object.

Also, link tags matter a lot less now than they used to. we're well past support for IE5 generation browsers and IE6 supports the @import tag.

Cheers!

Answer 6

I considered ASP.NET themes briefly, but the idea of these controls are a little different, I think.

It's basically a shopping cart system. I don't want to get into it all, but we are using a really neat security system, and we don't want to use a premade shopping cart. I'm developing a set of controls that can be dropped on a page, for instance in SiteFinity (which is the CMS system we use) or for any other project we might have. Normally I would compile these into a DLL so we get ACTUAL controls we can drag & drop from the toolbox, then I could use internal "generic" styling and allow for any additive styling someone might want, as well as supplying a few fancier styles as well.

This is the first time I've ever done this, or really the first time anyone in our shop has done this either so I'm kind of figuring it out as I go. I might be pretty far off-base, but hopefully I'm not.