HTML and CSS#

HTML#

Code style#

Style HTML code using Prettier with 4-space indentation.

CSS#

Frameworks#

Most projects use Bootstrap, some of which use Python packages like django-bootstrap5. Designers are free to use other frameworks like:

Tailwind, a utility classes framework
Vuetify, a Material Design framework

Reminders#

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

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 code using Prettier with 2-space indentation. In terms of naming conventions, options include:

Block Element Modifier (BEM)

Development#

Tachyons X-ray to align objects to a grid

Reference#