-
Notifications
You must be signed in to change notification settings - Fork 0
Style Guide WIP
There are many ways to write HTML, CSS and JavaScript. Whilst showing all possible ways to write code is important, we have chosen to provide code examples that adhere to a coding style for enhanced readability and clarity. This page outlines the style guide for code examples in the W3C HTML documentation.
- Indentation with tabs/xx spaces. (need to specify)
- Use indentation for all html elements.
<!-- This demonstrates the preferred indentations and styling -->
<!doctype html>
<html>
<head>
<title>Sample styled page</title>
<style>
body {
background: navy;
color: yellow;
}
</style>
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
</body>
</html>
- Use lowercase for the doctype declaration
- Use lowercase names for elements and attributes, unless the example aims at demonstrating that upppercase tags are allowed. In this case, an example that utilizes uppercase for one tag, should use uppercase for all tags.
- Self-closing tags should be closed, unless the example aims at demonstrating that self-closing tags do not need to be closed.
- No escaped characters - except invisible characters.
א <!-- This should be avoided -->
א <!-- This is preferred -->
- Quote attribute values with double quotes.
- Include the optional closing tags, unless the example aims at .
- Angle brackets should be closed on the same line as their preceding element or attribute.
<-- This should be avoided -->
<table
><tr><th>Month</th><th>Temperature</th></tr
></table>
in favor of
<-- This is more readable -->
<table>
<tr>
<th>Month</th>
<th>Temperature</th>
</tr>
</table>
HTML comments are always preceded by a blank line. There must be a single space between the comment token and the comment text. Comments should start with a capital letter but do not require to end with a full stop unless you are writing full sentences.
<!-- Example of a single line HTML comment -->
When comments take up multiple lines, have the opening <!-- and closing --> on their own on a new line.
<!--
Example of an HTML
multi-line comment
-->
- Use a space after a property name's colon, do not use a space before the colon.
- Add a space before the opening brace in rule declaration.
- Place the closing brace of a rule declaration on a new line.
- Add a blank line between rule declarations to make the CSS readable.
- When listing multiple selectors associated with the same CSS rule, add a new line after each comma.
- Indent selectors within media queries.
- Use indentation for CSS properties.
- Do not use spaces within parenthesis for urls.
- Use hex color codes unless using rgba(). (or are we happy with color names as well?)
- When possible, use shorthand hex values.
- Use lower case letters when declaring hex codes.
- Do not specify units for 0 values.
- Use double quotes instead of single quotes.
- Always have a semicolon at the end of each declaration.
CSS comments are always preceded by a blank line. There must be a single space between the comment token and the comment text. Comments should start with a capital letter but do not require to end with a full stop unless you are writing full sentences.
/* Example of a single line CSS comment */
When comments take up multiple lines, have the opening /* and closing */ on their own on a new line, and start each line of the comment with a * followed by a single space
/*
* Example of a CSS
* multi-line comment
*/
- Use a space after a property name's colon, do not use a space before the colon.
- Use braces for
if,else,for,while,try. These should go on multiple lines with the closing brace on its on line.
- Use double quotes instead of single quotes where possible.
- Use semicolons at the end of your statements.
JavaScript comments are always preceded by a blank line. There must be a single space between the comment token and the comment text.
// Example of a single line JavaScript comment
When comments take up multiple lines, have the opening /* and closing */ on their own on a new line, and start each line of the comment with a * followed by a single space.
/*
* Example of a JavaScript
* multi-line comment
*/