Back to Details

css-architecture

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Architecture Skill

CSS架构技能

Implement scalable CSS architecture patterns for maintainable, organized codebases.
为可维护、结构清晰的代码库实现可扩展的CSS架构模式。

Overview

概述

This skill provides atomic, focused guidance on CSS architecture methodologies with practical implementation patterns and migration strategies.
本技能提供关于CSS架构方法论的原子化、针对性指导，包含实用的实现模式和迁移策略。

Skill Metadata

技能元数据

PropertyValue
CategoryOrganization
ComplexityIntermediate to Expert
Dependenciescss-fundamentals
Bonded Agent04-css-architecture
属性值
分类组织管理
复杂度中级到专家级
依赖项css-fundamentals
关联Agent04-css-architecture

Usage

使用方式

Skill("css-architecture")
Skill("css-architecture")

Parameter Schema

参数 Schema

yaml
parameters:
  methodology:
    type: string
    required: true
    enum: [bem, smacss, oocss, itcss, atomic, css-modules]
    description: CSS architecture methodology

  project_size:
    type: string
    required: false
    default: medium
    enum: [small, medium, large, enterprise]
    description: Project scale for appropriate recommendations

  include_tokens:
    type: boolean
    required: false
    default: true
    description: Include design token patterns

validation:
  - rule: methodology_required
    message: "methodology parameter is required"
  - rule: valid_methodology
    message: "methodology must be one of: bem, smacss, oocss, itcss, atomic, css-modules"
yaml
parameters:
  methodology:
    type: string
    required: true
    enum: [bem, smacss, oocss, itcss, atomic, css-modules]
    description: CSS架构方法论

  project_size:
    type: string
    required: false
    default: medium
    enum: [small, medium, large, enterprise]
    description: 项目规模，用于提供适配的建议

  include_tokens:
    type: boolean
    required: false
    default: true
    description: 是否包含设计令牌模式

validation:
  - rule: methodology_required
    message: "必须提供methodology参数"
  - rule: valid_methodology
    message: "methodology必须是以下值之一：bem, smacss, oocss, itcss, atomic, css-modules"

Topics Covered

涵盖主题

BEM (Block Element Modifier)

BEM (Block Element Modifier)

  • Block: Standalone component
  • Element: Part of block (__)
  • Modifier: Variant/state (--)
  • Block：独立组件
  • Element：块的组成部分（__）
  • Modifier：变体/状态（--）

SMACSS

SMACSS

  • Base, Layout, Module, State, Theme
  • 基础层、布局层、模块层、状态层、主题层

ITCSS (Inverted Triangle CSS)

ITCSS (Inverted Triangle CSS)

  • Settings, Tools, Generic, Elements, Objects, Components, Utilities
  • 设置层、工具层、通用层、元素层、对象层、组件层、工具类层

Design Tokens

设计令牌

  • Primitive, semantic, component tokens
  • CSS custom properties organization
  • 基础令牌、语义令牌、组件令牌
  • CSS自定义属性组织

Retry Logic

重试逻辑

yaml
retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
yaml
retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000

Logging & Observability

日志与可观测性

yaml
logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - methodology_distribution
    - project_size_distribution
yaml
logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - methodology_distribution
    - project_size_distribution

Quick Reference

快速参考

BEM Naming

BEM命名规范

css
/* Block */
.card { }

/* Element */
.card__header { }
.card__body { }
.card__footer { }

/* Modifier */
.card--featured { }
.card--compact { }
.card__header--large { }
css
/* Block */
.card { }

/* Element */
.card__header { }
.card__body { }
.card__footer { }

/* Modifier */
.card--featured { }
.card--compact { }
.card__header--large { }

ITCSS Layers

ITCSS分层结构

/styles
├── 1-settings/     → $variables, tokens
├── 2-tools/        → @mixins, functions
├── 3-generic/      → reset, normalize
├── 4-elements/     → h1, p, a (bare HTML)
├── 5-objects/      → .o-grid, .o-container
├── 6-components/   → .c-card, .c-button
└── 7-utilities/    → .u-hidden, .u-text-center
/styles
├── 1-settings/     → $variables, tokens
├── 2-tools/        → @mixins, functions
├── 3-generic/      → reset, normalize
├── 4-elements/     → h1, p, a (bare HTML)
├── 5-objects/      → .o-grid, .o-container
├── 6-components/   → .c-card, .c-button
└── 7-utilities/    → .u-hidden, .u-text-center

Design Token Hierarchy

设计令牌层级

css
/* 1. Primitive Tokens */
:root {
  --color-blue-500: #3b82f6;
  --color-gray-900: #111827;
  --space-4: 1rem;
  --font-size-lg: 1.125rem;
}

/* 2. Semantic Tokens */
:root {
  --color-primary: var(--color-blue-500);
  --color-text: var(--color-gray-900);
  --spacing-md: var(--space-4);
}

