CSS를 포함하는 가장 좋은 방법은? @import를 사용해야하는 이유

288

기본적으로 나는 사용의 장점 / 목적이 무엇인지 궁금합니다. @import 스타일 시트를 기존 스타일 시트로 가져 오는 데 하고 다른 스타일을 추가하는 .

<link rel="stylesheet" type="text/css" href="" />

문서의 머리에?

html  css 
— 커뮤니티
소스
14
이식성이 가장 먼저 떠 오릅니다. 여러 페이지에 CSS 파일 세트를 포함 시키려면 각 페이지에서
— 개가
1
@xbonez : 그러나 대부분의 이러한 상황에서, 많은 다른 일반적인 HTML이 관여 할 것이므로, 일반적으로 템플릿에서 두 스타일 시트를 연결하는 것이 좋습니다.
— duskwuff -inactive-
6
예전 나쁜 시절에 @import는 "좋은"브라우저 (Netscape 4, IE5)와 나쁜 브라우저 (IE3, N3)를 모두 지원하는 것이 편리했습니다. 요즘에는 거의 쓸모가 없습니다.
— mddw
1
— chharvey
4
<링크>은이다 무효 요소 에 HTML5 , 그래서 ... 당신은 슬래시 같은없이 사용할 수 있습니다 <link rel="stylesheet" type="text/css" href="theme.css">.
— Константин Ван

답변:

334

@import스타일 시트가 동시에 다운로드되는 것을 방지 할 수 있으므로 페이지 속도 관점 에서 CSS 파일의 사용은 거의 사용하지 않아야합니다. 예를 들어, 스타일 시트 A에 텍스트가 포함 된 경우 :

@import url("stylesheetB.css");

그런 다음 첫 번째 스타일 시트가 다운로드 될 때까지 두 번째 스타일 시트의 다운로드가 시작되지 않을 수 있습니다. 반면에 두 스타일 시트가 모두<link> 기본 HTML 페이지의 요소에서 동시에 다운로드 할 수 있습니다. 두 스타일 시트가 항상 함께로드되는 경우 단순히 단일 파일로 결합하는 것이 도움이 될 수 있습니다.

때때로 @import적절한 상황 이 있지만 일반적으로 규칙이 아니라 예외입니다.

— duskwuff-비활성-
소스
46
There are occasionally situations where @import is appropriate사용처럼 @media다른 장치에 다른 스타일을 적용 할 수 있습니다.
— Derek 朕 會 功夫
50
또 다른 이유는 @import스타일 시트 (예 :)에 Google 글꼴 을 추가 하여 해당 스타일 시트를 사용하는 모든 페이지 @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);에 붙여 넣을 필요가 없기 때문 link입니다.
— cayhorstmann
28
궁금한 사람들을 위해 : 내가 가장 좋아하는 용도 중 하나 @import는와 같은 것을 사용하여 빌드 프로세스를 설정했을 때 grunt-concat-css입니다. 개발 과정에서 @import성명서가 작동하고 페이지로드 속도는 중요하지 않습니다. 그런 다음 프로덕션 용으로 빌드 할 때 이와 같은 도구는 모든 CSS 파일을 적절하게 연결하고를 제거합니다 @import. 를 사용하여 JavaScript 파일과 비슷한 작업을 수행합니다 grunt-browserify.
— Brandon
3
@Derek 朕 會 功夫@import장치 특정 스타일을 적용 하는 데 사용하는 <link>경우 미디어 속성이 있는 태그를 사용하지 않는 이유 는 무엇입니까?
— Jomar Sevillejo
1
@MuhammedAsif @import더 빠른 이유는 없습니다 . 아마도 일종의 측정 결과물을보고있을 것입니다.
— duskwuff -inactive-
185

나는 사람들이 너무 동의 할 때 싫어하기 때문에 악마의 옹호자를 할 것입니다.

1. 다른 스타일 시트에 의존하는 스타일 시트가 필요하면 @import를 사용하십시오. 별도의 단계에서 최적화를 수행하십시오.

주어진 시간에 최적화하는 두 가지 변수, 즉 코드의 성능과 개발자 의 성능이 있습니다. 대부분의 경우는 아니지만 대부분의 경우 개발자의 효율성을 높이고 코드의 성능을 향상시키는 것이 더 중요합니다 .

