Styleguide

Contribution standards and conventions

• Common Standards
• CSS Standards
• HTML Standards
• JavaScript Standards
• Documentation Standards

Common Standards

Use Spaces, Not Tabs

For consistency, use spaces instead of tabs for indentation.

Line Length

Preferred	Maximum
80 chars	120 chars

• 80 characters or less is preferred
• 120 characters is absolute maximum line length
• URLs are the only exception to this rule

Entity Naming Conventions

We must prefix all definitions with hx or Hx to avoid namespace conflicts and to ensure maximum compatibility with 3rd party libraries.

	Format	Example
Element Name	hx-kebab-case	hx-checkbox, hx-icon, etc.
Element Class	HXUpperCamelElement	HXCheckboxElement, HXIconElement, etc.
CSS Class	.hxLowerCamelCase	.hxSuccess, .hxSpan-12, .hxFilled, etc.

Custom Element Names

Based on observation, consumers find it more natural to type <hx-parent-child> rather than <hx-parentchild>.

• Strive to name custom elements after applicable ARIA roles, if possible.
  • e.g. <hx-tablist> is named after the tablist ARIA role.
• Be consistent across elements within the same component.
  • For example:
    • <hx-tabcontent> and <hx-tabset> don't match any ARIA role
    • <hx-tab>, <hx-tablist>, and <hx-tabpanel> match tab, tablist, and tabpanel roles (respectively)
    • Staying consistent with the non-kebabcase format across Tab elements reduces cognitive overhead.

Recommended:

<hx-parent>
  <hx-parent-child>...</hx-parent-child>
</hx-parent>

Avoid:

<hx-parent>
  <hx-parentchild>...</hx-parentchild>
</hx-parent>

Filename Conventions

All custom element assets should follow the Custom Element Class naming format, followed by the file extension.

	Format	Example
Appearance	HXUpperCamelElement.less	HXCheckboxElement.less, HXRevealElement.less, etc.
Behavior	HXUpperCamelElement.js	HXCheckboxElement.js, HXRevealElement.js, etc.
Structure	HXUpperCamelElement.html	HXCheckboxElement.html, HXRevealElement.html, etc.

CSS Standards

Read the CSS Styleguide

HTML Standards

Read the HTML Styleguide

JavaScript Standards

Read the JavaScript Styleguide

Documentation Standards

Read the Documentation Styleguide