@import의 사용

@import는 CSS 파일 내에 다른 CSS 파일을 포함시키기 위해 사용됩니다.

@import url(more.css);
@import url(andmore.css);

a {
    color: black;
}

위를 보면 스타일 시트가 시작하고 바로 2개의 스타일 시트를 더 추가시키고 있습니다. 브라우저가 이 코드들을 파싱할 때, 두 개의 @import 앞에서 한번씩 멈춰서 입력된 파일을 내려받게 됩니다. 이 때 브라우저는 이 다운로드가 끝나기 전에는 다른 스타일 시트를 내려받을 수 없게 되고, CSS를 동시에 병렬로 다운로드 받을 수 없게 됩니다.

@import를 대신할 수 있는 두가지 방법은 다음과 같습니다.

1. 배포전에 CSS 파일을 연결시켜주는 빌드 시스템 활용
2. 여러 개의 <link> 태그를 이용하여 병렬로 다운로드 받을 수 있게 하는 방법

규칙 상세설명

규칙(Rule) ID: import

이 규칙은 다음과 같이 CSS에 @import가 이용되고 있으면 검토를 요구합니다.

@import url(foo.css);

조금 더 살펴보기

• Don't use @import

---

원문: https://github.com/stubbornella/csslint/wiki/Disallow-%40import