style-guide

style.md

Suggested Style Guide

Prefer a newline+indent and then a newline for each parameter following a tag

avoid

div []
    []

prefer

div
  [] -- attributes
  [] -- children

Open brackets for attributes and children are always spaced two characters in front of their associated tag

div
  []
  [ div 
      [] 
      [ span
          []
          [ H.text "I am at depth=3" ]
      ]
  , a
      []
      [ i
          []
          [ H.text "I am at depth=3" ]
      ]
  ]

The motivation here is that elements should be aligned by depth regardless of their tag name.

We want to avoid this

div []
    [ div []
          [ span [] [ H.text "I am at depth = 3" ] ]
    , a []
        [ i [] [ H.text "I am at depth = 3" ] ]
    ]

Opening brackets must always be at the same indent level as their closing brackets

avoid

div 
  [ 'class "container" ] [
    span [] [ 'text "Hello" ]
  , span [] [ 'text "There" ]
  ]

prefer

div 
  [ 'class "container" ]
  [ span [] [ 'text "Hello" ]
  , span [] [ 'text "There" ]
  ]

Use a leading comma for each attribute, and do not include more than one attribute/child on the same line

avoid

div
  [ class' "container", id' "main-container" ]
  [ text "hello there" ]

prefer

div
  [ class' "container"
  , id' "main-container"
  ]
  [ text "hello there" ]

It is fine to add a newline after a single attribute list as well

totally ok

div
  [ class' "container"
  ]
  [ text "hello there"
  ]

Single-attribute + single-child elements may be expressed in a single line for brevity, but try to only use this for "leaf elements"

totally ok

i [ class' "material-icons" ] [ text "file_upload" ]

The usage of infix operators doesn't change the indent rule

div
  []
  $ if True then [ text "On" ] else [ text "Off" ]

You may use indentation for special alignment. But for operations on tags, attributes, children, and their members- prefer increasing indent away from their base line. Try to not pollute the lines of indentation that delineates where attributes and child brackets open and end.

prefer

div
  [] ++ (if True then [ class' "active-color" ]
         else [ class' "inactive-color ])
  []

avoid

div
  [] ++ (
  if True then []
  else []
  )
  []