HTML and CSS

HTML

Code style

Style CSS and JavaScript in HTML files using Biome.

You can use Prettier to style HTML while waiting for Biome support.

biome.json
{
  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "defaultBranch": "main"
  },
  "assist": {
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  },
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 4,
    "lineWidth": 119
  },
  "json": {
    "formatter": {
      "indentWidth": 2
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

Subresource integrity (SRI)

When using 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

The Data Registry’s webpack.config.js file, 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

Style CSS using Biome, with 2-space indentation.

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

Development

Reference