Introduction:
Components:
Resources:
Code Standards
In order to ensure quality across products we recommend following the standards provided below for developing flexible, durable, and sustainable HTML and CSS.
BEM Syntax
All our components are built using the BEM syntax. BEM (Block, Element, Modifier), is a simple naming convention that makes front-end code easier to understand, easier to work with, and easier to scale.
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming convention will help future design changes and will ease the process of onboarding new team members to project.
// Block: .alert
// Element: .alert__close
// Modifier: .alert--success
<div class="alert alert--success"><strong>Heads Up!</strong> Alert Message...
<a href="#" class="alert__close" data-alert-close>×</a>
</div>For More information on BEM visit their documentation.
HTML
When coding HTML make sure to abide strictly to the following Code Guide by @MDO.
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via
file://. - Use WAI-ARIA attributes in documentation examples to promote accessibility.
CSS
When coding CSS make sure to abide strictly to the following Code Guide by @MDO.
- When feasible, default color palettes should comply with WCAG color contrast guidelines.
- Except in rare cases, don't remove default
:focusstyles (via e.g.outline: none;) without providing alternative styles. See this A11Y Project post for more details. - For additional information on accessibility visit our docs on accessibility.
