HTML and CSS Style Guide

Written by: IANR Media

Using an HTML and CSS style guide makes it easier for web teams to read, edit and understand each other's code. It makes code look clean, consistent and professional.

The HTML and CSS style guide below was established by IANR Media's web team after reviewing current industry standards, sharing practices and determining which style preferences are consistent with the UNLcms WYSIWYG editor.

HTML

anatomy of an HTML tag

Tags: Define where an element starts and ends
Element: Consists of the start and end tag and the contents in-between
Attribute: Placed in the beginning tag and consists of a name and value pair

General

  • Attribute value: Don't minimize attributes
    Example: Use checked="checked" instead of checked
  • Blank line: Add a blank line before and after large blocks of code, lists and tables
  • Class location in HTML: Place the class name in the HTML as close as possible to the content it styles
  • Double quotes: Use double quotes around attribute values
    Example: Use alt="corn field" instead of alt='corn field'
  • Empty elements: Close empty elements
    <br />
    <hr />
    <img... />
    <input... />
  • Entities: Use the equivalent HTML entity instead of  typing &,< or > when displaying the characters as text on the page
  • Indent: Indent child elements two spaces for blocks, lists and tables
  • Line wrap: Do not wrap lines of code with a return
  • Lowercase: Lowercase tags and attributes

Comments

  • Basic comment: Add basic comments to explain the purpose of your code
    <!-- basic comment goes here -->
  • Code begin and end comments: Add comments around long blocks of code to show where the block begins and ends
    <!-- Begin: comment here -->
    <!-- End: comment here -->

CSS

anatomy of CSS

Rule: Consists of a selector or group of selectors and their declaration block which may contain one or more declarations enclosed in curly brackets
Selector: A class (Example: .intro), id (Example: #promo), attribute (Example: a[target="_blank"]), element (Example: div), etc. that is used to select the HTML content you want to style
Declaration: Consists of a property and value pair

General

  • Blank line: Add a blank line above selectors
  • Class name abbreviation: Avoid using abbreviations for class names unless commonly understood or defined by the framework
  • Colon: Single space after the colon in a declaration
  • Color hex value: Use the abbreviated color value when available, otherwise use the full hex value
    Example: Use color: #fff instead of color: #ffffff
  • Color names: Do not use color names
    Example: Use color: #f00 instead of color: red
  • Color RGB value: Use RGB only when required for example when using the opacity property
    .box {
      background-color: rgb(255,0,0); opacity: 0.5;
    }
  • Comma: Return after each comma in comma-separated selectors
    .selector1,
    .selector2 {
      font-size: 1.2rem;
      color: blue;
    }
  • Double quotes: Use double quotes around CSS attribute values in HTML
  • Hyphenate class name: Use hyphens to separate words or abbreviations in a class name, not capitalization or underscores
    Example: Use .intro-text instead of .intro_text or .IntroText
  • Indent: Indent declarations two spaces
  • Inline styles: Avoid inserting CSS in HTML using an inline style
    Example: Use <div class="text-highlight"> instead of <div style="color: #ff6">
  • Lowercase: Lowercase selector, property and value
  • Multi-line format: Write rules in multi-line format, not single-line format

    Example:
    Use Multi-line format
    .selector {
      color: blue;
    }

    Instead of Single-line format
    .selector {color: blue;}

  • Property shorthand: Use property shorthand when possible

    Example:
    Use shorthand property
    .info-box {
      border: 5px solid #d00000;
    }


    Instead of individual properties
    .info-box {
      border-width: 5px;
      border-style: solid;
      border-color: #d00000;
    }

  • Semi colon: Use a semi colon after each property-value pair including the last one
  • Units rem: Use rem units for font-size, padding and margin values
  • Units zero value: Don't specify units on zero values
    Example: Use margin: 0 5px; instead of margin: 0px 5px;
  • Units %: Use % units for container width and height (exception: can use pixels for min/max and media queries)
  • WDN class overwrites: Do not use WDN classes in local CSS to overwrite them

    Example:
    Create and use your own class
    .ianrm-inner-wrapper {
      margin: 20px;
    }

    Instead of overwriting a WDN class
    .wdn-inner-wrapper {
      margin: 20px;
    }

Comments

  • Basic comment: Indicate styles for a block of code like a carousel, social media icons, subsection etc.
    /* basic comment */
  • Section comment: Indicate group of styles for global, a main section or a content type
    /* =========================================================================
    
    Section Comment
    
    ========================================================================== */

Ordering

Naming

  • Class name selection: Use class names that indicate the purpose/function of the element and not the presentation
    Example: .text-highlight instead of .text-yellow
  • Class name prefix: Add site prefix to local classes you create, separate with one dash
    Example: .casnr-class-name, .alec-class-name, .ianr-class-name
  • Class or ID: Use class instead of id when possible

References