mcpField
C
css-architecture

css-architecture

github.com/aj-geddes设计与 UI373963 次安装34 周前更新
代码仓库

关于 css-architecture

css-architecture 是一项帮助团队组织和维护 CSS 的技能，适用于大型样式表、组件化项目和设计系统。内容涵盖常见架构方法与样式模式，并提供相应参考指南。

主要功能

  1. 01BEM 与 SMACSS 模式
  2. 02使用 Styled Components 的 CSS-in-JS
  3. 03CSS 变量与实用优先 CSS
  4. 04编码规范与可维护性指导

适用场景

  1. 01整理大型项目的样式表
  2. 02开发组件化样式
  3. 03构建设计系统
  4. 04统一团队的 CSS 规范

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill css-architecture

安装后在 Claude Code 中输入/css-architecture确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
bem-block-element-modifier-pattern.md
css-in-js-with-styled-components.md
css-variables-custom-properties.md
smacss-scalable-and-modular-architecture-for-css.md
utility-first-css-tailwind-pattern.md
templates/
component-template.tsx

详细介绍

CSS 架构

目录

概述

使用 BEM（块元素修饰符）、SMACSS 和 CSS-in-JS 等方法，以及恰当的组织方式和约定，构建易于维护的 CSS 系统。

适用场景

  • 大型样式表
  • 基于组件的样式设计
  • 设计系统开发
  • 多团队协作
  • CSS 的可扩展性和可复用性

快速开始

最简可运行示例：

/* Block - standalone component */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Element - component part */
.button__icon {
  margin-right: 8px;
  vertical-align: middle;
}

/* Modifier - variant */
.button--primary {
  background-color: #007bff;
  color: white;
}

.button--primary:hover {
  background-color: #0056b3;
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
BEM（块元素修饰符）模式BEM（块元素修饰符）模式
SMACSS（可扩展且模块化的 CSS 架构）SMACSS（可扩展且模块化的 CSS 架构）
使用 Styled Components 的 CSS-in-JS使用 Styled Components 的 CSS-in-JS
CSS 变量（自定义属性）CSS 变量（自定义属性）
实用优先的 CSS（Tailwind 模式）实用优先的 CSS（Tailwind 模式）

最佳实践

✅ 应该做
  • 遵循成熟的模式和约定
  • 编写简洁、易于维护的代码
  • 添加适当的文档
  • 部署前进行充分测试
❌ 不要做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown