HTML and CSS

HTML

Code style

Check and style HTML using Biome.

Subresource integrity (SRI)

When using unbundled external packages:

Some scripts cannot use subresource integrity:

  • https://cdn.usefathom.com/script.js

  • https://fonts.googleapis.com/css?... (reason and alternative)

  • https://use.typekit.net/xxxxxxx.js

  • https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX

Reference: Subresource Integrity on MDN

Search engine optimization (SEO)

On each page of a public-facing website:

  • Set a unique <title> tag

  • Set a unique <meta name="description" content=""> tag

  • Set social media meta tags, at minimum:

    <meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="article"> <!-- or "website" for homepage -->
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta name="twitter:card" content="summary">

    See also

See also

CSS

See also

build.js for compiling SCSS (Sass)

Frameworks

Most projects use Bootstrap. Designers are free to use other frameworks like:

When using Bootstrap, customize it and @import only the components you need.

See also

The Data Registry’s _custom.scss file, for customizing Bootstrap.

Reminders

  • Use a CSS framework’s variables and utility classes, instead of creating new classes

  • Conform to WCAG 2.1 at Level AA for contrast

  • Avoid using too many font sizes on the same page. To check:

    const sizes = {}
for (const element of document.getElementsByTagName('*')) {
    const size = window.getComputedStyle(element).fontSize
    if (!(size in sizes)) { sizes[size] = [] }
        sizes[size].push(element)
    }
sizes

Code style

Check and style CSS using Biome, with 2-space indentation.

In terms of naming conventions, consider Block Element Modifier (BEM).

Development

Reference