Unspecified elements are automatically cast as a div, so don't waste space specifying one.
//- BAD
div.class
//- GOOD
.classDon't add unnecessary commas to attributes.
//- BAD
form(method="", action="")
//- GOOD
form(method="" action="")Do use string interpolation where it makes sense, but not for strings or content that will be placed directly into the element. Don't wrap conditions in parentheses when it's not necessary.
//- BAD
.class(class="class-" + i)
//- GOOD
.class(class="class-#{i}")
//- BAD
.class(data-id="#{model._id.toString()}")
//- GOOD
.class(data-id=model._id.toString())
//- BAD
.class #{content}
//- GOOD
.class= content
//- BAD
.class(class=(condition ? "class-1" : "class-2"))
//- GOOD
.class(class=condition ? "class-1" : "class-2")If attributes won't fit easily on one line, wrap all attributes with the same indentation, closing the brackets on the following line to make current indentation clear.
//- GOOD
input.class(
type="text"
placeholder="Text Input"
name="text"
value=condition ? value1 : value 2
required
)Iterate over arrays or object where it makes sense, even if variables must be created on the fly. Use common sense to determine if the data is best passed to the template.
//- GOOD, but remember that "j" is undefined
for j, i in new Array(99)
.char(class="#{char}-i")= i
//- OK, but prefer passing menu object to template
- var menu = {"Home": "/home", "Settings": "/settings", "Log out": "/logout"};
for url, text in menu
a(href=url)= textUse native for and if directives rather than JS blocks.
//- BAD
- for (var i = 0; i < arr.length; i++) {
span= i
- }
//- GOOD
for el, i in arr
span= iMake code consistent with our CoffeeScript styleguide by preferring double quotes.
//- BAD
form(method='POST' action='')
//- GOOD
form(method="POST" action="")Don't create custom attributes or nest invalid elements. Never use IDs inside of a loop.
//- BAD
.class(customattribute=thing)
//- GOOD
.class(data-attribute=thing)
//- BAD
ul
h1 Title
p Paragraph text.
//- BAD
p
.class
//- BAD
for item in array
#array-item= itemDon't place conditions at the top level when they can be nested further down.
//- BAD
if condition
.class
p
= value1
else
.class
p
= value2
//- BETTER
.class
p
if condition
= value1
else
= value2
//- BEST
.class: p
= condition ? value1 : value2Nest short lines when they have consistent features and fit over one line.
//- GOOD
ul
li.class: a.link(href="/link-1") Link 1
li.class: a.link(href="/link-2") Link 2
li.class: a.link(href="/link-3") Link 3Don't attach event handlers inside Jade, whose purpose is only to mark up the document.
//- BAD
img(onerror="")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent