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:

• https://github.com/airbnb/css

• https://html-style-guide.netlify.app/