하나의 거대한 .css 파일과 여러 개의 작은 특정 .css 파일이 있습니까? [닫은]

거의 모든 페이지에서 사용될 스타일 요소가 포함 된 하나의 monster .css 파일을 사용하면 어떤 이점이 있습니까?

관리하기 쉽도록 여러 유형의 CSS를 몇 개의 파일로 가져오고 모든 파일을 기본 파일에 포함시키는 <link />것이 그렇게 나쁜 것이라고 생각합니다.

나는 이것이 더 낫다고 생각한다

  1. position.css
  2. buttons.css
  3. tables.css
  4. copy.css

vs.

  1. site.css

한 가지 방법과 다른 방법으로 수행하는 데 어려움이 있습니까?



답변

Sass 또는 LESS와 같은 CSS 컴파일러는 좋은 방법입니다. 이렇게하면 사이트에 대해 최소화 된 단일 CSS 파일 (일반 단일 CSS 소스 파일보다 훨씬 작고 빠름)을 제공하는 동시에 모든 것이 깔끔하게 구성 요소로 분할되어 가장 멋진 개발 환경을 유지할 수 있습니다.

Sass와 LESS에는 변수 작성, 중첩 및 CSS를보다 쉽게 ​​작성하고 유지 관리 할 수있는 다른 방법이 추가되었습니다. 적극 권장합니다. 개인적으로 Sass (SCSS 구문)를 사용했지만 이전에는 LESS를 사용했습니다. 둘 다 비슷한 이점이 있지만 훌륭합니다. 컴파일러로 CSS를 작성했다면, 컴파일러없이 CSS를 사용하고 싶지 않을 것입니다.

http://lesscss.org

http://sass-lang.com

루비를 엉망으로 만들고 싶지 않다면 Mac 용 LESS 컴파일러가 좋습니다.

http://incident57.com/less/

또는 CodeKit을 (동일한 사람들이) 사용할 수 있습니다.

http://incident57.com/codekit/

WinLess는 LESS를 컴파일하기위한 Windows GUI입니다.

http://winless.org/


답변

이것은 대답하기 어려운 것입니다. 두 가지 옵션 모두 내 의견으로는 장단점이 있습니다.

개인적으로 하나의 거대한 CSS 파일을 읽는 것을 좋아하지 않으며 유지 관리가 매우 어렵습니다. 반면에 분리하면 추가 HTTP 요청이 발생하여 잠재적으로 속도가 느려질 수 있습니다.

내 의견은 두 가지 중 하나입니다.

1) CSS를 작성한 후에는 CSS가 변경되지 않는다는 것을 알고 있다면 개발 단계에서 여러 CSS 파일을 작성하고 (가독성을 높이기 위해) 수동으로 결합하여 라이브로 이동하기 전에 (http 요청을 줄입니다)

2) CSS를 한 번에 한 번 변경하고 읽을 수 있어야한다는 것을 알고 있다면 별도의 파일을 작성하고 코드를 사용하여 (어떤 종류의 프로그래밍 언어를 사용하는 경우) 런타임 빌드 시간 (런타임 축소 / 조합은 리소스 돼지입니다).

두 옵션 중 하나를 사용하면 http 요청을 더 줄이기 위해 클라이언트 측에서 캐싱하는 것이 좋습니다.

편집 : 코드 만 사용하여 런타임에 CSS를 결합하는 방법을 보여주는
블로그 를 찾았습니다 . 살펴볼 가치가 있습니다 (아직 테스트하지는 않았지만).

편집 2 :
디자인 타임에 별도의 파일을 사용하고 최소화하고 결합하는 빌드 프로세스를 사용했습니다. 이 방법으로 개발하는 동안 별도의 (관리 가능한) CSS를 가질 수 있으며 런타임에 적절한 모 놀리 식 축소 파일을 만들 수 있습니다. 런타임에 압축 / 축소를 수행하지 않기 때문에 정적 파일과 시스템 오버 헤드가 줄어 듭니다.

참고 : 쇼핑객 을 위해 빌드 프로세스의 일부로 번 들러 를 사용하는 것이 좋습니다 . IDE 내에서 빌드하든 빌드 스크립트에서 빌드 exe하든 번 들러는 포함 된 것을 통해 Windows에서 실행되거나 이미 node.js를 실행중인 모든 시스템에서 실행될 수 있습니다.


답변

개발 중에 여러 CSS 파일을 선호합니다. 관리 및 디버깅이 훨씬 쉽습니다. 그러나 배포 시간에 CSS 파일을 하나의 모 놀리 식 파일로 병합하는 YUI Compressor 와 같은 CSS 축소 도구를 대신 사용하는 것이 좋습니다 .


