Tips for CSS and ASP.NET

As I’m sitting here tidying up some CSS in a new ASP.NET app, I thought I’d provide a couple tips that I’ve found to be helpful.

1. Try to avoid odd numbers when specifying width, height, top, and left. Why? It just simplifies the math a little. Silly? Sure. But when you’re trying to get everything just right, it’s tougher to recognize and fix some block that’s one pixel off than it is a block that’s two pixels off or some other even number.
2. To avoid the odd/even thing you might want to just consider doing everything in even 5’s: 5, 10 … 125, 130.
3. I’ve found a paradox that maybe everyone else already has learned to avoid: Consider a Div tag in an aspx page. You have to apply styles to it if your want the designer to somewhat approximate the final look of the finished product. But if you have CSS that is intended to firmly control the look and feel you have a problem. It seems the CSS does not override the styles applied in the aspx. That makes sense because as "cascading" style sheets go the final word on the style is the tag itself. Well, CSS isn’t applied to the designer, so how do you remedy this? At the moment the only thing I can think of is to have a pre-render event strip most of the styling info from the Div tags before rendering is applied by the CSS. That way there is nothing in the final page to override the CSS. What a pain. I’ll let you know if this works.
4. Look for redundant CSS details and strip them out. Style sheets cascade, so if you’re following the flow you’ll find the child components don’t need to duplicate the specs of the parents, and less code is easier to follow.
5. Try to use as much CSS as possible to get styling out of the aspx. This allows users to make small tweaks to positioning, colors, and other style factors without calling a programmer.
6. Even if you aren’t doing too much styling, give Div tags an ID attribute if they’re unique, and give them a Class attribute if there is more than one of them that should be consistent in the app.
7. Make use of Themes and Skins where possible. It keeps components looking consistent in the site and eliminates the need to nitpick on components in normal development.
8. I guess that leads to – do as much styling as possible when you’re done with core functionality. Components tend to come and go as you find the end-user wants something different, and paying meticulous attention to the way components look turns out to be a waste of time if the user doesn’t want them after all.
9. Styles not looking the way you want in the finished page? Remember that styles cascade, so there’s probably something in another style later, or maybe even in code that’s overriding what you think the style should be.
10. When working on styles, I have the aspx/html/xml code at the top of the VS editor, the style sheet in a horizontal tab group at the bottom of that page, then I have a web page open in another monitor. So I can change the code, change the style, and refresh the page to see the effect. That makes for some very fast changes.
11. If you have a scroll wheel on your mouse, scroll the page larger and smaller to see how it affects things. If it looks really bad then you may need to adjust styles to accommodate.
12. Rather than setting a nested group with a top and left of 2 pixels, or some similar setting that indents the child group into the parent, consider setting the left and top to 0 and then use margins or padding to fine-tune the positioning. This won’t always work depending on how you have colors, transparency, etc, but if you can do it, it will eliminate just that much more effort if you need to make adjustments later.
13. To crop images and other artifacts, use "overflow: hidden;".
14. Avoid padding and margin styles as "4px 4px 4px 4px". Just using "4px" affects all borders.
15. Be sure you understand the various styles – including differences between padding and margins, for example. Having a good grasp on these details helps to eliminate a lot of fumbling later. My rule of thumb is that if I’m changing a setting and hoping it will work, rather than expecting it to work, then I probably don’t have a thorough understanding of the setting. At that point I fire up Google and start looking for the benefit of other people’s experience.
16. Oh yeah – Google is your friend, learn to use it effectively, and for CSS and lots of other topics, check out w3schools.com. They seem to come up in a lot of searches on ASP.NET and CSS.
17. When entering styles, try to use consistent ordering in your CSS and in your aspx pages. Unfortunately Visual Studio has a tendency to re-organize the style attributes. My preferred order is position, top, left, width, height, margin, padding … then everything else. This keeps positioning and size at the top, which is the first priority, then the look and feel after that.
18. Try to avoid width and height settings of nested components if you don’t need them – they’ll default to the width and height of their parent container. If anything, use 100% and avoid hardcoding pixels because you’ll only need to change them again if you resize the parents.
19. You can open a web form and then make changes to CSS and tag markup without shutting down and restarting the execution. You can’t change anything in the designer but you can go to the source for web pages and change that. So change the CSS and tags if required, save all with ctrl-shift-S, then F5 to refresh your pages and you will see the effect of the changes.
20. Get the Microsoft Internet Explorer Developer Toolbar. It’s fantastic for this sort of work. You’ll find links to a couple helpful videos for this software, and many other developer downloads here.

I guess 20 tips is a good start for now. I hope that’s been helpful. I have a lot of other tips for this sort of development, including connectivity with MV, but really a lot just focused on ASP.NET / Ajax development. There’s only so much time to post though. I guess I’ll have to post more tidbits and less articles, eh? Nah!