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