Markup

HTML

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