Coding styleguide and linting for HTML/Angular views

[FrancescoK]

Suggestion:

Syntax

(mostly from mdo’s codeguide.co):

• Use soft tabs with two spaces
• Use only lowercase
• Nested elements should be indented once (two spaces).
• Always use double quotes, never single quotes or no quote signs, on attributes.
• Don't include a trailing slash in self-closing elements—the HTML5 spec says they're optional.
• Don’t omit optional closing tags (e.g. </li> or </body>).
• Use a new line for every block, list, or table element, and indent every such child element.

  Attribute order

HTML attributes should come in this particular order for easier reading of code.

• class
• id, name
• data-*
• src, for, type, href, value
• title, alt
• aria-*, role
• ng-directives (This way is easy to look to the code and find enhanced HTML by the framework (what improve the maintainability, quote from https://github.com/mgechev/angularjs-style-guide)

  Angular:

• Use one-way binding where possible
• Use a separate <span translate> for localized strings instead of setting translate on another element
• When you need to set the src of an image dynamically use ng-src instead of src with {{ }} template.
• When you need to set the href of an anchor tag dynamically use ng-href instead of href with {{ }} template.
• Instead of using scope variable as string and using it with style attribute with {{ }}, use the directive ng-style with object-like parameters and scope variables as values

To discuss:

• Set spaces after and before {{}}, e.g. {{ person.name }} instead of {{person.name}} or vice versa?

[tthew]

:+1: no strong feelings about {{ viewModel }} vs {{viewModel}}.

[febeling]

I like the {{ viewModel }} version better.

Anything about html tags with lots of attributes on multiple lines vs. single line? (I like to arrange them vertically.)

We should agree on some transition process. Reordering all attributes e.g. right now wouldn't feel like responsible use of time =).

[FrancescoK]

@febeling We could leave attributes on multiple lines vs. single line to the author’s judgement. It’s more readable if it’s a lot and helps not exceed a certain line-length, but for two or three might be too much?

As for transition process, the “scout rule” seems reasonable: Correct the style when you work in a template/HTML file, but let’s not go back through the entire codebase just to fix style.

[febeling]

@FrancescoK sounds both reasonable

[tlvince]

+1 on {{ viewModel }}. +1 on "scout rule". If we're enforcing attribute order, I'd suggest id first as it has higher CSS specificity. Regarding multi/single line attributes, I prefer the former as it's easier to Git (akin to JS function params).

Enforcing these rules is going to be tricky. Is there a decent HTML linter? tidy is painful to work with.

[FrancescoK]

IDs first makes sense, though I would argue they should only be used as JS hooks, never for styling (following csswizardry’s advice) precisely because of their heavyweight specificity.

[FrancescoK]

To evaluate: https://www.npmjs.com/package/grunt-html-angular-validate

[admbtlr]

+1 on never using id's for styling, and actually not even for JS hooks either: I prefer to just 'js-' prefixed class-names. That way you can easily add the hook to multiple elements at a later date.