CSS-in-JS 与高级布局技巧

00:00

6 min Advanced 2026/5/3

css css-layout

CSS-in-JS方案与Grid高级布局

1. CSS-in-JS 概述

CSS-in-JS 是一种将 CSS 样式直接写在 JavaScript 代码中的方法，它允许开发者使用 JavaScript 的全部能力来管理样式，包括动态样式、条件样式和主题管理。

核心优势

组件级样式：样式与组件紧密耦合
动态样式：使用 JavaScript 变量和逻辑生成样式
消除样式冲突：自动生成唯一的类名
主题管理：通过 JavaScript 轻松实现主题切换
类型安全：在 TypeScript 中获得类型提示

2. 主流 CSS-in-JS 库

2.1 styled-components

安装

 npm install styled-components

基本使用

 import styled from 'styled-components';
 const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 8px 16px;
  border: 1px solid blue;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
  background: ${props => props.primary ? 'darkblue' : 'lightblue'};
  }
 `;
 // 使用组件
 <Button primary>Primary Button</Button>
 <Button>Secondary Button</Button>

2.2 Emotion

安装

 npm install @emotion/react @emotion/styled

基本使用

import styled from '@emotion/styled';
const Card = styled.div`
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 16px;
`;
const Title = styled.h2`
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 8px;
`;
// 使用组件
<Card>
  <Title>Card Title</Title>
  <p>Card content</p>
</Card>;

2.3 JSS

安装

 npm install jss

基本使用

import jss from 'jss';
import preset from 'jss-preset-default';
// 初始化 JSS
jss.setup(preset());
// 创建样式
const styles = {
  button: {
    background: 'blue',
    color: 'white',
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    '&:hover': {
      background: 'darkblue',
    },
  },
};
// 应用样式
const { classes } = jss.createStyleSheet(styles).attach();
// 使用样式
document.body.innerHTML = `<button class="${classes.button}">Click me</button>`;

3. 高级 Grid 布局技巧

3.1 网格模板区域

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100vh;
}
.header {
  grid-area: header;
  background: #f0f0f0;
  padding: 16px;
}
.sidebar {
  grid-area: sidebar;
  background: #e0e0e0;
  padding: 16px;
}
.main {
  grid-area: main;
  background: #ffffff;
  padding: 16px;
}
.footer {
  grid-area: footer;
  background: #f0f0f0;
  padding: 16px;
}

3.2 响应式 Grid

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
/* 不同屏幕尺寸的调整 */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 480px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

3.3 网格项定位

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 100px);
  gap: 10px;
}
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: red;
}
.item-2 {
  grid-column: 3 / 6;
  grid-row: 1 / 2;
  background: blue;
}
.item-3 {
  grid-column: 1 / 2;
  grid-row: 3 / 6;
  background: green;
}
.item-4 {
  grid-column: 2 / 6;
  grid-row: 2 / 6;
  background: yellow;
}

4. Flexbox 高级技巧

4.1 复杂 Flex 布局

.complex-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex: 1 1 300px; /* 增长因子 1, 收缩因子 1, 基础宽度 300px */
  min-width: 200px;
  background: #f0f0f0;
  padding: 16px;
  border-radius: 8px;
}
/* 特殊项目 */
.item.special {
  flex: 2 1 400px; /* 占据更多空间 */
  background: #e0e0e0;
}

4.2 Flexbox 居中技巧

/* 水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}
/* 垂直居中 */
.vertical-center {
  display: flex;
  align-items: center;
  height: 200px;
}
/* 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
/* 多项目居中 */
.multi-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

5. 自定义属性 (CSS Variables)

5.1 基本使用

 :
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333333;
  --border-radius: 8px;
  --spacing: 16px;
 }
 .button {
  background: var(--primary-color);
  color: white;
  padding: var(--spacing);
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
 }
 .card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
 }

5.2 主题切换

 :
  /* 浅色主题 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f0f0f0;
 }
 .dark-theme {
  /* 深色主题 */
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --card-bg: #1e1e1e;
 }
 body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
 }
 .card {
  background: var(--card-bg);
  transition: background 0.3s;
 }

6. 动画与过渡

6.1 CSS 动画

/* 定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 使用动画 */
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
/* 复杂动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  animation: pulse 2s infinite;
}

6.2 过渡效果

.transition-example {
  background: blue;
  color: white;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.transition-example:hover {
  background: darkblue;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* 多重过渡 */
.multiple-transitions {
  background: blue;
  color: white;
  padding: 16px;
  border-radius: 8px;
  transition:
    background 0.3s ease,
    transform 0.5s ease,
    box-shadow 0.3s ease;
}
.multiple-transitions:hover {
  background: darkblue;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

7. 性能优化

7.1 CSS 性能优化

减少选择器复杂度：避免深层嵌套选择器
使用 CSS 变量：减少重复代码
避免使用 @import：使用 link 标签代替
压缩 CSS：减少文件大小
使用 CSS Modules：避免样式冲突
关键 CSS：将首屏关键样式内联

7.2 渲染性能

避免重排：减少 DOM 操作
使用 will-change：提示浏览器优化
GPU 加速：使用 transform 和 opacity
避免布局抖动：批量 DOM 操作

/* 提示浏览器优化 */
.optimized {
  will-change: transform;
  transition: transform 0.3s;
}
/* GPU 加速 */
.gpu-accelerated {
  transform: translateZ(0); /* 触发 GPU 加速 */
}

8. 响应式设计高级技巧

8.1 移动优先设计

/* 移动优先基础样式 */
.container {
  width: 100%;
  padding: 16px;
}
/* 平板设备 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
  }
}
/* 桌面设备 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    padding: 32px;
  }
}
/* 大屏幕设备 */
@media (min-width: 1280px) {
  .container {
    max-width: 1140px;
  }
}

8.2 响应式断点策略

断点	设备类型	宽度范围
xs	超小屏幕	< 576px
sm	小屏幕	576px - 767px
md	中等屏幕	768px - 991px
lg	大屏幕	992px - 1199px
xl	超大屏幕	≥ 1200px

8.3 响应式图片

<!-- 响应式图片 -->
<img
  src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  alt="Responsive image"
/>
<!-- 不同屏幕尺寸的图片 -->
<picture>
  <source media="(max-width: 768px)" srcset="mobile.jpg" />
  <source media="(min-width: 769px)" srcset="desktop.jpg" />
  <img src="fallback.jpg" alt="Responsive image" />
</picture>

9. 工具与框架

9.1 CSS 预处理器

Sass/SCSS：功能丰富的预处理器
Less：简洁易用的预处理器
Stylus：灵活的预处理器

9.2 CSS 框架

Tailwind CSS：实用优先的工具类框架
Bootstrap：全面的 UI 框架
Bulma：现代 CSS 框架
Foundation：响应式前端框架

9.3 开发工具

PostCSS：CSS 处理工具
Autoprefixer：自动添加浏览器前缀
PurgeCSS：移除未使用的 CSS
Stylelint：CSS 代码检查

10. 最佳实践

组件化：将样式与组件紧密结合
命名规范：使用 BEM 或 SMACSS 等命名规范
模块化：将样式按功能模块组织
可维护性：编写清晰、可维护的 CSS
性能：关注 CSS 性能，避免不必要的样式
兼容性：考虑浏览器兼容性
文档：为复杂样式添加注释和文档

11. 项目实战

11.1 CSS-in-JS 项目结构

 css-in-js-project/
 ├── components/
 │ ├── Button/
 │ │ ├── Button.jsx
 │ │ └── styles.js
 │ ├── Card/
 │ │ ├── Card.jsx
 │ │ └── styles.js
 │ └── Header/
 │ ├── Header.jsx
 │ └── styles.js
 ├── styles/
 │ ├── theme.js
 │ └── globalStyles.js
 ├── App.jsx
 └── index.js

11.2 高级布局项目

 advanced-layouts/
 ├── css/
 │ ├── grid-layouts.css
 │ ├── flexbox-layouts.css
 │ ├── responsive.css
 │ └── animations.css
 ├── components/
 │ ├── dashboard.html
 │ ├── gallery.html
 │ └── landing.html
 └── index.html

12. 常见问题与解决方案

12.1 CSS-in-JS 问题

问题：CSS-in-JS 增加了打包体积 解决方案：使用 Tree Shaking，只导入需要的样式问题：运行时性能问题 解决方案：使用静态提取，将样式提取到单独的 CSS 文件

12.2 布局问题

问题：Grid 布局浏览器兼容性 解决方案：提供 Flexbox fallback 问题：响应式设计在某些设备上显示异常 解决方案：使用设备模拟器测试，调整断点

13. 延伸阅读

MDN CSS 文档
CSS Grid 指南
Flexbox 指南
styled-components 文档
Tailwind CSS 文档通过本教程，你已经了解了 CSS-in-JS 和高级布局技巧的核心概念和实践方法。在实际项目中，你可以根据具体需求选择合适的技术方案，创建美观、响应式、高性能的布局。

CSS-in-JS 与高级布局技巧

知识检测

学习进度

学习推荐