Frontend Standards

Best practices for building consistent, maintainable, and performant user interfaces.

HTML Standards

  • Use semantic HTML5 tags (header, main, section, etc.) to structure your content.
  • Write descriptive and unique title and meta tags for each page.
  • Use valid and accessible HTML, ensuring proper nesting of tags.

CSS (Tailwind) Standards

  • Use TailwindCSS classes for styling to maintain a consistent design system and reduce custom CSS.
  • Keep utility classes minimal and descriptive, avoiding class bloat.
  • Use Tailwind's configuration file to define custom colors, fonts, and spacing.
  • Leverage responsive utilities for consistent behavior across devices.
  • Use Tailwind's dark mode utilities for seamless light/dark theme switching.

JavaScript Standards

  • Follow ES6+ syntax and features like const and let for variable declarations.
  • Use modules to structure JavaScript code, ensuring modularity and reusability.
  • Write clean and descriptive function and variable names.
  • Use frameworks like Stimulus or plain JavaScript for small, interactive behaviors.
  • Test JavaScript functionality thoroughly, especially for dynamic components. 
// Example: Stimulus Controller
import { Controller } from "@hotwired/stimulus";

export default class extends Controller { connect() { console.log("Stimulus controller connected!"); }

greet() { alert("Hello, Stimulus!"); } }

Accessibility

  • Ensure all content is navigable with a keyboard.
  • Provide alternative text for all images using the alt attribute.
  • Use ARIA roles and labels where necessary for assistive technologies.
  • Maintain a minimum contrast ratio of 4.5:1 for text and backgrounds.
  • Use semantic HTML for clear structure and meaning. 
<!-- Example: Accessible Form -->

Performance

  • Minimize the use of large libraries and frameworks; use lightweight alternatives where possible.
  • Optimize images by using modern formats (e.g., WebP) and appropriate sizes.
  • Use lazy loading for images and other non-critical assets.
  • Use caching and Content Delivery Networks (CDNs) to reduce server load.
  • Test performance regularly using tools like Lighthouse and WebPageTest. 
<!-- Example: Lazy Loaded Image -->
Example