The Master CSS Cheatsheet

A single-page, quick-reference for everything you need during vibe coding sessions and WordPress buildouts.

🎨 Design Tokens Template

:root {
  /* Colors */
  --color-primary:   #6c63ff;
  --color-secondary: #f5a623;
  --color-bg:        #0f0f0f;
  --color-surface:   #1c1c1e;
  --color-text:      #f0f0f0;
  --color-muted:     #888888;
  --color-accent:    #00ff87;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-hero: clamp(2.5rem, 6vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;   --space-2: 0.5rem;
  --space-4: 1rem;      --space-6: 1.5rem;
  --space-8: 2rem;      --space-12: 3rem;

  /* Borders */
  --radius-sm: 4px;    --radius-md: 8px;
  --radius-lg: 16px;   --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.45);

  /* Transitions */
  --ease-fast:   0.15s ease;
  --ease-normal: 0.3s ease;
}

🏗️ CSS Reset (Use Always)

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

📐 Layout Patterns

Flexbox Center

.center { display: flex; align-items: center; justify-content: center; }

Auto Grid (Responsive, No Media Queries)

.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }

Sticky Header

header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); background: rgba(15,15,15,0.85); }

Full-bleed Section

.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

Page Wrapper

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }

✨ Effect Patterns

Card Hover Lift

.card { transition: transform var(--ease-normal), box-shadow var(--ease-normal); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

Glassmorphism

.glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); }

Gradient Text

.gradient-text { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

Button Base

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.75rem; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; border: none; transition: all var(--ease-normal); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-2px); }

Fade In From Bottom (Keyframe)

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }

📱 Quick Responsive Breakpoints

/* Mobile-first */
@media (min-width: 640px)  { /* sm  */ }
@media (min-width: 768px)  { /* md  — tablet */ }
@media (min-width: 1024px) { /* lg  — desktop */ }
@media (min-width: 1280px) { /* xl  — large desktop */ }

🎯 AI Prompt Skeleton

Create a [component] with:
- Layout: [flexbox/grid + arrangement]
- Colors: using var(--color-primary), var(--color-bg), var(--color-text)
- Typography: var(--font-heading) for headings, var(--font-body) for body
- Spacing: use var(--space-*) scale
- Hover: [describe interaction]
- Responsive: mobile-first, breakpoint at 768px
- Naming: BEM-style classes

🔧 WordPress Quick Reference

Task	Location
Global CSS variables	Customizer → Additional CSS
Page-specific CSS	Block → Advanced → Additional CSS
Bricks element CSS	Element → Custom CSS (use %root%)
WC overrides	.woocommerce div.product .target-class
GP nav override	.main-navigation .nav-bar-items a
Child theme global	child-theme/style.css