HTML Styleguide - HelixDesignSystem/helix-ui GitHub Wiki

!! IN PROGRESS !!

Basic Rules

2 spaces per indentation. No tabs.

Demonstration Code

Child Elements on New Line

Avoid nesting child elements on the same line as their parent. This reduces legibility of the code.

Alphabetize Attributes

For consistency, attributes should be displayed alphabetically to aid in readability.

avoid

<foo 
  disabled 
  something="else" 
  attr="blah">
  ...
</foo>

recommend

<foo 
  attr="blah"
  disabled 
  something="else">
  ...
</foo>

Attributes on their own line

When there are 2 or more attributes, each attribute should be defined on its own line below the opening <tag-name definition.
The closing > or /> should be on the same line as the final attribute.

avoid

<!-- attributes should be defined on separate lines -->
<foo disabled something="else" attr="blah">
  ...
</foo>

<!-- Closing ">" should be on same line as final attribute -->
<foo
  attr="blah"
  disabled
  something="else"
>
  ...
</foo>

recommend

<foo
  attr="blah"
  disabled
  something="else">
  ...
</foo>

Form Control IDs

To prevent a potential ID collision between heading anchors and control IDs, please prefix name form controls using Hungarian Notation prefixes shown below.

prefix	controls
`btn`	Button
`chk`	Checkbox
`col`	Color Picker
`date`	Date Picker
`num`	Number Input
`rad`	Radio
`rng`	Range Slider
`sel`	Dropdown Select
`tel`	Telephone Input
`time`	Time Picker
`txt`	Text Input (single or multi-line), Email Input
`url`	URL Input

example:

<form>
  <p>
    <label for="txtFullName">Full Name:</label>
    <input 
      id="txtFullName" 
      name="fullName" 
      type="text" />
  </p>
  <fieldset>
    <legend>Do you like bacon?</legend>
    <p>
     <label for="radBaconYes">Yes</label>
     <input 
       id="radBaconYes" 
       name="likesBacon" 
       selected
       type="radio" 
       value="yes" />
    </p>
    <p>
     <label for="radBaconNo">No</label>
     <input 
       disabled
       id="radBaconNo" 
       name="likesBacon" 
       type="radio" 
       value="no" />
    </p>
  </fieldset>
  <p>
    <button 
      id="btnSubmitFeedback"
      type="submit">
      Submit Feedback
    </button>
    <button 
      id="btnClearFeedback"
      type="clear">
      clear
    </button>
  </p>
</form>

Other

TBD