The media attribute of <link> (Media Queries in HTML) and the media list of @import (@import) apply a whole file only while a query matches:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="wide.css" media="(width >= 64rem)">
<link rel="stylesheet" href="print.css" media="print">This saves no bytes: browsers download every stylesheet, but fetch non-matching ones at low priority without letting them block the first render. The cost is maintenance, as one component's rules spread across files, so prefer @media blocks beside each component and keep separate files for print.