To make the page render as intended and support all the latest HTML5 features make sure to add the doctype on top of the page.
<!DOCTYPE html>
-
Make sure the site you build is accessable to everyone and on every device. Use ARIA Landmark role to help users easily navigate the page.
<header role="banner"> <footer role="contentinfo"> -
Enable
:focusfor users that prefer to navigate using keyboard. -
Add underline (
text-decoration: underline) on links for the user to easily recognize links. -
Use Semantic heading and markup for the page structure.
-
Add
altandtitletags on link and images respectively. -
Test on monochrome screens (like Kindle) and screen readers.
-
Microformat for vCards, geolocation, phone numbers, addresses, etc.
Write semantic markup to reinforce meaning of the information on the website rather mere style.
Don't use deprecated elemtents like big, b, i, etc that for styling in HTML which is the responsibility of CSS. Use right elements the purpose they were intended for.
Don't
<span class="heading">Hello World!</span>
<b>Axelerant</b>
Do
<h1>Hello World!</h1>
<strong>Axelerant</strong>
Enable character encoding to support maximum number of unicode character within the page. UTF-8 has a large support various unicode character. Simply add the meta in the head
<meta charset="utf-8">
Maintain proper indentation and formatting. Since HTML isn't a whitespace dependent language it always recommended to have ample amount of whitespace between elements. To indent markup use Tab of width 4 or simply use something like editorconfig to fix the indentation for you.
Remove or override the user agent styling with the help of CSS resets or noramlizing libraries to have consistent cross browser styling.
Use sprities to reduce the number of HTTP request. However you don't want to create sprites of hi-res images, just and the images that are frequently used throughout the site.
Classes aren't semantic, either they make sense or they don't. Write meaning and contextual class names. Classes should be relevant to the content and not the style.
Don't
<p class="red-heading">Hello Axelerant.</p>
Do
<p class="heading__primary">Hello Axelerant.</p>
Avoid nesting more than 3 levels. Use classes to avoid code smell. This will cause performance of some milliseconds and there won't be any modularity
Don't
ul li:nth-child(2) p a
Do
.search__link
Well indented and formatted code is really important when writing CSS. You can concatenate the code for production but when working on the development servers make sure the code is well indented with proper spacing so that it is easy to debug .
Write modular code that follows the single responsibility principal (SRP) and can we attached anywhere without any need to specific markup. This can be achieved by writing DRY code. Follow OOCSS.
Use Grids for layouts to avoid styling every element. This makes changing the layout for different viewports easy manage.
Use Classes over IDes. ID are way too specific and don't quickly cause code bloat. ID prevent you from writing modular code as their specificity is 10x more than Classes.