【CSS】实战与规范

个人主页：Guiat
归属专栏：HTML CSS JavaScript

正文

1. CSS 项目规范

1.1 文件组织结构

一个好的 CSS 项目应当有清晰的文件组织结构：

styles/
├── base/              # 基础样式
│   ├── _reset.css     # 重置样式
│   ├── _typography.css# 文字排版
│   └── _variables.css # 变量定义
├── components/        # UI组件
│   ├── _buttons.css   # 按钮组件
│   ├── _cards.css     # 卡片组件
│   └── _forms.css     # 表单组件
├── layouts/           # 布局样式
│   ├── _grid.css      # 网格系统
│   ├── _header.css    # 页头布局
│   └── _footer.css    # 页脚布局
├── pages/             # 页面特定样式
│   ├── _home.css      # 首页样式
│   └── _about.css     # 关于页样式
├── utils/             # 工具类
│   ├── _helpers.css   # 辅助类
│   └── _mixins.css    # 混合宏
└── main.css           # 主入口文件

1.2 命名规范

1.2.1 BEM 命名法

BEM (Block-Element-Modifier) 是一种流行的命名规范：

/* Block: 代表独立实体 */
.card {
    background: white;
    border-radius: 4px;
}

/* Element: 代表Block的一部分 */
.card__title {
    font-size: 18px;
}

.card__image {
    width: 100%;
}

/* Modifier: 代表Block或Element的变体 */
.card--featured {
    border: 1px solid gold;
}

.card__title--large {
    font-size: 24px;
}

1.2.2 命名空间前缀

使用命名空间前缀增强类名的语义：

/* 组件 (c-) */
.c-card { ... }

/* 布局 (l-) */
.l-grid { ... }

/* 工具类 (u-) */
.u-hidden { ... }

/* 状态类 (is-, has-) */
.is-active { ... }
.has-error { ... }

/* JavaScript钩子 (js-) */
.js-toggle-menu { ... } /* 不包含样式，只用于JS选择 */

2. CSS 架构模式

2.1 ITCSS (Inverted Triangle CSS)

ITCSS 是一种从通用到特定的 CSS 组织方法：

/* 1. 设置 - 预处理器变量、字体定义等 */
:root {
    --primary-color: #3498db;
    --text-color: #333;
}

/* 2. 工具 - 混合宏、函数等 */
@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. 通用样式 - CSS重置或标准化 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 4. 元素 - 裸HTML元素样式 */
h1 {
    margin-bottom: 1em;
    font-size: 2rem;
}

/* 5. 对象 - 设计模式, 无装饰的UI组件 */
.o-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 6. 组件 - 特定UI组件 */
.c-button {
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
}

/* 7. 工具类 - 辅助类 */
.u-text-center {
    text-align: center !important;
}

2.2 SMACSS (Scalable and Modular Architecture for CSS)

SMACSS 将 CSS 分为五类：

/* 1. 基础规则 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 2. 布局规则 */
.layout-header {
    height: 80px;
}

.layout-sidebar {
    width: 250px;
}

/* 3. 模块规则 */
.nav { ... }
.nav-item { ... }

/* 4. 状态规则 */
.is-hidden { display: none; }
.is-expanded { height: auto; }

/* 5. 主题规则 */
.theme-dark .nav {
    background-color: #333;
    color: white;
}

3. CSS 最佳实践

3.1 代码规范

/* 良好的代码格式 */
.selector {
    /* 按字母顺序或类型分组属性 */
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    font-size: 16px;
    margin: 0;
    padding: 15px;
}

/* 使用简写属性 */
.concise {
    /* 推荐 */
    margin: 10px 15px;
    
    /* 避免 */
    /* margin-top: 10px; */
    /* margin-right: 15px; */
    /* margin-bottom: 10px; */
    /* margin-left: 15px; */
}

/* 保持一致的缩进（通常2或4空格） */
.parent {
    position: relative;
}
    .child {
        position: absolute;
        top: 0;
    }

