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:

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:

Development#

Reference#