lurui1997 Frontend Design
Provide concise, actionable guidance for modern frontend development.
Component Design
- Prefer composition over inheritance.
- Keep components focused on a single responsibility.
- Lift state only when necessary; co-locate related logic.
State Management
- Local state: use built-in primitives (useState, ref, signal).
- Cross-component: prefer context or lightweight stores (Zustand, Pinia) before reaching for Redux.
- Server state: use a data-fetching library (TanStack Query, SWR, RTK Query) to handle caching, deduplication, and background updates.
Styling
- Use utility-first CSS (Tailwind) or CSS-in-JS based on team consensus.
- Maintain design tokens for colors, spacing, and typography.
- Avoid deeply nested selectors; keep specificity low.
Performance
- Lazy-load routes and heavy components.
- Memoize expensive computations and stable callbacks where profiling shows benefit.
- Optimize images (modern formats, responsive srcset).
Accessibility
- Use semantic HTML elements.
- Ensure keyboard navigability and visible focus states.
- Add meaningful alt text and ARIA labels where native semantics are insufficient.