다른 스타일 시트에 의존 하는 하나의 스타일 시트가 있는 경우 가장 논리적으로해야 할 일은 두 개의 별도 파일에 넣고 @import를 사용하는 것입니다. 그것은 코드를 보는 다음 사람에게 가장 논리적으로 의미가 있습니다.

(이러한 의존 관계는 언제 발생합니까? 제 생각에는 아주 드 rare니다. 일반적으로 하나의 스타일 시트로 충분합니다. 그러나 다른 CSS 파일에 물건을 넣을 수있는 논리적 장소가 있습니다.)

  • 테마 : 동일한 페이지에 대해 다른 색 구성표 나 테마가있는 경우 일부 구성 요소는 공유하지만 일부 구성 요소는 공유하지 않을 수 있습니다.
  • 하위 구성 요소 : 고안된 예-메뉴가 포함 된 식당 페이지가 있다고 가정 해보십시오. 메뉴가 나머지 페이지와 매우 다른 경우 자체 파일에 있으면 유지 관리가 더 쉬워집니다.

일반적으로 스타일 시트는 독립적이므로 모두를 사용하여 포함시키는 것이 합리적 <link href>입니다. 그러나 종속 계층 구조 인 경우 가장 논리적으로 수행하는 작업을 수행해야합니다.

파이썬은 수입을 사용합니다; C는 다음을 포함합니다. JavaScript가 필요합니다. CSS는 가져 왔습니다; 필요할 때 사용하십시오!

2. 사이트를 확장해야 할 시점에 도달하면 모든 CSS를 연결하십시오.

여러 CSS 요청 어떤 여부 링크를 통해 또는 @imports을 통해 - - 종류의 나쁜 관행입니다 고성능 웹 사이트. 최적화가 중요한 시점에 도달하면 모든 CSS가 축소기를 통과해야합니다. Cssmin 은 import 문을 결합합니다. @Brandon이 지적했듯이 grunt는 여러 가지 옵션을 제공합니다. ( 이 질문도 참조하십시오 ).

<link>사람들이 지적했듯이 축소 된 단계에 도달하면 더 빠르므로 대부분의 스타일 시트에 연결하고 가능한 경우 @import를 가져 오지 마십시오.

사이트가 생산 규모에 도달하기 전에 코드가 약간 더 빨라지는 것보다 체계적이고 논리적 인 것이 중요합니다.

— 크리스
소스
37
주제에 대한 더 넓은 견해에 기여하는 포인트를 만들면서 '나쁜 남자'를 플레이 한 +1
— harogaston
"링크를 통하거나 @imports를 통해 모든 종류의 여러 CSS 요청은 고성능 웹 사이트에는 좋지 않습니다." 이것은 다중화로 인해 HTTP / 2를 사용할 때 나쁜 습관이 아닙니다.
— gummiost
13

@import속도상의 이유로 CSS를 페이지에 포함 시키지 않는 것이 가장 좋습니다 . 이 우수한 기사를 참조하여 이유를 알아보십시오. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

또한 축소 스크립트는 다른 CSS 파일에서 @import 행을 "제거"할 수 없기 때문에 @import 태그를 통해 제공되는 CSS 파일을 축소하고 결합하기가 더 어렵습니다. <link 태그로 포함하면 기존 축소 PHP / dotnet / java 모듈을 사용하여 축소를 수행 할 수 있습니다.

따라서 : <link />대신 사용하십시오 @import.

— 코엔 피터스
소스
1
예를 들어 grunt를 사용하는 경우 combine을 사용하여 @import를 활용할 수도 있습니다. 그런 다음 가져온 스타일 시트가 포함되어 스타일 시트가됩니다. 어느 쪽이 두 세계를 최대한 활용하는 것입니다.
— bjorsig
11

링크 방법을 사용하면 스타일 시트가 병렬로로드되고 (더 빠르고 빠름) 거의 모든 브라우저가 링크를 지원합니다

import는 추가 CSS 파일을 하나씩 (느리게)로드하고 스타일이없는 컨텐츠의 Flash를 제공 할 수 있습니다.

— 모글리
소스
8

@ 네보 이즈 나드 미쇼 그루 구르

다음은 @import를 사용하는 올바른 방법입니다.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/@import

— 비바 기
소스
7

