New Best Practice
Sign In

Do not @import CSS using a URL

Monday, December 2, 2019

When using the CSS @import rule with a URL the CSS file is fetched via a network request. Be default, browsers treat CSS as render blocking resources. This means that the rendering of the page will not occur until all render blocking activities are complete.

When fetching CSS via a network request, the user must wait until the network request is complete and the CSS Object Model (CSSOM) is constructed. This can cause a delay to the page's first meaningful paint (FMP), and subsequently, to the page's time to interactivity (TTI). Both of these metrics are critical to analyzing the performance of your site, and can further have an impact on user engagement, search engine optimization (SEO) and potentially reduced search engine results page (SERP) ranking.

Code Examples

@import url('/typography.css');

avoid: avoid importing CSS using a URL

@import './styles/base';
@import './styles/typography';

do: Import Scss or LESS partials using the @import rule

Instructions

  • Do:

    use the @import rule with Scss and LESS to import stylesheet partials

  • Avoid:

    using the CSS @import rule to fetch a stylesheet via a URL

Brian Love

Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.

Google Developers Expert

Discussions are healthy ❤️