Friday, March 21, 2008

Guidelines for keeping pages clean with in ASP.Net

This is aimed at those who edit websites but are not primarily front-end developers.

Visual Studio Guidelines

  • Don't Use the Design Editor
  • If you are just displaying a piece of data use <asp:literal> rather than label or other constructs
  • Use agnostic ids for containers. #td_books is going to look pretty stupid when it's applied to a >ul>
  • Learn How to use <asp:repeater>
  • If you set a label to a form element set the associatedControlId. This will keep them associated semantically and will force the label to render as <label> rather than <span>

HTML Guidelines

  • Don't use Tables unless you are displaying tabular data
  • If you can click on it make it a link
  • If you can't click on it it's not a link

CSS Guidelines

  • Terminology (brief)
  • Get familiar with and use the site's default stylesheets. Check the site's default stylesheets for applicable rules before declaring your own
  • Class names and ids
    • Unique rules use id, instance rules use class.
    • Should describe the data not the presentation Bad: "sideNav", "topNav", "blue", "bold", "orangeBox" (Yeah, I'm guilty of this) Good: "subNav", "help", "disabled", "itemList"
    • I've stuck to camel-case-drop-first, for my naming conventions.
    • You can set multiple classes on the same element but IE6 doesn't like attaching rules where they are combined for the selector. e.g.: .help.disabled{/*IE6 says "what?"*/}
    • Rather than applying a class to a bunch of elements that are siblings, like in a list, add an id to the parent and reference the children using descendant selectors.
  • Good CSS Requires a good understanding of the semantics of HTML.
  • If you are uncomfortable with CSS ask someone who is.