헤드에 CSS 스타일 시트를 추가하는 것과 가져 오기 기능을 사용하는 것에는 큰 차이가 없습니다. 사용@import 일반적으로 하나가 쉽게 확장 할 수 있도록 스타일 시트를 체인에 사용됩니다. 예를 들어 일반적인 CSS 정의와 함께 다른 색상 레이아웃을 쉽게 교체하는 데 사용할 수 있습니다. 나는 주요 장점 / 목적은 확장 성이라고 말합니다.

이식성 및 유지 관리 성이 추가 이점이라는 xbonez 의견에 동의합니다.

— 트래비스 J
소스
3

그들은 매우 비슷합니다. 어떤 사람들은 @import가 더 관리하기 쉽다고 주장 할 수 있습니다. 그러나 각 @import는 "link"메소드를 사용하는 것과 동일한 방식으로 새 HTTP 요청 비용이 발생합니다. 따라서 속도와 관련하여 더 빠르지 않습니다. 그리고 "duskwuff"가 말했듯이 그것은 동시에로드되지 않으며 이는 몰락입니다.

— 크리스 홀 렌벡
소스
3

@import를 사용하는 한 곳은 영어와 프랑스어의 두 가지 버전의 페이지를 수행 할 때입니다. main.css를 사용하여 내 페이지를 영어로 작성합니다. 프랑스어 버전을 만들면 프랑스어 스타일 시트 (main_fr.css)에 연결됩니다. 프랑스어 스타일 시트 상단에서 main.css를 가져온 다음 프랑스어 버전에서 필요한 부분에 대한 특정 규칙을 재정의합니다.

— 비바 기
소스
3

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 에서 인용

@import 메소드의 주요 목적은 페이지에서 여러 스타일 시트를 사용하지만 <head>에는 하나의 링크 만 사용하는 것입니다. 예를 들어 회사에는 사이트의 모든 페이지에 대한 전역 스타일 시트가있을 수 있으며 하위 섹션에는 해당 하위 섹션에만 적용되는 추가 스타일이 있습니다. 하위 섹션 스타일 시트에 연결하고 해당 스타일 시트의 맨 위에있는 전역 스타일을 가져 오면 사이트 및 모든 하위 섹션에 대한 모든 스타일이 포함 된 거대한 스타일 시트를 유지할 필요가 없습니다. 유일한 요구 사항은 @import 규칙이 나머지 스타일 규칙보다 먼저 와야한다는 것입니다. 그리고 상속은 여전히 ​​문제가 될 수 있습니다.

— 비슈누 라즈 V
소스
3

때로는 inline 대신 @import를 사용해야합니다. 32 개 이상의 CSS 파일이있는 복잡한 응용 프로그램을 작업 중이고 IE9를 지원해야하는 경우에는 선택의 여지가 없습니다. IE9는 처음 31 이후의 CSS 파일을 무시하며 여기에는 인라인 CSS가 포함됩니다. 그러나 각 시트는 31 개를 가져올 수 있습니다.

— 칼
소스
3

@import를 사용해야하는 많은 이유가 있습니다.

@import를 사용하는 강력한 이유 중 하나는 브라우저 간 디자인을 수행하는 것입니다. 가져온 시트는 일반적으로 많은 구형 브라우저에서 숨겨져 있으므로 Netscape 4 이상 시리즈, Mac 용 Internet Explorer 5.2, Opera 6 이상 및 PC 용 IE 3 및 4와 같은 매우 오래된 브라우저에 특정 형식을 적용 할 수 있습니다.

이렇게하려면 base.css 파일에서 다음을 수행 할 수 있습니다.

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

가져온 사용자 정의 시트 (newerbrowsers.css)에서 최신 계단식 스타일을 적용하면됩니다.

html body {
  font-size:1em;
}

"em"단위를 사용하면 글꼴과 디자인이 모두 사용자 설정에 따라 확장 될 수 있기 때문에 "px"단위보다 우수합니다. 이전 브라우저는 픽셀 기반 (보다 엄격하고 브라우저 사용자 설정에서는 변경할 수 없음)에 비해 더 우수합니다. . 가져온 시트는 대부분의 이전 브라우저에서 보이지 않습니다.

누가 신경 쓰겠는지! 더 큰 구식 정부 또는 기업 시스템으로 가보면 여전히 오래된 브라우저가 사용되는 것을 볼 수 있습니다. 그러나 오늘날 정말 좋아하는 브라우저도 언젠가는 구식이 될 것이기 때문에 정말 좋은 디자인입니다. 제한적인 방식으로 CSS를 사용한다는 것은 이제 사이트에서 잘 작동하지 않는 사용자 에이전트 그룹이 점점 더 커지고 있음을 의미합니다.

