Knowledgebase

This post describes a code guidelines and a best practices for CSS, it will evolve over time and will be updated whenever I find new or better best practices.

CSS Files

• Every web application should have a General.css, which contains only the classes that are used in more then 1 page or user control.
• Every master page, page, user control, external library components should have there own css file.
• Create a browser specific css file, if you have to use browser specific css hacks
• All css files should be saved in a Css folder in the root of the web application.
• The master page should first link to the General.css and then to the Master.css and then it should contain a contentplaceholder, so pages and user controls can add there css file to the head of the master page 

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

• All pages and user controls should link to there own css file, by adding a link to there css file in the master page by implementing the contentplaceholder head from the master page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Css\Default.css" rel="Stylesheet" type="text/css" />
</asp:Content>

•  

CSS Structure

• Keep HTML free of presentational attributes, all styling should go in classes in css files.
• Every class defined in CSS should be used, else it must be removed.
• Every browser specific hack should be commented.
• Don´t use a reset scripts except for padding and margin when working with a pixel perfect design, else external libraries might no work.
• Don´t use css direct on html tags, only on html and body tag, all other tags should have classes, else external libraries might no work.
• Don´t use important! only if you have to overwrite inline styling and then comment it.
• Class name should start with lowercase and use camel casing.
• Use only classes and avoid id´s, because asp .net will render a control in a usercontrol like ctrl001.
• Order the classes within the css file based on the order of the markup. If the first element of the page is an <h1 class="titleHeader">, put it first.
• Properties within a class should be in alphabetic order.
• Set the font on the body tag, so other tags inherit from it.
• Set classes on outer elements and use selectors to style the child elements.
• Don’ t use * before property name, so don’ t use .exampleClass { *width: 20px; }

CSS Tips

• If you want to add horizontal spacing between rows, use a border for the <tr> tag:

.rowWithBottomSpacing
{
    border-bottom: solid 5px #ffffff;
}

• An example IE8 hack could be, a class that hides the dashed border arround a link when it’ s clicked:

.linkWithNoDashesOnActivation
{
    border-color: Red;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    outline: none;
} 

• Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
• Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
• Note: Pseudo-class names are not case-sensitive.

a:link {color:#FF0000}      /* unvisited link */
a:visited {color:#00FF00}  /* visited link */
a:hover {color:#FF00FF}  /* mouse over link */
a:active {color:#0000FF}  /* selected link */
a:focus {color:#00A0FF}  /* focused link */

•  

Source and Related posts

• http://www.w3.org/TR/CSS21/
• http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/