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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.