CSS Custom Properties (Variables)

CSS variables enable consistent, maintainable styling:

• Define in :root for global scope
• Access with var(--variable-name)
• Can be modified with JavaScript
• Perfect for theming and design tokens
• Example: --primary-color: #3b82f6;

CSS Grid Layout

Powerful two-dimensional layout system:

• Define grid with display: grid
• Create columns and rows with grid-template
• Place items using line numbers or named areas
• Responsive without media queries (auto-fit, minmax)
• Gap property for consistent spacing

Flexbox Techniques

Essential for one-dimensional layouts:

• Perfect for navigation bars and card layouts
• Use flex-grow, flex-shrink, flex-basis
• Align items with justify-content and align-items
• Flex-wrap for responsive behavior
• Order property for visual rearrangement

Logical Properties

For direction-agnostic layouts:

• margin-inline-start instead of margin-left
• padding-block-end instead of padding-bottom
• Works with RTL languages automatically
• Future-proofs your layouts

CSS Functions

Powerful functions for dynamic styling:

• clamp() for fluid typography (clamp(1rem, 2vw, 1.5rem))
• min(), max() for responsive values
• calc() for mathematical operations
• var() for accessing custom properties

Pseudo-elements and Pseudo-classes

Advanced styling without extra HTML:

• ::before and ::after for decorative elements
• :focus-visible for keyboard focus styles
• :is() and :where() for simpler selectors
• :has() for parent selection (coming soon)

CSS Transitions and Animations

Bring interfaces to life with motion:

• transition for simple state changes
• @keyframes for complex animations
• prefers-reduced-motion for accessibility
• Use transforms for performance (GPU accelerated)