dec-css-architecture

仓库创建 2026年7月25日最近提交 1 天前SkillHot 收录 11 小时前

▸ 精选理由

帮助中大型前端项目选型并避免样式随规模失控的实用指南。

这个 Skill 做什么

提供可扩展的 CSS 命名与响应式架构方案及实战建议。

提供可扩展的 CSS 命名与响应式架构方案，包括 BEM、ITCSS、CUBE CSS，以及移动优先、clamp() 流式字号和 container queries 等实战技巧。用在要搭建长期维护的样式体系、选方法或拆分组件响应性时，帮你布局层级与命名规则。侧重工程化落地和可维护性，给出可执行的取舍建议。

▸ 展开 SKILL.md 英文原文

CSS and styling architecture — scaling methodologies (BEM, ITCSS, CUBE CSS) and fluid/responsive technique (mobile-first, clamp() fluid type/space, container queries for component-level responsiveness). Use when structuring stylesheets at scale, choosing a CSS methodology, building responsive layouts, or deciding between media queries and container queries.

开发编程CSS架构响应式规模化通用

Stars

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/css-architecture/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/css-architecture/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# CSS / Styling Architecture

How to keep styles scalable and responsive without a utility-first system doing it for you.

- **Methodologies:** **BEM** (block__element--modifier naming), **ITCSS** (inverted-triangle layering by specificity/reach), and **CUBE CSS** (Composition, Utility, Block, Exception) for scaling stylesheets when *not* on a utility-first framework.
- **Fluid & Responsive:**
  - **Mobile-first** — start from the smallest viewport, layer up.
  - **`clamp()`** — fluid type and space that scale between a min and max without breakpoints.
  - **Container queries** — component-level responsiveness based on the *container's* size, not the viewport. The component adapts wherever i

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有