CSS Modules

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes like `flex`, `pt-4`, `text-center`, and `bg-blue-500` to build designs directly in your markup. Instead of writing custom CSS, you compose pre-built classes to create any design, which results in smaller final CSS bundles thanks to automatic purging of unused styles. Its configuration file allows full customization of the design system including colors, spacing, breakpoints, and typography.

Drag and drop is an interaction pattern that lets users move, reorder, or transfer UI elements by clicking (or touching), holding, and dragging them to a new position. It's used for file uploads, kanban boards, sortable lists, and layout builders. The HTML Drag and Drop API provides native browser support, while libraries like dnd-kit and react-beautiful-dnd offer more polished, accessible, and touch-friendly implementations.

Styled Components is a popular CSS-in-JS library for React and React Native that uses tagged template literals to style components. It automatically generates unique class names, supports dynamic styling based on props, handles vendor prefixing, and provides full theming capabilities. The library colocates styles with components, making it easy to understand what each component looks like and to delete styles safely when removing components.

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

Deep linking is the ability to direct users to a specific screen or content within a mobile or web application via a URL, rather than just opening the app's home screen. In React Native and Flutter, this involves configuring URL schemes (e.g., `myapp://profile/123`) or universal/app links that work across platforms. Deep linking is essential for push notification routing, marketing campaigns, sharing content between users, and creating seamless web-to-app transitions.