Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explain rationale of HTML bracket formatting in HTML style guide. #9629

Merged
merged 1 commit into from
Dec 23, 2016
Merged

Explain rationale of HTML bracket formatting in HTML style guide. #9629

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions style_guides/html_style_guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@

## Multiple attribute values

When a node has multiple attributes, each attribute including the first should be on its own line with a single indent.
When an element has multiple attributes, each attribute including the first should be on its own line with a single indent.
This makes the attributes easier to scan and compare across similar elements.

The closing bracket should be on its own line. This allows attributes to be shuffled and edited without having to move the bracket around. It also makes it easier to scan vertically and match opening and closing brackets.
The closing bracket should be on its own line. This allows attributes to be shuffled and edited without having to move the bracket around. It also makes it easier to scan vertically and match opening and closing brackets. This format
is inspired by the positioning of the opening and closing parentheses in [Pug/Jade](https://pugjs.org/language/attributes.html#multiline-attributes).

```
<div
Expand All @@ -17,7 +19,7 @@ The closing bracket should be on its own line. This allows attributes to be shuf
</div>
```

If the node doesn't have child notes, add the closing tag on the same line as the opening tag's closing bracket.
If the element doesn't have children, add the closing tag on the same line as the opening tag's closing bracket.

```
<div
Expand Down