Skip to content

Update HTML style guide with rule for camel casing attribute values. #11653

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

Merged
merged 2 commits into from
Jun 8, 2017
Merged

Update HTML style guide with rule for camel casing attribute values. #11653

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd308f5
Update HTML style guide with rule for camel casing attribute values.
cjcenizal May 8, 2017
28a8ab9
Add notes about using the same capitalization in HTML and CSS.
cjcenizal Jun 8, 2017
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
38 changes: 35 additions & 3 deletions style_guides/html_style_guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,38 @@

# HTML Style Guide

## Camel case ID and other attribute values

Use camel case for the values of attributes such as IDs and data test subject selectors.

```html
<button
id="veryImportantButton"
data-test-subj="clickMeButton"
>
Click me
</button>
```

The only exception is in cases where you're dynamically creating the value, and you need to use
hyphens as delimiters:

```html
<button
ng-repeat="button in buttons"
id="{{ 'veryImportantButton-' + button.id }}"
data-test-subj="{{ 'clickMeButton-' + button.id }}"
>
{{ button.label }}
</button>
Copy link
Contributor Author

@cjcenizal cjcenizal May 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per Slack convo w/ @archanid, we could expand this exception to use hyphens as a grouping mechanism among similar elements, e.g.

<section id="welcomePage-introSection">
  <!-- Content -->
</section>

<section id="welcomePage-aboutSection">
  <!-- Content -->
</section>

Ater thinking about this a bit I'm not sure how useful this would be, and I'd prefer to keep our naming as simple as possible. This still seems readable and understandable to me:

<section id="welcomePageIntroSection">
  <!-- Content -->
</section>

<section id="welcomePageAboutSection">
  <!-- Content -->
</section>

Copy link

@rhoboat rhoboat May 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I agree with you @cjcenizal. Simpler is easier to do and clearer to read.

```

## Capitalization in HTML and CSS should always match

It's important that when you write CSS selectors using classes, IDs, and attributes
(keeping in mind that we should _never_ use IDs and attributes in our selectors), that the
capitalization in the CSS matches that used in the HTML. [HTML and CSS follow different case sensitivity rules](http://reference.sitepoint.com/css/casesensitivity), and we can avoid subtle gotchas by ensuring we use the
same capitalization in both of them.

## Multiple attribute values

When an element has multiple attributes, each attribute including the first should be on its own line with a single indent.
Expand All @@ -9,7 +41,7 @@ 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. This format
is inspired by the positioning of the opening and closing parentheses in [Pug/Jade](https://pugjs.org/language/attributes.html#multiline-attributes).

```
```html
<div
attribute1="value1"
attribute2="value2"
Expand All @@ -21,7 +53,7 @@ is inspired by the positioning of the opening and closing parentheses in [Pug/Ja

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

```
```html
<div
attribute1="value1"
attribute2="value2"
Expand Down