Dev - Web‎ > ‎

HTML/CSS

HTML

IDs and Classes

IDs and classes should contain lowercase letters and words should be separated with a hyphen. e.g.:

<td class="alt-row"></td>

As a rule, use classes for everything.

Default Skeleton

The following markup should be used as the base skeleton for most HTML documents. Variations are allowed, but the IDs should be preserved if possible:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">

    <title></title>
  
  </head>
  <body class="page-name">
    <div class="wrapper">
      <div class="header">
      </div> <!-- /.header -->
      
      <ul class="nav">
      </ul>

      <div class="content">
      </div> <!-- /.content -->

      <div class="footer">
      </div> <!-- /.footer -->
    </div> <!-- /.wrapper
  </body>
</html>

Best Practices

  • Use clear and precise names for IDs and classes
  • Choose names according to semantic meaning rather than presentation.
  • Avoid using unnecessary classes and wrapper elements.
  • Validate HTML. A validator can often help a developer track down styling or scripting bugs. Valid HTML also increases the likelihood that a page will be displayed correctly in current and future browsers.

CSS

Style Block

Each style block should adhere to the following format:

selector { property: value; }

selector-2 {
  property: value;
  property: value;
}

Each selector should:
  • be on it's own line
  • be followed by a space
  • end in an opening brace on the same line
  • be closed with a brace on a new line without indentation
Each property-value pair should:
  • be on its own line
  • be indented with two spaces
  • contain a space after the colon

Stylesheet Organization

Document Head

/************************************************************************************
    Rain CSS Coding Standards outlined at http://standards.mediarain.com/html-css

    Color Reference:
        red: #FF0000
        blue: #0000FF
        gray: #333333

*************************************************************************************/

Each main stylesheet should contain a document head. The head should contain a reference to this coding standards document (http://standards.mediarain.com/html-css). This reference will help any new or outside developers be aware of the coding guidelines they should follow.

Optionally, the document head may contain a color reference. A color reference is an index of colors commonly used in the design. This reference makes it easy to identify specific color values without a color picker. It is also useful when a color is updated, since a quick find/replace can be completed.

A description, table of contents, or other meta data may be included in this head as deemed appropriate.

Sections

CSS style blocks should be grouped by section and ordered according to the markup in the HTML document. Common sections include the following:
  • Global
  • Type
  • Forms
  • Header
  • Navigation
  • Content
  • Footer
Page- or layout-specific sections may be added. Sections should be denoted with comments which use the following format:

/* ************************************
 *
 * @Section: Global
 *
************************************* */

Two empty lines should precede each section comment. The '@' symbol is used to quickly traverse the stylesheet using a text editor's "Find Next" feature.

Best Practices

  • Use a global reset. A global reset helps create more consistent presentation across browsers. 
  • Use sprites for all rollover/active states. CSS sprites prevent unwanted image flicker on rollover. CSS sprites also reduce the total number of HTTP requests. 
  • Use as few browser-specific styles as possible. If needed, browser-specific stylesheets or page classes (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) should be used instead of putting CSS hacks in the main stylesheet.
  • Validate CSS.

File Naming and Organization

The following example file structure should be used for static resources (framework-specific conventions take precedence):

/css
    /reset.css
    /main.css
    /ie.css
/img
    /btn-submit.png
    /btn-submit-SOURCE.psd
    /es
        /btn-submit.png
/media
/js
/files

Filenames

Filenames should contain lowercase letters and words should be separated with a hyphen. The hyphen word separator (as opposed to an underscore or camelcase) is considered good practice for SEO reasons.

CSS Stylesheets

CSS stylesheets should be contained in a directory named 'css'. This directory will often contain a global reset stylesheet, named reset.css and a main stylesheet, appropriately named main.css. Any Internet Explorer-specific stylesheets should be named ie.css or ie7.css, etc. Other stylesheets may be added depending on the size and breadth of the website.

Images

Images should be contained in a directory named 'img'. In general, images should not be divided into subdirectories. 

Images of common types (buttons, icons, etc.) should contain a prefix with the type abbreviation. e.g. btn-submit.png

Source files (Photoshop, Fireworks, etc.) for sprite images should always be saved with the web version. Each source filename should match the corresponding web version and contain the suffix "-SOURCE". 

Locale-specific images should be contained in a subdirectory named after the locale abbreviation. e.g. /img/es/

Media Files

Flash, Silverlight, or other media files should be contained in a directory named 'media'.

Javascript Files

Javascript files should be contained in a directory named 'js'.

Other Files

All other downloadable documents, such as PDFs or Word docs, should be contained in a directory named 'files'.

ċ
website-skeleton.zip
(42k)
Unknown user,
Oct 23, 2013, 9:53 AM
Comments