Coding Styles
GIT conventions
In general terms, we agree with almost everything said in this blog post about GIT conventions and so should you. We only add/differ the following:
Commits should try to be as simple (atomic) as possible, but not simpler. Meaning you should always be able to revert specific fix
es, edit
s, update
s, add
s, and remove
s with git revert
Javascript
- Two spaces for indentation, never tabs.
var
everything, never comma first.- Single quotes only, never double quotes (opposite to HTML/Jade).
- Avoid trailing whitespace. Blank lines should not have any space.
- Inline documentation for new methods, class members, etc.
- One space between conditionals/functions, and their parenthesis and curly braces
if (..) {
for (..) {
while (..) {
function (err) {
- Use Yoda conditions, always
'string' === typeof el
instead oftypeof el === 'string'
.
Stylesheets
- See .stylintrc file. More info: https://rosspatton.github.io/stylint1-0/
- For module specific styles, comply with
#unique-template-top-node-selector .my-generic-css-update { ... }
.classes
and#ids
should only be used to reference fromCSS
files. If you want to use some element fromJS
usedata-*
to always be sure where the element is referenced from.- For multiple, comma-separated selectors, place each selector on its own line.
- Attribute selectors, like
input[type="text"]
should always wrap the attribute's value in double quotes, for consistency and safety (see this blog post on unquoted attribute values that can lead to XSS attacks).
HTML/Jade
- Two spaces for indentation, never tabs.
- Double quotes only, never single quotes.
- Avoid trailing whitespace. Blank lines should not have any space.
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://.
Local Modules
- Each Module should be placed in it's containing folder on
/lib
, as NodeJS Starter. (e.g./lib/sidebar
,/lib/models
) - Entry points:
- Server side JS:
index.js
. (e.g./lib/db-api/index.js
) - Client side JS:
${module-name}.js
. (e.g./lib/sidebar/sidebar.js
) - Client side CSS:
styles.styl
. (e.g./lib/sidebar/styles.styl
) - Main
HTML
template file istemplate.jade
. (e.g./lib/sidebar/template.jade
)