skills.rest
HungNth
HungNthCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/HungNth/wordpress-notify-nth --skill css-architecture
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
pontschopontscho
1

p:css-guidelines

Centralizes CSS conventions with tokens, naming rules, and modular patterns for frontend projects.

Community
Advanced
ViewableGravyViewableGravy

css_classname-naming

Enforce camelCase CSS class naming in React CSS Modules.

Community
Basic
gaebalaigaebalai
8

kiro-validate-impl

Validate feature-level integration across all implemented tasks with full test suite checks.

Community
Advanced
maxrittermaxritter
1.8k

Frontend CSS Standards

Enforce consistent CSS standards across React, Vue, and Svelte components.

Community
Intermediate