답변

당신은 두 세계를 원합니다.

당신의 정신이 끔찍한 일이기 때문에 여러 CSS 파일을 원합니다.

동시에 하나의 큰 파일을 갖는 것이 좋습니다.

해결책은 여러 파일을 단일 파일로 결합하는 메커니즘을 갖는 것입니다.

한 가지 예는

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

그런 다음 allcss.php 스크립트는 파일을 연결하여 전달합니다.

이상적으로 스크립트는 모든 파일에서 mod 날짜를 확인하고 변경 사항이있는 경우 새 합성을 만든 다음 해당 합성을 반환 한 다음 If-Modified HTTP 헤더를 검사하여 중복 CSS를 보내지 않습니다.

이것은 당신에게 두 세계의 최고를 제공합니다. JS에도 효과적입니다.


답변

하나의 CSS 파일 만 있으면 페이지로드 시간에 더 좋습니다. HTTP 요청이 적기 때문입니다.

CSS 파일이 여러 개 있다는 것은 개발이 더 쉽다는 것을 의미 합니다 .

따라서 두 경우 모두 좋은 이유가 있습니다 …

두 가지 아이디어를 최대한 활용할 수있는 솔루션은 다음과 같습니다.

  • 여러 개의 작은 CSS 파일을 사용하여 개발하려면
    • 즉 개발하기 쉽다
  • 애플리케이션을위한 빌드 프로세스를 갖기 위해 해당 파일을 하나로 결합합니다.
    • 이 빌드 프로세스는 큰 파일을 축소 할 수도 있습니다.
    • 응용 프로그램에 “다중 파일 모드”에서 “모노 파일 모드”로 전환 할 수있는 구성 요소가 있어야합니다.
  • 프로덕션에서는 큰 파일 만 사용하기 위해
    • 즉, 빠른 페이지 로딩

CSS 파일을 빌드 타임이 아닌 런타임에 결합하는 소프트웨어도 있습니다. 그러나 런타임에 그것을 수행한다는 것은 CPU를 조금 더 먹는 것을 의미 합니다 (그리고 큰 파일을 너무 자주 재생성하지 않기 위해서는 약간의 캐싱 메커니즘이 필요합니다)


답변

역사적으로 단일 CSS 파일을 갖는 주요 이점 중 하나는 HTTP1.1을 사용할 때의 속도 이점입니다.

그러나 2018 년 3 월 현재 브라우저의 80 % 이상이 HTTP2 를 지원 하므로 브라우저가 여러 리소스를 동시에 다운로드 할 수있을뿐만 아니라 리소스를 선제 적으로 푸시 할 수 있습니다. 모든 페이지에 단일 CSS 파일이 있으면 필요한 파일 크기보다 큽니다. 적절한 디자인으로 코딩하기 쉬운 것 이외의 다른 이점은 없습니다.

최상의 성능을위한 HTTP2의 이상적인 설계는 다음과 같습니다.

  • 모든 페이지에서 사용되는 공통 스타일이 포함 된 핵심 CSS 파일이 있어야합니다.
  • 별도의 파일에 페이지 특정 CSS가 있어야합니다.
  • HTTP2 푸시 CSS를 사용하여 대기 시간을 최소화하십시오 (쿠키는 반복 된 푸시를 방지하는 데 사용될 수 있음)
  • 선택적으로 폴드 CSS 위에서 분리하여 먼저 푸시하고 나머지 CSS를 나중에로드하십시오 (저 대역폭 모바일 장치에 유용)
  • 향후 페이지로드 속도를 높이려면 페이지가로드 된 후 사이트 또는 특정 페이지에 대한 나머지 CSS를로드 할 수도 있습니다.

답변

모 놀리 식 스타일 시트는 스타일 시트 문서의 전체 크기에 따라 IE에서 문제가 발생할 수있는 많은 이점 (다른 답변에 설명되어 있음)을 제공합니다. IE는 단일 파일 에서 몇 개의 선택기를 읽을 것인지에 대한 제한이 있습니다 . 한계는 4096 개의 선택기입니다. 당신이 모 놀리 식 스타일 시트라면 이것보다 더 많은 것을 가질 것입니다. 이 제한 사항은 IE의 추악한 부분을 뒤로합니다.

이것은 모든 버전의 IE를위한 것입니다.

참조 로스 Bruniges 블로그MSDN AddRule 페이지를 .