使用 React 和現代 CSS 構建令人驚歎的 Web 介面

網路的發展已經遠遠超出了靜態頁面的範圍。使用者期望介面具有令人驚歎的視覺效果、光滑流暢且易於每個人使用。 React 與現代 CSS 技術相結合，為開發人員提供了實現這些期望的工具。本指南涵蓋了從基礎佈局系統到高階動畫和設計系統架構的所有內容。

現代 CSS 佈局：網格和 Flexbox

CSS 網格和 Flexbox 是現代佈局的兩大支柱。瞭解何時使用每種方法對於構建響應式介面至關重要。用於二維佈局的

CSS 網格

網格 擅長頁面級佈局以及任何需要同時控制行和列的設計：

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header  aside"
    "sidebar main    aside"
    "sidebar footer  aside";
  gap: 1rem;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

用於一維流的 Flexbox

Flexbox 非常適合元件級佈局 — 導航欄、卡行、表單佈局以及在單個流中流動的任何內容方向：

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

容器查詢

容器查詢是基於元件的設計的遊戲規則改變者。與響應視口寬度的媒體查詢不同，容器查詢響應元件容器的大小。這意味著卡片元件無論出現在狹窄的側邊欄還是寬闊的主要內容區域中都可以調整其佈局：

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

CSS 自定義屬性和設計令牌

CSS 自定義屬性（變數）是可維護設計系統的基礎。將您的設計令牌定義為:root元素上的自定義屬性，並在整個樣式中引用它們：

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #64748b;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1);

  /* Borders */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

設計令牌可確保整個應用程式的一致性，並使全域性樣式更改變得微不足道 - 更新一個變數，每個使用它的元件都會自動更新。 React 中的

造型方法

React 提供多種造型方法。每種方法都在開發人員經驗、效能和可維護性方面進行權衡。

CSS 模組

CSS 模組透過在構建時生成唯一的類名稱，將樣式範圍限定到各個元件。它們提供了簡單性和安全性的最佳平衡：

