HTML & CSS Coding Best Practice
General Rules for HTML
Always use the HTTPS protocol (https:) for images and other media files, style sheets, and scripts, unless the respective files are not available over HTTPS.
Not recommended
<script src=”//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@import ‘//fonts.googleapis.com/css?family=Open+Sans’;
Recommended
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@import ‘https://fonts.googleapis.com/css?family=Open+Sans';
Capitalization
Use only lowercase.All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings)
Not recommended
<A HREF=”/”>Home</A>
Recommended
<img src=”google.png” alt=”Google”>
Encoding
Use UTF-8 (no BOM), Make sure your editor uses UTF-8 as character encoding, without a byte order mark.
Recommended
<meta charset=”utf-8">
HTML Validity
Use valid HTML where possible.Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.
Not recommended
<title>Site title</title>
<article>This is only a site title.
Recommended
<!DOCTYPE html>
<meta charset=”utf-8">
<title>Test</title>
<article>This is only a test.</article>
Semantics
Use HTML according to its purpose, Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons
Not recommended
<div onclick=”goToRecommendations();”>All recommendations</div>
Recommended
<a href=”recommendations/”>All recommendations</a>
Multimedia Fallback
For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in alt=” ”
Not recommended
<img src=”spreadsheet.png”>
Recommended
<img src=”spreadsheet.png” alt=”Spreadsheet screenshot.”>
Entity References
Do not use entity references.There is no need to use entity references like —, ”, or ☺, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.
Not recommended
The currency symbol for the Euro is “&eur;”.
Recommended
The currency symbol for the Euro is “€”.
Attributes
Omit type attributes for style sheets and scripts. Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript)
Not recommended
<link rel=”stylesheet” href=”https://www.google.com/css/maia.css"
type=”text/css”>
<script src=”https://www.google.com/js/gweb/analytics/autotrack.js"
type=”text/javascript”></script>
Recommended
<link rel=”stylesheet” href=”https://www.google.com/css/maia.css">
<script src=”https://www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML Line-Wrapping
Break long lines (optional).While there is no column limit recommendation for HTML, you may consider wrapping long lines if it significantly improves readability.
Recommended
<md-progress-circular
md-mode=”indeterminate”
class=”md-accent”
ng-show=”ctrl.loading”
md-diameter=”35">
</md-progress-circular>
<md-progress-circular md-mode=”indeterminate”
class=”md-accent”
ng-show=”ctrl.loading”
md-diameter=”35">
</md-progress-circular>
HTML Quotation Marks
When quoting attributes values, use double quotation marks.Use double (“”) rather than single quotation marks (‘’) around attribute values.
Not Recommended
<a class=’maia-button maia-button-secondary’>Sign in</a>
Recommended
<a class=”maia-button maia-button-secondary”>Sign in</a>
Indentation
Indent by 2 spaces at a time.
Not Recommended
.example{
color: blue;
}
Recommended
.example {
color: blue;
}
Indentation
Use only lowercase
Not Recommended
color: #E5E5E5;
Recommended
color: #e5e5e5;
ID and Class Naming
Use meaningful or generic ID and class names.
Not Recommended
#yee-1901 {}
Recommended
#gallery {}
#login {}
ID and Class Name Style
Use ID and class names that are as short as possible but as long as necessary.
Not Recommended
#navigation {}
.atr {}
Recommended
#nav {}
.author {}
Type Selectors
Avoid qualifying ID and class names with type selectors.
Not Recommended
ul#example {}
div.error {}
Recommended
#example {}
.error {}
Shorthand Properties
Use shorthand properties where possible.
Not Recommended
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
Recommended
padding: 0 1em 2em;
0 and Units
Omit unit specification after “0” values, unless required.Do not use units after 0 values unless they are required.
Not Recommended
margin: 0px;
padding: 0px;
Recommended
margin: 0;
padding: 0;
Hexadecimal Notation
Use 3 character hexadecimal notation where possible.For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.
Not Recommended
color:#ffffff
Recommended
color:#fff
ID and Class Name Delimiters
separate words in ID and class names by a hyphen.
Not Recommended
.error_status {}
.demoimage {}
Recommended
.error-status {}
demo-image {}
Block Content Indentation
Indent all block content
Not Recommended
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
Recommended
@media screen, projection {
html {
background: #fff;
color: #444;
}}
Declaration Stops
Use a semicolon after every declaration
Not Recommended
.test {
display: block;
height: 100px
}
Recommended
.test {
display: block;
height: 100px;
}
Property Name Stops
Use a space after a property name’s colon.
Not Recommended
h3 {
font-weight:bold;
}
Recommended
h3 {
font-weight: bold;
}
Declaration Block Separation
Use a space between the last selector and the declaration block.
Not Recommended
#video{
margin-top: 1em;
}#video
{
margin-top: 1em;
}
Recommended
#video {
margin-top: 1em;
}
Selector and Declaration Separation
Separate selectors and declarations by new lines.Always start a new line for each selector and declaration.
Not Recommended
a:focus, a:active {
position: relative; top: 1px;
}
Recommended
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
CSS Quotation Marks
Use single (‘’) rather than double (“”) quotation marks for attribute selectors and property values.Do not use quotation marks in URI values (url()).
Not Recommended
@import url(“https://www.google.com/css/maia.css");
html {
font-family: “open sans”, arial, sans-serif;
}
Recommended
@import url(https://www.google.com/css/maia.css);
html {
font-family: ‘open sans’, arial, sans-serif;
}
Section Comments
Group sections by a section comment (optional).If possible, group style sheet sections together by using comments. Separate sections with new lines.
Not Recommended
@import url(“https://www.google.com/css/maia.css");
html {
font-family: “open sans”, arial, sans-serif;
}
Recommended
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
