Markup

Guidelines

• Paragraphs should always be in <p> tags (do not use multiple <br/> to separate paragraphs).
• List should always be in <ul>, <ol>, or <dl> tags.
• Name things semantically. Think about what the object actually is.

Headings

• <h1> Only use once(not for logos).
• <h1> is for content not for images.
• You may use all other headers as needed.
• Use order of significance as you go down the headers.

Specificity

Id's Vs Classes

• Id's only use once per page.
• Classes: mark up similar items...similarly.
• Give everything a description.
• Make it make sense for what it does, not what it looks like. (ex: not (redText) use (notice warning))

Do Nots

Do not give different id's to the same element on different pages.

• Give them a universal class.
• Creating multiple id's just creates unnecessary code for everyone and becomes a nightmare for maintainability.

The internet is...THE INTERNET

• Do not use different id's and classes depending on device.
• Do not use device detection use feature detection to account for the future.
• If necessary only apply specific device classes to body tag and keep all other structure the same.
• Do not create extra html when you do not have to.
• Do not put text in ALL CAPS, that can be done with css if necessary.

Do not do:

      <div style="clear:both;"></div>
    

Instead do

      //Mixins
      @mixin clearAfter
        &:after
          content: "\0020"
          display: block
          height: 0
          clear: both
          overflow: hidden
          visibility: hidden

      .clearAfter
        +clearAfter
    

So in you html you can just add:

      <div class="clearAfter;">
        <!--Content-->
      </div>
    

This method requires no extra markup