/* 3. Component Tokens */
.button {
  --button-bg: var(--color-primary);
  --button-padding: var(--spacing-md);
}
css
/* 1. Primitive Tokens */
:root {
  --color-blue-500: #3b82f6;
  --color-gray-900: #111827;
  --space-4: 1rem;
  --font-size-lg: 1.125rem;
}

/* 2. Semantic Tokens */
:root {
  --color-primary: var(--color-blue-500);
  --color-text: var(--color-gray-900);
  --spacing-md: var(--space-4);
}

/* 3. Component Tokens */
.button {
  --button-bg: var(--color-primary);
  --button-padding: var(--spacing-md);
}

File Structure Templates

文件结构模板

Small Project

小型项目

styles/
├── base.css
├── components.css
├── utilities.css
└── main.css
styles/
├── base.css
├── components.css
├── utilities.css
└── main.css

Medium Project

中型项目

styles/
├── base/
│   ├── reset.css
│   └── typography.css
├── components/
│   ├── button.css
│   └── card.css
├── layouts/
│   └── grid.css
├── utilities/
│   └── helpers.css
└── main.css
styles/
├── base/
│   ├── reset.css
│   └── typography.css
├── components/
│   ├── button.css
│   └── card.css
├── layouts/
│   └── grid.css
├── utilities/
│   └── helpers.css
└── main.css

Large/Enterprise Project

大型/企业级项目

styles/
├── settings/
│   ├── _tokens.scss
│   └── _breakpoints.scss
├── tools/
│   ├── _mixins.scss
│   └── _functions.scss
├── generic/
│   └── _reset.scss
├── elements/
│   └── _typography.scss
├── objects/
│   └── _grid.scss
├── components/
│   ├── _button.scss
│   └── _card.scss
├── utilities/
│   └── _helpers.scss
└── main.scss
styles/
├── settings/
│   ├── _tokens.scss
│   └── _breakpoints.scss
├── tools/
│   ├── _mixins.scss
│   └── _functions.scss
├── generic/
│   └── _reset.scss
├── elements/
│   └── _typography.scss
├── objects/
│   └── _grid.scss
├── components/
│   ├── _button.scss
│   └── _card.scss
├── utilities/
│   └── _helpers.scss
└── main.scss

Naming Convention Comparison

命名规范对比

MethodologyExampleBest For
BEM
.block__element--modifier
Component systems
SMACSS
.l-grid
, 
.is-active
Multi-page sites
OOCSS
.media
, 
.media-body
Reusable patterns
Atomic
.flex
, 
.p-4
, 
.text-center
Utility-first
方法论示例适用场景
BEM
.block__element--modifier
组件系统
SMACSS
.l-grid
, 
.is-active
多页面网站
OOCSS
.media
, 
.media-body
可复用模式
Atomic
.flex
, 
.p-4
, 
.text-center
工具类优先

Test Template

测试模板

javascript
describe('CSS Architecture Skill', () => {
  test('validates methodology parameter', () => {
    expect(() => skill({ methodology: 'invalid' }))
      .toThrow('methodology must be one of: bem, smacss...');
  });

  test('returns BEM examples for bem methodology', () => {
    const result = skill({ methodology: 'bem' });
    expect(result).toContain('__');
    expect(result).toContain('--');
  });

  test('scales recommendations based on project_size', () => {
    const smallResult = skill({ methodology: 'itcss', project_size: 'small' });
    const largeResult = skill({ methodology: 'itcss', project_size: 'large' });
    expect(largeResult.layers).toBeGreaterThan(smallResult.layers);
  });
});
javascript
describe('CSS Architecture Skill', () => {
  test('validates methodology parameter', () => {
    expect(() => skill({ methodology: 'invalid' }))
      .toThrow('methodology must be one of: bem, smacss...');
  });

  test('returns BEM examples for bem methodology', () => {
    const result = skill({ methodology: 'bem' });
    expect(result).toContain('__');
    expect(result).toContain('--');
  });

  test('scales recommendations based on project_size', () => {
    const smallResult = skill({ methodology: 'itcss', project_size: 'small' });
    const largeResult = skill({ methodology: 'itcss', project_size: 'large' });
    expect(largeResult.layers).toBeGreaterThan(smallResult.layers);
  });
});

Error Handling

错误处理

Error CodeCauseRecovery
INVALID_METHODOLOGYUnknown methodologyShow valid options
SIZE_MISMATCHMethodology too complex for project sizeSuggest simpler alternative
TOKEN_CONFLICTConflicting token namesShow naming resolution
错误代码原因恢复方案
INVALID_METHODOLOGY未知的方法论展示有效的可选值
SIZE_MISMATCH方法论对于项目规模过于复杂建议更简单的替代方案
TOKEN_CONFLICT令牌名称冲突展示命名解决方法

Related Skills

相关技能

  • css-fundamentals (prerequisite)
  • css-sass (preprocessor integration)
  • css-tailwind (utility-first approach)
  • css-fundamentals（前置技能）
  • css-sass（预处理器集成）
  • css-tailwind（工具类优先方案）