css-architecture

Organize CSS architecture using BEM, SMACSS, and CSS-in-JS patterns.

Updated Jan 29, 2026

Search Tags:#architecture #css #design-systems #css-in-js #bem #smacss

Ready to run

npx skills add https://github.com/HungNth/wordpress-notify-nth --skill css-architecture

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: css-architecture
Source: https://github.com/HungNth/wordpress-notify-nth/tree/main/.opencode/skills/css-architecture
Command: npx skills add https://github.com/HungNth/wordpress-notify-nth --skill css-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large CSS codebases become hard to maintain, inconsistent, and slow to evolve, caused by scattered naming and ad-hoc conventions.

Core Features & Use Cases

BEM, SMACSS, and CSS-in-JS patterns provide clear boundaries between blocks, elements, and modifiers.
Designed for design systems, component libraries, and multi-team projects to enforce naming consistency and modularity.
Use case: refactor a shared UI component library to a single naming convention and document guidelines for contributors.

Quick Start

Start by selecting one architecture (for example, BEM) and refactor the core components into blocks with consistent element and modifier naming, then document the conventions for the team.

Frequently Asked Questions about css-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scale CSS architecture for a large multi-team application?▼

Scale CSS architecture by applying BEM, SMACSS, or CSS-in-JS patterns to enforce modular boundaries, consistent naming conventions, and component-level organization across large applications and design systems.

What is the best way to organize CSS for a shared design system?▼

Organize CSS for design systems by adopting BEM to separate blocks, elements, and modifiers, ensuring naming consistency and modularity for all contributing teams and component libraries.

How do I refactor a UI component library to use consistent CSS naming conventions?▼

Refactor a UI component library by selecting an architecture like BEM, restructuring core components into blocks with consistent element and modifier naming, and documenting conventions for contributors.

When do I need BEM or SMACSS patterns in my project?▼

You need BEM or SMACSS patterns when your CSS codebase becomes hard to maintain, inconsistent, and slow to evolve due to scattered naming and ad-hoc conventions in large apps.

Does CSS-in-JS work with BEM and SMACSS for component-level organization?▼

CSS-in-JS works alongside BEM and SMACSS to provide clear boundaries between blocks, elements, and modifiers while enforcing style reuse and modular boundaries in large apps.