Reviewed July 2026. This article was substantially updated to reflect current web standards and practices.
The title reflects an earlier moment when 'CSS3' described a new generation of browser capabilities. CSS is no longer released as one numbered package. Individual modules evolve at different speeds, and current browsers support a far broader set of layout and design tools.
Modern layout tools
Flexbox handles one-dimensional alignment and distribution. Grid handles two-dimensional page and component layouts. Logical properties adapt spacing and alignment to writing modes, while gap provides consistent space without fragile margin rules.
Responsive components
Media queries still adapt a page to viewport and user preferences. Container queries let a component respond to the space it actually receives. Functions such as min(), max(), and clamp() make dimensions flexible without tying every decision to a breakpoint.
Maintainable systems
Custom properties create reusable design tokens. Cascade layers can control the order of resets, components, and utilities. Modern color, typography, aspect-ratio, and selector features reduce the need for heavy scripts or repetitive markup.
Progressive enhancement still matters
Start with resilient HTML and a readable base style. Add newer CSS where it improves the experience, check the browser support required by the audience, and provide a reasonable fallback when a feature is not available.
Choosing the right modern CSS tool
Use Flexbox when items need to align or distribute along one main axis, such as a toolbar or navigation row. Use Grid when rows and columns need to coordinate, such as a page shell, gallery, or comparison area. A component may use both at different levels. Choose the model that represents the relationship instead of forcing every layout through one technique.
Use media queries for viewport capabilities and user preferences. Use container queries when a reusable component should adapt to its local space. Feature queries can provide an enhanced rule only when the browser supports it. Logical properties make components more adaptable to different writing directions.
Control the cascade before it controls the project
Keep selectors as simple as the component contract allows. Store recurring values in custom properties, organize styles into intentional layers, and avoid using !important as routine conflict resolution. When a rule does not apply, inspect origin, layer, specificity, scope, source order, and inheritance in developer tools.
Performance and accessibility considerations
- Animate opacity and transforms carefully, and respect reduced-motion preferences.
- Reserve space for images and embedded media to reduce layout shifts.
- Use visible focus states instead of removing outlines.
- Maintain contrast across hover, active, disabled, and error states.
- Avoid fixed heights for containers that may receive longer or translated text.
- Test print, zoom, forced colors, and touch targets when relevant.
Modern CSS can replace many script-heavy layout and visual effects, but simpler code is only an advantage when the result remains understandable and testable.