
When CSS Becomes a Performance Problem
How excessive selectors and deep nesting affect rendering performance.

Web pages are typically styled for screens, but many applications—reports, invoices, educational resources—need to look just as good on paper. A print-optimized stylesheet ensures that when users hit Ctrl + P, the result is clean, readable, and professional.
@media printPrint styles are placed inside a dedicated media query so they apply only in a print context:
@media print {
/* Print-specific rules here */
}
You can include this block inside your main CSS file or link a separate stylesheet using <link rel="stylesheet" media="print">.
Sidebars, navigation menus, ads, and animations consume ink and clutter the page. Hide them using display:none within the print query.
@media print {
header, nav, footer, .sidebar, .ads {
display: none;
}
}
Multi-column grids often translate poorly to paper. Convert complex layouts to a single, fluid column by resetting widths, floats, or flex properties:
@media print {
.container {
width: 100% !important;
}
.col {
float: none;
width: auto;
}
}
line-height:1.4).@media print {
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
line-height: 1.4;
color: #000;
background: none;
}
}
Hyperlinks become meaningless on paper. Offer visible URLs after links or under a references section:
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 90%;
}
/* Don’t append URL for internal anchors */
a[href^="#"]::after,
a[href^="mailto:"]::after {
content: "";
}
}
Use CSS properties to avoid awkward splits:
page-break-before, page-break-after, page-break-inside (legacy).break-before, break-after, break-inside (modern).@media print {
h2, h3 {
break-after: avoid;
}
.section {
break-inside: avoid;
}
}
Large, high-resolution images bloat print jobs. Consider:
max-width:100% and height:auto.srcset or print media queries.Paged-media CSS modules let you inject repeating content, though support varies. For cross-browser compatibility, many developers rely on the browser’s built-in header/footer settings or generate PDFs using server-side tools that provide full control.
Start with a functional, accessible HTML structure. Add screen styles, then layer print styles to gracefully override. This approach maintains maintainability and avoids conflicts.
@media print or use a dedicated print stylesheet.A thoughtful print stylesheet converts your web content into a polished document with minimal extra work. By following these techniques—hiding clutter, simplifying layouts, controlling pagination, and choosing print-friendly typography—you’ll provide users with a seamless experience whether on screen or on paper.
Let's discuss how I can help bring it to life. I'm happy to answer questions and suggest possible solutions.
Contact me
How excessive selectors and deep nesting affect rendering performance.

Compares rendering strategies with real implementation examples, focusing on SEO impact, scalability, caching strategies, and infrastructure cost.