Coding Standards

The Morningstar Design System team adheres to standard coding practices and tools to build components and other features. These standards do not serve as coding style standards to which other product teams must adhere. Instead, they express conventions used by MDS to create a maintainable, scalable library that other teams are welcome to emulate.

HTML

Semantics

The stand-alone HTML should have value and meaning.

If you are wrapping paragraph text with an element, use a <p> tag.

If it's tabular data, use a <table> tag.

If you have an unordered list, use a <ul> with nested <li>s wrapping each item.

If we write HTML using meaningful tags, we won’t have to rewrite the markup when the UI changes.

Header Tags

<!DOCTYPE html>: Use a doctype to force browsers to render in standards mode and prevent quirks-mode problems in Internet Explorer.

<html lang="en-us">: Set a lang attribute to assist browsers and search engines.

Never use inline styles unless leveraging a third-party framework that relies on inline styling (e.g. a tooltip/popover lib that positions the element using inline top, right, bottom, or left properties).

For all other attributes, add them in the order that makes most sense to you, but keep in mind that the more consistent the attribute order, the easier the code will be to inherit.

Exception to class attribute first rule: When an attribute is critical to defining an element, put it first to improve readability – <input type="text" class="" id="" disabled name="" placeholder="" readonly value="">.