- 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.
- <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.
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 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:
//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