Html Style Guide
Anchor
External links
External links must have rel="noopener"
and target="_blank"
attribute.
// Bad
<a href="path/to/external/file">External URL</a>
// Good
<a href="path/to/external/file" rel="noopener" target="_blank">External URL</a>
Title attribute
Anchor must have title
attribute.
// Bad
<a href="#">Link</a>
// Good
<a href="#" title="Description of anchor">Link</a>
Attribute
Attribute Case
Attribute must be written in lowercase.
// Bad
<meta charset="UTF-8">
// Good
<meta charset="utf-8">
Attribute value
Attribute value must be wrapped in quotation marks.
// Bad
<input type=text>
// Good
<input type="text">
Boolean attribute
Boolean attribute values like checked
, disabled and required
are redundant and must be omitted.
// Bad
<input type="text" required="required">
// Good
<input type="text" required>
Equal Sign
Spaces around attribute equal signs must be avoided.
// Bad
<input type = "text">
// Good
<input type="text">
Work with css
BEM, or “Block-Element-Modifier”, is a naming convention for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.
CSS Trick's BEM 101
Harry Roberts' introduction to BEM
We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.
Example :
<article class="ListingCard ListingCard--featured">
<h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>
<div class="ListingCard__content">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
JavaScript hooks
Avoid binding to the same class in both your CSS and JavaScript. Conflating the two often leads to, at a minimum, time wasted during refactoring when a developer must cross-reference each class they are changing, and at its worst, developers being afraid to make changes for fear of breaking functionality.
We recommend creating JavaScript-specific classes to bind to, prefixed with .js-
:
<button class="btn btn-primary js-request-to-book">Request to Book</button>
Reference:
Last updated