@import를 사용하면 브라우저 간 웹 사이트 호환성이 99.9 %의 채도에 도달 할 수 있습니다. 이전 브라우저는 가져온 시트를 읽지 못하기 때문입니다. HTML에 간단한 기본 글꼴 세트를 적용 할 수 있지만 최신 에이전트는 고급 CSS를 사용합니다. 이를 통해 최신 데스크탑 브라우저에 필요한 풍부한 시각적 디스플레이를 손상시키지 않으면 서 이전 에이전트가 컨텐츠에 액세스 할 수 있습니다.

최신 브라우저는 웹 사이트를 처음 호출 한 후 HTML 구조와 CSS를 매우 잘 캐시합니다. 서버에 대한 다중 호출은 한 번의 병목 현상이 아닙니다.

스마트 장치에 업로드 된 메가 바이트 및 메가 바이트의 Javascript API 및 JSON과 페이지간에 일관성이없는 HTML 마크 업이 잘못 설계되어 오늘날 느린 렌더링의 주요 동인입니다. 평균적인 Google 뉴스 페이지는 텍스트를 약간만 렌더링하기 위해 6MB 이상의 ECMAScript입니다. 롤

자바 스크립트 서커스 트릭을 통해 조작하고 변경하지 않는 한 브라우저가 일관된 DOM 마크 업과 CSS를 모두 캐시하기 때문에 몇 킬로바이트의 캐시 된 CSS와 더 작은 자바 스크립트 풋 프린트를 가진 일관된 클린 HTML은 사용자 에이전트에서 매우 빠른 속도로 렌더링됩니다.

— 스토 클리
소스
2

이것의 핵심은 실제로 여러 CSS 스타일 시트를 작성하는 두 가지 이유라고 생각합니다.

  1. 웹 사이트의 페이지마다 다른 CSS 정의가 필요하기 때문에 여러 시트를 작성합니다. 또는 적어도 그들 모두가 다른 페이지에 필요한 모든 CSS 정의를 요구하지는 않습니다. 따라서 다른 페이지에로드되는 시트를 최적화하고 너무 많은 CSS 정의를로드하지 않도록 CSS 파일을 분할합니다.
  2. 염두에 두어야 할 두 번째 이유는 CSS가 커지고 처리하기가 어려워지고 큰 CSS 파일을 쉽게 유지 관리하기 위해 여러 CSS 파일로 분할하기 때문입니다.

첫 번째 이유로 추가 <link> 태그가 적용되므로 페이지마다 다른 CSS 파일 세트를로드 할 수 있습니다.

두 번째 이유로 @import 여러 CSS 파일을 가져 오지만로드 된 파일은 항상 동일하므로 명령문이 가장 편리한 것으로 나타납니다.

로딩 시간의 관점에서 다르지 않습니다. 브라우저는 분리 된 CSS 파일을 어떻게 구현하든 상관없이 확인하고 다운로드해야합니다.

— 니트 람
소스
1
"로드 시간의 관점에서 차이가 없습니다. 브라우저는 분리 된 CSS 파일을 어떻게 구현하든 상관없이 확인하고 다운로드해야합니다." 이것은 정확하지 않습니다. 브라우저는 여러 개의 <link> CSS 파일을 병렬로 다운로드 할 수 있지만 @ import CSS 파일의 경우 다운로드, 구문 분석 한 다음 @ import 파일을 다운로드해야합니다. 이 가져온 CSS 파일은 그 자체 @ 가져 오기 파일을 가지고 특히, 페이지로드 속도 아래로 속도가 느려집니다
— cyberspy
2

Eric Meyer의 Reset CSS v2.0과 같은 CSS RESET을 사용하는 경우 CSS에서 @import를 사용하여 CSS를 적용하기 전에 작동하므로 충돌을 방지합니다.

— 사용자 2847941
소스
2

@import는 여러 장치에 대한 코드를 작성할 때 가장 유용하다고 생각합니다. 해당 장치의 스타일 만 포함하도록 조건문을 포함하면 한 장만로드됩니다. 여전히 일반적인 스타일 요소를 추가하기 위해 링크 태그를 사용할 수 있습니다.