/* Button.module.css */
.button {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary {
  background: var(--color-primary);
  color: white;
}

.primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

import styles from './Button.module.css';

function Button({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

Tailwind CSS

Tailwind CSS 提供實用程式類，讓您可以直接在 JSX 中設定元件樣式。 它消除了 CSS 和 JavaScript 檔案之間的上下文切換，並透過其配置強制實施一致的設計系統：

function Card({ title, description, image }) {
  return (
    <div className="rounded-lg shadow-md overflow-hidden
                    bg-white hover:shadow-lg transition-shadow">
      <img src={image} alt={title}
           className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-900">
          {title}
        </h3>
        <p className="mt-2 text-gray-600 text-sm">
          {description}
        </p>
      </div>
    </div>
  );
}

CSS-in-JS（樣式元件、情感）

CSS-in-JS 庫允許您直接在 JavaScript 中編寫 CSS，並具有對 props 和狀態的完全訪問許可權。雖然功能強大，但它們增加了執行時開銷，並且越來越不受伺服器渲染應用程式的青睞：

import styled from 'styled-components';

const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: ${props => props.variant === 'success'
    ? '#dcfce7' : '#dbeafe'};
  color: ${props => props.variant === 'success'
    ? '#166534' : '#1e40af'};
`;

對於新專案，建議使用 CSS 模組或 Tailwind CSS，而不是 CSS-in-JS，因為它們具有更好的效能和伺服器渲染相容性。

使用 Storybook 構建設計系統

Storybook 為開發和記錄 UI 元件提供了一個隔離的環境。它既可以作為開發工具，也可以作為生活風格指南：

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'ghost'],
      control: { type: 'select' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
  },
};

export const Primary = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Secondary = {
  args: { variant: 'secondary', children: 'Click me' },
};

Storybook 使設計人員和開發人員能夠單獨協作處理元件，確保每個元件在整合到應用程式之前正常工作。

微互動和動畫

貼心的動畫引導使用者、提供反饋並營造優雅的感覺。 Framer Motion 是 React 的領先動​​畫庫。

帶 Framer Motion 的基本動畫

import { motion } from 'framer-motion';

function FadeInCard({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

交錯列表動畫

import { motion } from 'framer-motion';

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { opacity: 0, x: -20 },
  show: { opacity: 1, x: 0 },
};

function AnimatedList({ items }) {
  return (
    <motion.ul variants={container}
      initial="hidden" animate="show">
      {items.map(i => (
        <motion.li key={i.id} variants={item}>
          {i.label}
        </motion.li>
      ))}
    </motion.ul>
  );
}

僅 CSS 微互動

並非每個動畫都需要庫。 CSS 轉換和轉換可有效處理許多常見互動：

.interactive-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button-press:active {
  transform: scale(0.97);
}

可訪問元件模式

可訪問性不是可選的 — 它是專業 Web 介面的要求。遵循這些模式可確保您的元件適合所有人。

焦點管理

當模式開啟時，將焦點移至模式。當它們關閉時，將焦點返回到觸發元素。使用inert屬性可防止與後臺內容互動：​​

function Modal({ isOpen, onClose, children }) {
  const closeRef = useRef();
  const previousFocus = useRef();

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement;
      closeRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeRef} onClick={onClose}
        aria-label="Close dialog">X</button>
      {children}
    </div>
  );
}

鍵盤導航

所有互動元素都必須可透過鍵盤訪問。下拉選單、選項卡和輪播等自定義元件應遵循鍵盤互動的 WAI-ARIA 設計模式。

顏色對比度和視覺設計

確保文字符合 WCAG 2.1 對比度：普通文字為 4.5:1，大文字為 3:1。不要僅依靠顏色來傳達資訊——使用圖示、文字標籤或圖案作為補充指示符。

響應式設計策略

現代響應式設計超越了斷點。使用流暢的設計方法，可以平滑地適應所有螢幕尺寸。

流體排版

使用clamp()建立可在最小和最大尺寸之間平滑縮放的排版：

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}

p {
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

響應式間距

對間距和佈局應用相同的流體原理：

.section {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

深色模式實施

暗模式需要的不僅僅是反轉顏色。設計一個單獨的調色盤，以保持適當的對比度和視覺層次結構：

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #e2e8f0;
}

[data-theme='dark'] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #334155;
}

在 React 中，使用上下文提供程式管理主題並將使用者首選項保留到 localStorage：

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    if (typeof window === 'undefined') return 'light';
    return localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

效能最佳化

漂亮的介面還必須快速。應用這些 CSS 效能技術來保持 UI 的響應能力。

CSS Containment

contain屬性告訴瀏覽器元素的內容獨立於頁面的其餘部分，從而實現渲染最佳化：

.card {
  contain: layout style paint;
}

.sidebar {
  contain: layout size style;
}

will-change 屬性

使用will-change向瀏覽器提示即將推出的動畫。謹慎使用 — 過度使用會增加記憶體消耗：

.animated-element {
  will-change: transform, opacity;
}

/* Remove after animation completes */
.animated-element.done {
  will-change: auto;
}

內容可見性

對於包含多個部分的長頁面，content-visibility: auto允許瀏覽器完全跳過渲染離屏內容：

.blog-post-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

結論

構建令人驚歎的 Web 介面是一門融合視覺設計和技術的藝術技能和對使用者的同理心。現代 CSS 提供了強大的佈局系統、流暢的設計技術和效能最佳化。 React 的元件模型可以輕鬆地將樣式、行為和可訪問性封裝到可重用的構建塊中。透過將這些技術與深思熟慮的動畫、強大的可訪問性實踐和結構良好的設計系統相結合，您可以建立不僅美觀而且快速、可訪問和可維護的介面。從設計令牌和佈局基元的堅實基礎開始，互動性和動畫層，跨裝置和輔助技術進行測試，並根據真實使用者反饋進行迭代。