Css Architecture

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Organize CSS using BEM, SMACSS, and CSS-in-JS patterns. Use when building scalable, maintainable styling systems with proper naming conventions.

Instructions only

CSS Architecture

Table of Contents

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:

css
/* 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:

GuideContents
BEM (Block Element Modifier) Pattern [blocked]BEM (Block Element Modifier) Pattern
SMACSS (Scalable and Modular Architecture for CSS) [blocked]SMACSS (Scalable and Modular Architecture for CSS)
CSS-in-JS with Styled Components [blocked]CSS-in-JS with Styled Components
CSS Variables (Custom Properties) [blocked]CSS Variables (Custom Properties)
Utility-First CSS (Tailwind Pattern) [blocked]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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/css-architectureat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from aj-geddes/useful-ai-prompts

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

Awaiting classification355updated 7 months ago

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

Awaiting classification355updated 7 months ago

Web Performance Optimization

aj-geddes

Guides web performance optimization through code splitting, lazy loading, caching, compression, and monitoring.

Software Development355updated 7 months ago

Vue Application Structure

aj-geddes

Guides structuring Vue 3 applications with the Composition API, component organization, and TypeScript.

Software Development355updated 7 months ago

Visual Regression Testing

aj-geddes

Guides visual regression testing of UI by comparing screenshots across versions to catch unintended visual changes.

Software Development355updated 7 months ago

User Persona Creation

aj-geddes

Creates research-based user personas to guide product design, prioritization and messaging.

Research & Analysis355updated 7 months ago