CSS-in-JS 是一種將 CSS 樣式直接寫在 JavaScript 或 TypeScript 代碼中的方法，1. 它通過在組件內定義樣式來避免全局沖突；2. 使用庫如 styled-components 或 Emotion 支持動態(tài)樣式、偽類和媒體查詢；3. 提供作用域樣式、動態(tài)定制、代碼共置和主題支持；4. 但存在運行時開銷、包體積增大、SSR 復雜性和學習成本；5. 適用于復雜、動態(tài)的 React 應用，但在簡單項目中傳統 CSS 或 Tailwind 可能更優(yōu)。因此，CSS-in-JS 提供強大組件化樣式方案，但需權衡性能與復雜度。

CSS-in-JS is a styling approach in web development where you write CSS styles directly inside your JavaScript (or TypeScript) code, typically in React applications. Instead of writing styles in separate .css files, you define them as JavaScript objects or use template literals right where your components are defined.

This technique became popular with the rise of component-based frameworks, especially React, because it helps you scope styles to specific components and avoid global CSS conflicts.

How It Works

Instead of this:

/* Button.css */
.button {
  background: blue;
  color: white;
  padding: 10px;
}

You do something like this:

const Button = () => {
  const buttonStyle = {
    background: 'blue',
    color: 'white',
    padding: '10px'
  };

  return <button style={buttonStyle}>Click me</button>;
};

But real CSS-in-JS goes further using libraries that support dynamic styling, pseudo-classes, media queries, and more — things you can't easily do with plain inline styles.

Popular CSS-in-JS Libraries

• Styled-components (uses template literals)

  const StyledButton = styled.button`
    background: blue;
    color: white;
    padding: 10px;
    &:hover {
      background: darkblue;
    }
  `;

• Emotion (supports both object and string styles)

• JSS (generates class names from JavaScript objects)

These libraries generate unique class names and inject CSS into the DOM at runtime, ensuring styles are scoped to the component.

Key Benefits

• Scoped styles: No more worrying about class name collisions.
• Dynamic styling: Easily change styles based on props or state.

  const Button = ({ primary }) => (
    <StyledButton $primary={primary}>Click</StyledButton>
  );

• Co-located code: Styles live right next to the component logic, making it easier to maintain.
• Theming support: Pass theme variables (like colors, fonts) through context.

Common Criticisms

• Runtime overhead: Styles are processed in the browser, which can impact performance.
• Larger bundle size: You're bundling styling logic with JavaScript.
• SSR complexity: Requires extra setup for server-side rendering to avoid flash of unstyled content.
• Learning curve: Adds another layer of abstraction.

When to Use It?

• You're building a complex React app with many reusable components.
• You need highly dynamic or themeable UIs.
• Your team prefers keeping styles close to components.

But if you're building a simpler app or care a lot about performance and minimal JavaScript, traditional CSS, CSS Modules, or utility-first frameworks like Tailwind CSS might be better choices.

Basically, CSS-in-JS gives you powerful, component-scoped styling — but it's not always the simplest or most performant option.

以上是什麼是CSS-In-JS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！