CSS

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. Modern CSS includes powerful features for layout, animations, and responsive design.

Core Concepts:
• Selectors: element, class, ID, attribute, pseudo-class, pseudo-element
• Specificity and cascade: understanding the priority of CSS rules
• Box model: margin, border, padding, content
• Display: block, inline, inline-block, flex, grid
• Positioning: static, relative, absolute, fixed, sticky

Flexbox and CSS Grid are the modern standards for creating responsive layouts.

Flexbox:
• One-dimensional layout (rows or columns)
• Flexible items that grow/shrink
• Alignment: justify-content, align-items, align-self
• Perfect for component layouts, navigation bars

CSS Grid:
• Two-dimensional layout (rows AND columns)
• Template areas and named lines
• Fractional units (fr)
• Complex layouts with minimal markup

Modern CSS includes variables, animations, gradients, and transforms for sophisticated visual effects.

Features:
• Custom Properties (CSS Variables): reusable values, dynamic theming
• Animations & Transitions: smooth visual changes
• Transforms: rotate, scale, translate, skew
• Gradients: linear, radial, conic
• Filters: blur, brightness, contrast, saturation
• Media Queries: responsive design breakpoints

Writing maintainable CSS requires organization, naming conventions, and performance awareness.

Standards:
• BEM (Block Element Modifier) naming convention
• Utility-first frameworks (Tailwind CSS)
• CSS-in-JS for component scoping
• Mobile-first approach
• Performance: minimize repaints, use GPU acceleration
• Accessibility: sufficient color contrast, focus states

/* --- Flexbox Patterns --- */

/* Holy Grail Layout */ .layout { display: flex; flex-direction: column; min-height: 100vh; } .layout main { flex: 1; display: flex; } .layout nav { width: 200px; } .layout article { flex: 1; } .layout aside { width: 160px; }

/* Card row that wraps */ .card-row { display: flex; flex-wrap: wrap; gap: 1rem; } .card-row > * { flex: 1 1 280px; /* grow, shrink, min-width */ }

/* --- CSS Grid Patterns --- */

/* Responsive grid without media queries */ .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(1rem, 3vw, 2rem); }

/* Named areas */ .page { display: grid; grid-template-areas: "header header" "nav main " "nav aside " "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto auto; } header { grid-area: header; } nav { grid-area: nav; } main { grid-area: main; } aside { grid-area: aside; } footer { grid-area: footer; } ```

/* Design token system */
:root {
  /* Primitives */
  --color-blue-500: hsl(217, 91%, 60%);
  --color-blue-600: hsl(217, 91%, 50%);
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);

/* Semantic tokens */ --color-primary: var(--color-blue-500); --color-primary-hover: var(--color-blue-600); --bg-surface: hsl(0, 0%, 100%); --bg-elevated: hsl(210, 40%, 98%); --text-primary: hsl(220, 25%, 10%); --text-muted: hsl(215, 16%, 47%); }

/* Dark theme */ [data-theme="dark"] { --bg-surface: hsl(222, 20%, 10%); --bg-elevated: hsl(222, 20%, 14%); --text-primary: hsl(210, 40%, 98%); --text-muted: hsl(215, 20%, 65%); }

/* Component using tokens */ .card { background: var(--bg-elevated); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); color: var(--text-primary); }

/* Dynamic values with calc() */ .fluid-type { font-size: clamp(1rem, 2.5vw, 2rem); padding: clamp(0.5rem, 2vw, 1.5rem); } ```

/* Transition best practices */
.button {
  /* Only transition specific properties (not 'all') */
  transition: background-color 200ms ease-out,
              transform 150ms ease-out,
              box-shadow 200ms ease-out;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px hsl(217, 91%, 50% / 0.3);
}
.button:active {
  transform: translateY(0);
}

/* CSS Keyframes */ @keyframes fadeInUp { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }

.hero-text { animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Skeleton loading animation */ @keyframes shimmer { to { background-position: 200% center; } }

.skeleton { background: linear-gradient( 90deg, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 97%) 50%, hsl(0, 0%, 90%) 100% ); background-size: 200% auto; animation: shimmer 1.5s linear infinite; border-radius: 4px; }

/* Respect user preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ```