CSS架构指南：BEM、SMACSS、CSS-in-JS最佳实践与可维护样式系统构建

css-architecture by aj-geddes/useful-ai-prompts

383 周安装量

151 GitHub Stars

GitHub

安装命令

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

方法论开发代码规范

🇨🇳中文介绍

CSS 架构

概述

通过使用 BEM（块元素修饰符）、SMACSS 和 CSS-in-JS 等方法论，结合适当的组织和约定，构建可维护的 CSS 系统。

使用场景

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

快速开始

最小工作示例：

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

/* Element - 组件的一部分 */
.button__icon {
  margin-right: 8px;
  vertical-align: middle;
}

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

.button--primary:hover {
  background-color: #0056b3;
// ... (完整实现请参阅参考指南)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

CSS Architecture

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions.

When to Use

Large-scale stylesheets
Component-based styling
Design system development
Multiple team collaboration
CSS scalability and reusability

Quick Start

Minimal working example:

/* 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)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
BEM (Block Element Modifier) Pattern	BEM (Block Element Modifier) Pattern
SMACSS (Scalable and Modular Architecture for CSS)	SMACSS (Scalable and Modular Architecture for CSS)
CSS-in-JS with Styled Components	CSS-in-JS with Styled Components
CSS Variables (Custom Properties)	CSS Variables (Custom Properties)
Utility-First CSS (Tailwind Pattern)	Utility-First CSS (Tailwind Pattern)

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Weekly Installs

316

Repository

aj-geddes/usefu…-prompts

GitHub Stars

127

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode271

gemini-cli264

codex258

github-copilot232

cursor214

claude-code212