3.2 注释规范

/* ==========================================================================
   组件：按钮
   ========================================================================== */

/**
 * 按钮组件
 * 
 * 提供标准按钮样式和状态变化。
 * 
 * 1. 设置固定高度确保一致性
 * 2. 使用em单位使内边距随字体大小变化
 * 3. 防止内容溢出
 */
.button {
    display: inline-block;
    height: 40px; /* [1] */
    padding: 0 1em; /* [2] */
    overflow: hidden; /* [3] */
    
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
}

/* 按钮尺寸变体 */
.button--small {
    height: 30px;
    line-height: 30px;
    font-size: 0.85em;
}

/* TODO: 添加禁用状态样式 */

3.3 避免的做法

/* 避免使用 !important（除非绝对必要） */
.override {
    color: red !important; /* 避免 */
}

/* 避免过度嵌套（不超过3层） */
.bad .practice .too .deep .nesting { /* 避免 */ }

/* 避免使用通配符选择器 */
* { margin: 0; } /* 会导致性能问题 */

/* 避免内联样式 */
<!-- 避免这种做法 -->
<div style="margin-top: 20px; color: blue;">内容</div>

/* 避免使用ID选择器（难以覆盖） */
#specific-element { /* 避免 */ }

/* 避免使用数字命名 */
.col1, .col2, .col3 { /* 避免 */ }

4. 响应式设计最佳实践

4.1 移动优先设计

/* 基本样式（针对最小屏幕） */
.container {
    padding: 15px;
}

.card {
    margin-bottom: 15px;
}

/* 在更大屏幕上修改样式 */
@media (min-width: 768px) {
    .container {
        padding: 30px;
    }
    
    .card {
        margin-bottom: 30px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
        margin: 0 auto;
    }
}

4.2 断点规范

/* 定义标准断点变量 */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* 小屏幕（默认） */
.element {
    width: 100%;
}

/* 中等屏幕 */
@media (min-width: 768px) {
    .element {
        width: 50%;
    }
}

/* 大屏幕 */
@media (min-width: 992px) {
    .element {
        width: 33.333%;
    }
}

/* 超大屏幕 */
@media (min-width: 1200px) {
    .element {
        width: 25%;
    }
}

4.3 内容断点

根据内容需求而非设备设置断点：

/* 当内容需要更多空间时调整布局 */
.card-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 0 0 100%;
}

/* 当容器宽度允许两列时改变布局 */
@media (min-width: 600px) {
    .card {
        flex: 0 0 calc(50% - 15px);
        margin-right: 15px;
    }
    
    .card:nth-child(2n) {
        margin-right: 0;
    }
}

/* 当内容适合三列时再次调整 */
@media (min-width: 900px) {
    .card {
        flex: 0 0 calc(33.333% - 20px);
        margin-right: 15px;
    }
    
    .card:nth-child(2n) {
        margin-right: 15px;
    }
    
    .card:nth-child(3n) {
        margin-right: 0;
    }
}

5. CSS 性能优化实践

5.1 选择器优化

/* 低效选择器 */
body .content article p span a { ... } /* 避免深度嵌套 */

/* 优化后 */
.content-link { ... } /* 直接指向目标元素 */

/* 避免通配符 */
.container * { ... } /* 性能差 */

/* 优化后 */
.container > * { ... } /* 限制一级子元素 */

5.2 减少重排和重绘

/* 触发重排的属性变化 */
.inefficient:hover {
    width: 120px; /* 触发重排 */
    height: 150px; /* 触发重排 */
    margin: 20px; /* 触发重排 */
}

/* 优化后使用transform */
.efficient:hover {
    transform: scale(1.1); /* 只触发合成 */
}

/* 批量DOM操作 */
.batch-change {
    /* 一次性应用所有变换 */
    transform: translateX(10px) scale(1.2) rotate(5deg);
}

5.3 使用硬件加速

