VS2010 and CSS: What is the best strategy to individually position form controls

Question

OK, I have a ton of controls on my page that I need to individually place. I need to set a margin here, a padding there, etc. None of these particular styles that I want to apply will be applied to more than control. What is the bets practice for determining at which level the style is placed, etc?

OK, my choices are

1) External CSS file

1A) Using ClientIdMode = Auto (the default)

I could assign a unique CssClass value to the ASP.NET control and, in the external CSS file, create a class selector that would only be applied to that one control.

1B) User Client ID = Predicatable

In the external CSS file, I could determine what the ID will be for the controls of interest and create an ID selector (#ControlID{Style} ). However, I fear maintenance issues due to including/removing parent containers that would cause the ID to change.

1C) User Client ID = Static.

I could choose static IDs for the controls such that I minimize the likelihood of a clash with auto generated IDs (perhaps by prefixing the ID with "StaticID_" and use an external stylesheet with ID selectors.

2) I could place the style right on the control. The only disadvantage here, as I see it, is that style info is brought down each time instead of being cached , which is what I'd get using an external CSS. If a style isn't resused, I personally don't see much benefit to placing it in an external file, though please explain why if you disagree. Is there moire of a reason that "It's nice to have all the CSS in one place?"

Answer 1

Definitely use an external CSS file.

Options 1 A-C are really a personal preference. I would go with ClientIDMode="Static" as it gives you the most control over the Ids and it will simplify accessing the elements with Javascript (if needed). I've always hated the ugly generated Ids in the earlier versions of ASP.NET. Using a unique CSS class for each element kinda defeats the purpose of a class, which is intended for use on multiple elements.

Just to confirm your thoughts of option 2, this is not the best approach. Putting your styles in an external CSS file will result in the file being downloaded once and cached, rather than having inline styles bloat your HTML that is sent to the client each time.