css-architecture by aj-geddes/useful-ai-prompts
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill css-architecture通过使用 BEM(块元素修饰符)、SMACSS 和 CSS-in-JS 等方法论,结合适当的组织和约定,构建可维护的 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 开发者,精准高效
| 指南 | 内容 |
|---|
| BEM (Block Element Modifier) Pattern | BEM(块元素修饰符)模式 |
| SMACSS (Scalable and Modular Architecture for CSS) | SMACSS(可扩展和模块化的 CSS 架构) |
| CSS-in-JS with Styled Components | 使用 Styled Components 的 CSS-in-JS |
| CSS Variables (Custom Properties) | CSS 变量(自定义属性) |
| Utility-First CSS (Tailwind Pattern) | 实用优先 CSS(Tailwind 模式) |
每周安装次数
316
代码仓库
GitHub 星标数
127
首次出现
Jan 21, 2026
安全审计
安装于
opencode271
gemini-cli264
codex258
github-copilot232
cursor214
claude-code212
Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions.
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)
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) |
Weekly Installs
316
Repository
GitHub Stars
127
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode271
gemini-cli264
codex258
github-copilot232
cursor214
claude-code212
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装