— 이단
소스
0

추가 할 수있는 링크 된 스타일 시트의 "높은 피크"를 경험했습니다. 링크 된 자바 스크립트를 여러 개 추가해도 무료 호스트 제공 업체에게는 문제가되지 않았지만 외부 스타일 시트 수를 두 배로 늘린 후에 충돌이 발생했습니다. 올바른 코드 예제는 다음과 같습니다.

@import 'stylesheetB.css';

그래서 Nitram이 언급했듯이 디자인을 하드 코딩하는 동안 좋은 정신지도를 갖는 것이 유용하다는 것을 알았습니다. Godspeed. 그리고 나는 영어 문법 실수가 있다면 용서합니다.

— mggluscevic
소스
-2

가져온 모든 CSS 파일을 개별적으로로드하고 사이트 속도를 크게 저하시킬 수 있으므로 @import를 사용할 이유가 거의 없습니다. CSS를 처리하는 최적의 방법에 관심이 있다면 (페이지 속도와 관련하여) 모든 CSS 코드를 처리해야 합니다.

  • 모든 CSS 파일을 열고 모든 단일 파일의 코드를 복사하십시오.
  • 페이지의 HTML 헤더에있는 단일 STYLE 태그 사이에 모든 코드를 붙여 넣기
  • 코드가 많거나 특정 요구 사항이 없으면 CSS @import 또는 별도의 CSS 파일을 사용하여 CSS를 제공하지 마십시오.

자세한 내용은 여기 : http://www.giftofspeed.com/optimize-css-delivery/

위의 작업이 가장 잘 작동하는 이유는 브라우저에서 처리해야 할 요청이 적고 별도의 파일을 다운로드하는 대신 CSS 렌더링을 즉시 시작할 수 있기 때문입니다.

— 윌리엄 드레스 커
소스
1
"최적화"라는 용어는 매우 좁지 만 유효합니다. 건전성을 위해 게시 단계에서 도구를 사용하여 이러한 종류의 최적화를 달성하십시오. 그때까지는 생각 하고 코딩 하는 데 도움이되는 모든 것을하십시오 .
— Jesse Chisholm
7
대부분의 웹 사이트에는 1 페이지 이상이 있으며 각 웹 사이트는 일반적으로 동일한 CSS를 사용하기 때문에 헤더에 링크 된 CSS 파일을 사용하는 것이 더 빠르지 않습니까? 이렇게하면 한 번 전송 된 다음 브라우저 캐시 (일반적으로 메모리)에서 사용되어 모든 페이지의 html에 포함될 때 모든 페이지의 전체 다운로드와 비교됩니다.
— 레골라스
4
이 내부 STYLE 모든 CSS 파일을 복사 및 붙여 넣기 재앙 .. 더 나은는 적어도 1 CSS를 포함하는<HEAD>
— T.Todua
6
이것은 브라우저 캐싱을 완전히 무시합니다
— Michiel
3
이 답변이 농담이라고 가정합니까? (무상 한 굵은 글씨로, 링크 된 페이지는 스타일 태그를 사용하지 말라고합니다)
— Sanjay Manohar
-2

이것은 PHP 개발자를 도울 수 있습니다. 아래 함수는 공백을 제거하고 주석을 제거하며 모든 CSS 파일을 연결합니다. 그런 다음 <style>페이지를로드하기 전에 헤드 의 태그에 삽입 하십시오.

아래 함수는 주석을 제거하고 CSS로 전달 된 내용을 최소화합니다. 다음 기능과 함께 페어링됩니다.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

이 기능을 문서 헤드에서 호출합니다.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()문서 헤드에 기능 을 포함 시키 십시오. 경로가 IE 인 스타일 시트의 이름을 가진 배열을 전달하십시오 css/styles.css. .css위 기능에서 자동으로 추가되므로 확장을 추가하지 않아도됩니다 .

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>
— 아담 요셉 루즈
소스
1
CSS의 내용을 수동으로 '최소화'한 다음 선택한 스타일 시트를 반복하여 모든 페이지에 추가하는 것이 훨씬 낫습니다. 또한 file_get_contents()cURL을 사용하는 것보다 상당히 느립니다.
— 코너 심슨
1
이는 브라우저 캐시가 활용되지 못하게하는 나쁜 아이디어입니다.
— 개정
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.