Back to Details

css

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CSS Development Guidelines

CSS开发指南

Core Principles

核心原则

Write semantic HTML to improve accessibility and SEO
Use CSS for styling, avoiding inline styles
Ensure responsive design using media queries and flexible layouts
Prioritize external stylesheets over inline or embedded styles

编写语义化HTML以提升可访问性和SEO
使用CSS进行样式设计，避免内联样式
利用媒体查询和弹性布局实现响应式设计
优先使用外部样式表，而非内联或嵌入式样式

Layout Techniques

布局技术

Flexbox

Flexbox

Use Flexbox for one-dimensional layouts (rows or columns)
Leverage
```
justify-content
```
and
```
align-items
```
for alignment
Use
```
flex-wrap
```
for responsive wrapping behavior
Prefer
```
gap
```
property over margins for consistent spacing

使用Flexbox实现一维布局（行或列）
借助
```
justify-content
```
和
```
align-items
```
进行对齐
使用
```
flex-wrap
```
实现响应式换行
优先使用
```
gap
```
属性而非外边距来保证间距一致性

Grid

Grid

Use CSS Grid for two-dimensional layouts
Define grid templates with
```
grid-template-columns
```
and
```
grid-template-rows
```
Use
```
grid-area
```
for named template areas
Leverage
```
auto-fit
```
and
```
auto-fill
```
for responsive grids

使用CSS Grid实现二维布局
通过
```
grid-template-columns
```
和
```
grid-template-rows
```
定义网格模板
使用
```
grid-area
```
设置命名模板区域
利用
```
auto-fit
```
和
```
auto-fill
```
实现响应式网格

Units and Typography

单位与排版

Use
```
rem
```
units for typography to respect user preferences
Use
```
em
```
units for component-relative sizing
Avoid
```
px
```
for font sizes; reserve for borders and fixed elements
Implement fluid typography with
```
clamp()
```
when appropriate
Use viewport units (
```
vw
```
,
```
vh
```
) thoughtfully for full-screen layouts

使用
```
rem
```
单位设置字体，以尊重用户偏好
使用
```
em
```
单位进行组件相对尺寸设置
避免使用
```
px
```
设置字体大小；仅用于边框和固定元素
适当情况下使用
```
clamp()
```
实现流体排版
谨慎使用视窗单位（
```
vw
```
,
```
vh
```
）实现全屏布局

CSS Variables (Custom Properties)

CSS Variables（自定义属性）

Define design tokens as CSS variables on
```
:root
```
Use variables for colors, spacing, typography, and shadows
Implement theming by overriding variables in different contexts
Name variables semantically (e.g.,
```
--color-primary
```
,
```
--spacing-md
```
)

在
```
:root
```
上定义设计令牌作为CSS变量
将变量用于颜色、间距、排版和阴影设置
通过在不同上下文中重写变量实现主题切换
语义化命名变量（例如：
```
--color-primary
```
,
```
--spacing-md
```
）

Naming Conventions

命名规范

BEM Methodology

BEM方法论

Block: Standalone component (e.g.,
```
.card
```
)
Element: Part of a block (e.g.,
```
.card__title
```
)
Modifier: Variation of block or element (e.g.,
```
.card--featured
```
)

Block（块）：独立组件（例如：
```
.card
```
）
Element（元素）：块的组成部分（例如：
```
.card__title
```
）
Modifier（修饰符）：块或元素的变体（例如：
```
.card--featured
```
）

Best Practices

最佳实践

Use lowercase with hyphens for class names
Avoid IDs for styling; reserve for JavaScript hooks
Keep specificity low by using single class selectors
Scope styles to components to prevent conflicts

类名使用小写加连字符的格式
避免使用ID进行样式设置；预留作为JavaScript钩子
通过使用单类选择器保持低优先级
为样式设置组件作用域以避免冲突

Specificity Management

优先级管理

Maintain specificity at 0-1-0 (single class) when possible
Avoid
```
!important
```
declarations
Use cascading intentionally, not accidentally
Consider CSS Layers (
```
@layer
```
) for specificity control

尽可能将优先级保持在0-1-0（单类选择器）
避免使用
```
!important
```
声明
有意而非无意地利用层叠特性
考虑使用CSS Layers（
```
@layer
```
）控制优先级

Responsive Design

响应式设计

Implement mobile-first media queries
Use relative units for flexible layouts
Test across multiple viewport sizes
Consider container queries for component-level responsiveness

采用移动端优先的媒体查询
使用相对单位实现弹性布局
在多个视窗尺寸下进行测试
考虑使用容器查询实现组件级响应式设计

Performance

性能优化

Minimize selector complexity
Avoid deeply nested selectors
Use efficient selectors (class over element)
Leverage CSS containment for isolated components
Consider critical CSS for above-the-fold content

最小化选择器复杂度
避免深度嵌套的选择器
使用高效的选择器（类选择器优于元素选择器）
利用CSS containment隔离组件
考虑为首屏内容使用关键CSS

Modern CSS Features

现代CSS特性

Use
```
aspect-ratio
```
for maintaining proportions
Leverage
```
gap
```
in Flexbox and Grid
Use logical properties (
```
margin-inline
```
,
```
padding-block
```
)
Implement smooth transitions with
```
transition
```
property
Use
```
@supports
```
for feature detection

使用
```
aspect-ratio
```
保持比例
在Flexbox和Grid中使用
```
gap
```
使用逻辑属性（
```
margin-inline
```
,
```
padding-block
```
）
利用
```
transition
```
属性实现平滑过渡
使用
```
@supports
```
进行特性检测

Organization

样式表组织

Structure stylesheets logically (base, layout, components, utilities)
Keep files modular and focused
Document complex styles with comments
Use a consistent property order within declarations

按逻辑结构组织样式表（基础样式、布局、组件、工具类）
保持文件模块化且聚焦单一功能
为复杂样式添加注释说明
在声明中保持一致的属性顺序

Browser Compatibility

浏览器兼容性

Use vendor prefixes when necessary (consider Autoprefixer)
Test across target browsers
Provide fallbacks for newer features
Use progressive enhancement approach

必要时使用厂商前缀（可考虑使用Autoprefixer）
在目标浏览器中进行测试
为较新特性提供降级方案
采用渐进增强的开发方式

Accessibility

可访问性

Ensure sufficient color contrast (WCAG AA minimum)
Provide visible focus styles for keyboard navigation
Avoid hiding content in ways that affect screen readers
Use
```
prefers-reduced-motion
```
media query for animations

确保足够的颜色对比度（至少符合WCAG AA标准）
为键盘导航提供可见的焦点样式
避免以影响屏幕阅读器的方式隐藏内容
使用
```
prefers-reduced-motion
```
媒体查询控制动画