/* 启用硬件加速 */
.hardware-accelerated {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* 动画元素使用absolute/fixed定位 */
.animated-element {
    position: absolute;
    animation: slide-in 0.5s ease-out;
}

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

6. 跨浏览器兼容

6.1 前缀策略

/* 手动添加前缀（不推荐） */
.with-prefixes {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/* 推荐使用Autoprefixer等工具自动添加 */

/* 使用@supports检测特性 */
@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* 提供回退方案 */
.container {
    display: flex;
    flex-wrap: wrap;
}

@supports (display: grid) {
    .container {
        display: grid;
    }
}

6.2 渐进增强与优雅降级

/* 基础样式（所有浏览器） */
.button {
    display: inline-block;
    padding: 10px 15px;
    background-color: blue;
    color: white;
}

/* 增强样式（现代浏览器） */
.button {
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.button:hover {
    transform: translateY(-2px);
}

/* 处理IE11特殊情况 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flex-container {
        display: block; /* IE11回退 */
    }
    
    .flex-item {
        display: inline-block;
        width: calc(33.333% - 20px);
    }
}

7. CSS 预处理器最佳实践

7.1 SCSS/SASS 规范

// 变量命名
$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-size-base: 16px;
$spacing-unit: 8px;

// 嵌套（不超过3层）
.header {
    background-color: $color-primary;
    
    .nav {
        display: flex;
        
        &__item { // BEM语法
            padding: $spacing-unit * 2;
            
            &--active {
                font-weight: bold;
            }
        }
    }
}

// 混合宏
@mixin button-variant($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    
    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

.button-primary {
    @include button-variant($color-primary, white);
}

.button-secondary {
    @include button-variant($color-secondary, white);
}

// 扩展/继承
%card-base {
    border-radius: 4px;
    padding: $spacing-unit * 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-product {
    @extend %card-base;
    background-color: white;
}

.card-feature {
    @extend %card-base;
    background-color: $color-secondary;
    color: white;
}

7.2 模块化与文件组织

// _variables.scss
$color-primary: #3498db;
$breakpoints: (
    small: 576px,
    medium: 768px,
    large: 992px,
    xlarge: 1200px
);

// _mixins.scss
@mixin respond-to($breakpoint) {
    $size: map-get($breakpoints, $breakpoint);
    
    @if $size {
        @media (min-width: $size) {
            @content;
        }
    }
}

// _buttons.scss
@import 'variables';
@import 'mixins';

.button {
    // 基础样式
    
    @include respond-to(medium) {
        // 中等屏幕样式
    }
}

// main.scss
@import 'variables';
@import 'mixins';
@import 'reset';
@import 'typography';
@import 'buttons';
@import 'forms';
// 等等

8. 现代CSS功能使用

8.1 CSS变量

:root {
    /* 全局变量 */
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --spacing-unit: 8px;
    
    /* 计算值 */
    --container-padding: calc(var(--spacing-unit) * 2);
    --header-height: 60px;
}

.header {
    height: var(--header-height);
    background-color: var(--color-primary);
    padding: 0 var(--container-padding);
}

/* 局部作用域变量 */
.card {
    --card-padding: var(--spacing-unit) * 3;
    padding: var(--card-padding);
}

/* 媒体查询中修改变量 */
@media (min-width: 768px) {
    :root {
        --header-height: 80px;
        --container-padding: calc(var(--spacing-unit) * 3);
    }
}

/* 状态变化 */
.button {
    background-color: var(--color-primary);
}

.button:hover {
    --color-primary: #2980b9; /* 局部覆盖变量 */
}

8.2 CSS Grid布局

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    padding: 20px;
}

.header {
    grid-column: 1 / -1; /* 横跨所有列 */
}

.main-content {
    grid-column: 1 / span 2; /* 占据2列 */
}

.sidebar {
    grid-column: 3 / 4; /* 占据第3列 */
}

.footer {
    grid-column: 1 / -1; /* 横跨所有列 */
}

/* 响应式布局 */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    .main-content,
    .sidebar {
        grid-column: 1 / 2;
    }
}

9. 实战项目结构示例

9.1 完整项目文件组织

src/
├── styles/
│   ├── abstracts/
│   │   ├── _variables.scss   # 全局变量
│   │   ├── _functions.scss   # 全局函数
│   │   ├── _mixins.scss      # 全局混合宏
│   │   └── _index.scss       # 导出所有抽象文件
│   ├── base/
│   │   ├── _reset.scss       # CSS重置/标准化
│   │   ├── _typography.scss  # 排版规则
│   │   ├── _animations.scss  # 全局动画
│   │   └── _index.scss       # 导出所有基础文件
│   ├── components/
│   │   ├── _buttons.scss     # 按钮组件
│   │   ├── _cards.scss       # 卡片组件
│   │   ├── _forms.scss       # 表单组件
│   │   └── _index.scss       # 导出所有组件文件
│   ├── layouts/
│   │   ├── _header.scss      # 头部布局
│   │   ├── _footer.scss      # 底部布局
│   │   ├── _grid.scss        # 网格系统
│   │   └── _index.scss       # 导出所有布局文件
│   ├── pages/
│   │   ├── _home.scss        # 首页样式
│   │   ├── _about.scss       # 关于页样式
│   │   └── _index.scss       # 导出所有页面文件
│   ├── themes/
│   │   ├── _light.scss       # 明亮主题
│   │   ├── _dark.scss        # 暗黑主题
│   │   └── _index.scss       # 导出所有主题文件
│   ├── vendors/
│   │   ├── _normalize.scss   # 第三方CSS标准化库
│   │   └── _index.scss       # 导出所有第三方文件
│   └── main.scss             # 主样式文件

9.2 主入口文件示例

// main.scss

// 1. 导入供应商文件
@import 'vendors/index';

// 2. 导入抽象文件（变量、函数等）
@import 'abstracts/index';

// 3. 导入基础样式
@import 'base/index';

// 4. 导入布局文件
@import 'layouts/index';

// 5. 导入组件样式
@import 'components/index';

// 6. 导入页面特定样式
@import 'pages/index';

// 7. 导入主题
@import 'themes/index';

10. 行业CSS规范与工具

10.1 代码风格工具

// .stylelintrc
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "no-duplicate-selectors": true,
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "selector-combinator-space-after": "always",
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-space-before": "never",
    "declaration-colon-space-after": "always",
    "number-leading-zero": "always",
    "function-url-quotes": "always",
    "comment-whitespace-inside": "always",
    "selector-pseudo-element-colon-notation": "double",
    "selector-pseudo-class-parentheses-space-inside": "never",
    "media-feature-range-operator-space-before": "always",
    "media-feature-range-operator-space-after": "always",
    "media-feature-parentheses-space-inside": "never",
    "media-feature-colon-space-before": "never",
    "media-feature-colon-space-after": "always"
  }
}

10.2 自动化工具

// package.json
{
  "scripts": {
    "lint:css": "stylelint 'src/**/*.{css,scss}'",
    "format:css": "stylelint 'src/**/*.{css,scss}' --fix",
    "prefix": "postcss 'dist/**/*.css' --use autoprefixer --dir 'dist/prefixed/'",
    "minify": "csso dist/style.css --output dist/style.min.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "csso-cli": "^3.0.0",
    "postcss-cli": "^9.0.0",
    "stylelint": "^14.0.0",
    "stylelint-config-standard": "^23.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

10.3 遵循的常见规范

• Airbnb CSS/Sass 风格指南
• Google HTML/CSS 风格指南
• Idiomatic CSS
• CSS Guidelines by Harry Roberts

这些规范提供了有关命名约定、代码格式、注释、文件组织和最佳实践的详细指导。

结语
感谢您的阅读！期待您的一键三连！欢迎指正！