https://github.com/gocardless/html-style-guide

How we write HTML at GoCardless
https://github.com/gocardless/html-style-guide

Last synced: 3 months ago
JSON representation

How we write HTML at GoCardless

• Host: GitHub
• URL: https://github.com/gocardless/html-style-guide
• Owner: gocardless
• Created: 2015-07-31T12:35:18.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T09:31:11.000Z (over 7 years ago)
• Last Synced: 2025-01-14T08:52:54.196Z (5 months ago)
• Size: 4.88 KB
• Stars: 11
• Watchers: 93
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## GoCardless HTML style guide

Have a look at how we write HTML at GoCardless - let us know if you've found the same rules effective, if you've used others that are better, or if there's anything missing entirely which you think it's worth having a rule for!

### 1. Basic formatting

#### a. We delimit attribute values using double-quotes

Good:

```html



```


Not so good:

```html



```


#### b. Each indentation is two spaces long

Good: 

```html



··


··


····Can I live?

··



```


Not so good:

```html



····
 


··


··Can I live? 

··



```


#### c. We don’t include a forward-slash on void elements

Good:         

```html




```

Not so good:

```html




```

### 2. Structure

We strive for easy-to-parse, tidy code and have found a few rules pretty great for keeping things readable and neat

#### a. Some things can stay on one line

Good: 

```html



```


Also good:

```html

Can I live?

```


Use judgement as to when it stops being readable, or is nearing your maximum line length.

For example, this might be best:

```html



··Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor



```


#### b. Nesting elements means visual nesting too 

Good:

```html



··Foo



```


#### c. Add space between elements for readability

It probably isn’t necessary between parent & child elements or multiple one-line elements:

eg

```html



··
1
 

··
2
 



```


The parent/child rule would apply to single multi-line elements too:

eg

```html



·· 

····Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

··



```


But might be better between same-level multi-line elements:

eg

```html



··


····Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

··

  

··
 

····Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

··



```


Also between groups of one-line elements: 

eg:

```html



··Foo

··Bar


··Foo 

··Bar

·· 

····Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

··



```


And finally between any combinations of one-line or multi-line elements (so basically bear in mind spacing as soon as you introduce a multi-line element):

eg:

```html



··Foo


·· 

····Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

··



```


#### d. Try using line-breaks for multiple attributes, keeping the first attribute on the tag's opening line

Good:

```html

 




··Foo 

 

```


#### e. Use your judgement on all the above for when things become less readable

Might be OK:

```html

```

Might not be OK:

```html

Bar

```

Might be better:

```html

  Bar

```