3.3 Responsive Design Implementation

Media queries should be nested within the components they modify rather than organized in separate files by breakpoint. This keeps all styles for a component together and makes maintenance more straightforward. We avoid mixing min-width and max-width queries to maintain consistency and readability.

.navigation {
    display: none;
    
    @media screen and (min-width: 48rem) {
        display: flex;
        gap: 1rem;
    }
    
    &__item {
        padding: 0.5rem;
        
        @media screen and (min-width: 48rem) {
            padding: 0.75rem 1rem;
        }
    }
}

For WordPress projects, we work within the theme’s existing structure while maintaining these principles. Laravel projects give us more flexibility in asset organization, but we maintain the same component-based approach for consistency across projects.

3.3.1 Print Styles

Print styles should be contained in a single separate stylesheet and linked with a media attribute in the HTML link tag. Browsers have the styles available if a visitor wants to print a page while not loading them in regular browsing experiences.

<link href="/path/to/print.css" media="print" rel="stylesheet" />