큰 CSS 미디어 쿼리 파일을 각 화면 크기에 대해 별도의 파일로 분할해야합니까?

반응 형 디자인 웹 사이트에서 모든 화면 크기의 콘텐츠를 제공하고 있습니다. 5 가지 "단계"에 대한 미디어 쿼리가 있으며 CSS 파일은 약 30Kb입니다.

이것을 별도의 파일로 나누고 다음과 비슷하게 만드는 것이 좋습니다.

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

아니면 하나의 CSS 파일로 유지해야합니까?

업데이트 : 방금 개발의 편의성이 아니라 브라우저 / 장치 페이지 열기 / 렌더링 속도를 가로 지르는 것이 주요 관심사였습니다.

개발에 가장 쉬운 방법과 깔끔한 ​​스타일 시트를 유지하는 데 무엇이 도움이되는지에 달려 있다고 생각합니다.

분할 할 때 생각할 수있는 유일한 단점은 요소의 속성이 모든 스타일 시트에 나타나면 5 개의 개별 파일을 업데이트하여 변경해야합니다 (한곳에 나란히 나타나는 것이 아니라).

해상도에 분할은 대역폭 절약되지 않도록이 게시물에 대한 답변에 따르면, 브라우저에 관계없이 모든 스타일 시트를 다운로드합니다 : /programming/16657159/when-using-media-queries-does-a 전화로드 비 관련 쿼리 및 이미지

달성하려는 목표에 따라 약간 다릅니다. 페이지로드 속도를 높이려고하거나 개발을 더 쉽게하려고합니까?

후자를 대상으로하는 경우 여러 장을 사용할 수있는 것보다 기본 설정의 문제입니다. 하나의 큰 파일을 사용하는 것이 가장 쉽다는 것을 알았습니다. 선언 한 모든 스타일에 대한 개요를 제공하기 때문입니다.

요청 오버 헤드가 상당히 크기 때문에 가장 좋은 방법보다 빠른 로딩 페이지를 원한다면 요청 양을 최소화하는 것입니다. 또한 개발 버전을 직접 유지하고 최소화 된 CSS를 웹에 제공 할 수 있습니다 (YUI는 좋은 방법입니다 : http://www.refresh-sf.com/yui/ ).

또한 CSS 자체를 최적화하려고합니다. 다음과 같이 매우 유사한 클래스를 병합하려고 시도 할 수 있습니다.

.bold-and-italic { font-weight: bold; text-style: italic; }

로 변환 할 수 있습니다 :

.bold { font-weight: bold; }
.italic { text-style: italic; }

유일한 것은 당신이 약간 HTML을 변경해야 할 것입니다 <span class="bold-and-italic">foo bar</span>에<span class="bold italic">foo bar</span>

나는 당신이 Bootstrap ( http://getbootstrap.com ) 을 보라고 제안 할 수는 있지만 ,이 사람들은 클래스를 여러 개의 '하위 클래스'로 나누는 데 큰 역할을했습니다.

이게 도움이 되길 바란다.

CSS 파일이 하나만있는 것이 가장 좋지만 축소하고 압축하는 것이 가장 좋습니다. 30KB가 그렇게하기 전에 가정하면 파일 크기를 축소 (공백 제거) 및 gzipping으로 약 5KB로 줄일 수 있습니다.

분할하면 속도가 더 빨라지지만 일부 조건에서만 가능합니다.

• 매번 하나의 스타일 시트 만로드해야합니다. 그렇지 않으면 두 개 이상의 HTTP 요청이 필요합니다.이 요청은 자체적으로 오버 헤드가 발생하여 파일 크기가 작을 때 얻는 이득을 적어도 부분적으로 무효화합니다. 이렇게하려면 스타일 시트를 분할하고 다른 미디어 속성을 가진 여러 태그를 삽입하는 것만으로 는 충분 하지 않습니다<link> . 브라우저 <link>는 미디어 쿼리에 관계없이 모든 ed 스타일 시트 를로드하는 것처럼 보입니다 (이 정보는 @cimmanon 덕분에 몰랐습니다) .
• 스타일 시트간에 공유되는 CSS 규칙의 수는 작아야합니다. 그렇지 않으면 여러 스타일 시트 각각에 모든 공통 규칙이 포함되므로 원본 크기와 거의 비슷해야합니다.
• CSS 전 처리기 (또는 이와 유사한 것)를 사용하므로 5 개의 스타일 시트에서 동일한 코드 조각을 가질 수 있습니다.

또한 : 조기 최적화하지 마십시오. 성능 문제가있는 경우에만 그렇게하십시오.

CSS 파일은 렌더 차단이기 때문에 미디어 쿼리를 기반으로 CSS 파일을 분할해야합니다.

브라우저가 DOM을 구성 할 때는 먼저 모든 CSS 파일을 기다렸다가로드해야합니다. 일부 CSS 파일이 특정 미디어 쿼리를 기반으로 만로드되는 경우 페이지로드 시간이 줄어 듭니다.

또한 JavaScript 스크립트 태그에 비동기를 추가합니다. 예 : <script src='myfile.js' async></script>.

DOM은 JS 파일이로드 될 때까지 기다릴 필요가 없습니다. DOM 생성시 onload에서 해당 JavaScript가 필요하지 않은 경우에만 비동기를 추가하십시오.

나는 이것을 말하려는 경향이있다.

프로덕션을 위해서는 항상 하나의 파일로 보관하십시오. 그 이유는 브라우저가 더 효율적이고 개발에서 프로덕션으로 이동할 때 주요 관심사 (IMO)가되어야하기 때문입니다.

개발은 다른 물고기 주전자입니다. 나는 미디어 쿼리를 어떤 요소에 의해서도 나누는 경향이 있습니다.

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

일반적으로 요소를 변경하는 경우 grep과 같은 것을 사용할 수는 있지만 CSS의 모든 곳을 사냥하고 싶지는 않습니다.

그러나 내가 말할 한 가지는 사이트 자체, 개발 프로세스 및 그 이후의 내용을 고려할 가치가 있다는 것입니다. 화면 크기 기반 파일로 분리 할 가치가 있다고 생각되면 사용하십시오. 사이트 사본을 만들고 (가능한 경우) 사본을 가지고 놀아보십시오. 더 쉬워지면 사용하십시오. 웹 사이트를 개발하는 방법에 대한 단일 패러다임의 패러다임을 따를 필요가 없습니다.

단순성 : 하나의 스타일 시트를 사용하고 CSS 스타일을보다 쉽게 ​​찾고 변경하기 위해 주석을 추가하십시오.

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

원하는 경우 여러 스타일 시트를 사용하여 특정 크기마다 호출 할 수 있습니다.

오히려 Bootstrap을 보려고 합니다. 모든 CSS를 포함하는 1 개의 CSS 파일입니다. 거의 99 %의 브라우저에서 작동하며 매우 반응이 좋습니다.

라이브 데모에서 확대 ( Ctrl += 확대, Ctrl -= 축소, Ctrl 0= 일반)를 클릭하거나 모바일에서 열어 어떻게 렌더링되는지 확인하십시오.