하나의 거대한 .css 파일과 여러 개의 더 작은 특정 .css 파일?
거의 모든 페이지에서 사용될 스타일 요소가 포함된 단일 monster.css 파일이 있으면 이점이 있습니까?
을 위해 를 몇 개의 을 제 파일에 포함시키고 <link />심하게 아픈가요?
이게 더 나은 것 같아요.
- 위치, 위치
- 단추, 단추, 단추
- 테이블.테이블
- 사본.
대.
- site.site
당신은 그것을 한쪽 방식과 다른 쪽 방식으로 하는 것에 대한 어떤 괴담을 본 적이 있습니까?
이것은 대답하기 어려운 문제입니다.제 생각에는 두 가지 방법 모두 장단점이 있습니다.
저는 개인적으로 하나의 거대한 CSS 파일을 읽는 것을 좋아하지 않으며, 그것을 유지하는 것은 매우 어렵습니다.반면에, 그것을 분할하는 것은 잠재적으로 속도를 늦출 수 있는 추가적인 http 요청을 야기합니다.
제 의견은 두 가지 중 하나일 것입니다.
일단 CSS를 구축하면 CSS가 절대 바뀌지 않는다는 것을 안다면, 저는 개발 단계에서 (가독성을 위해) 여러 개의 CSS 파일을 만든 다음 라이브를 시작하기 전에 (http 요청을 줄이기 위해) 수동으로 결합할 것입니다.
만약 당신이 CSS를 한 번씩 바꿀 것이라는 것을 알고 있고 그것을 읽을 수 있어야 한다면, 나는 별도의 파일을 만들고 코드(당신이 일종의 프로그래밍 언어를 사용하고 있다면)를 사용하여 그것들을 결합할 것입니다.
런타임 빌드 시간(일반적으로 최소화/조합은 리소스 피그).
두 옵션 중 하나를 사용하면 http 요청을 더욱 줄이기 위해 클라이언트 측에서 캐싱하는 것이 좋습니다.
편집:
나는 이걸 발견했어.코드만 사용하여 실행 시 CSS를 결합하는 방법을 보여주는 블로그.한 번 볼 가치가 있습니다(아직 직접 테스트하지는 않았지만).
2 편집 2:
설계 시간에 별도의 파일을 사용하고, 최소화 및 결합을 위한 빌드 프로세스를 사용하기로 결정했습니다.이렇게 하면 제가 개발하는 동안 별도의 (관리 가능한) CSS와 런타임에 적절한 단일화된 파일을 가질 수 있습니다.런타임에 압축/최소화를 수행하지 않기 때문에 정적 파일과 시스템 오버헤드가 줄어듭니다.
참고: 구매자 여러분께 빌드 프로세스의 일부로 번들러를 사용할 것을 강력히 제안합니다.IDE 내에서 빌드하든 빌드 스크립트에서 빌드하든 간에 번들러는 다음을 통해 Windows에서 실행할 수 있습니다.exe또는 node.js를 이미 실행 중인 모든 컴퓨터에서 실행할 수 있습니다.
Sass 또는 LESS와 같은 CSS 컴파일러는 좋은 방법입니다.그렇게 하면 모든 것이 깔끔하게 구성 요소로 분할되어 가장 좋은 개발 환경을 유지하면서 사이트에 대해 최소화된 단일 CSS 파일(일반적인 단일 CSS 소스 파일보다 훨씬 작고 빠름)을 제공할 수 있습니다.
Sass와 LESS는 변수, 중첩 및 CSS를 더 쉽게 작성하고 유지 관리할 수 있는 다른 방법의 추가적인 이점을 가지고 있습니다.매우, 매우 추천합니다.저는 개인적으로 Sass(SCSS 구문)를 사용하지만 이전에는 덜 사용했습니다.둘 다 훌륭하고, 비슷한 이점이 있습니다.일단 컴파일러로 CSS를 작성한 후에는 컴파일러 없이 CSS를 작성하고 싶어하지 않을 것입니다.
루비를 가지고 장난치고 싶지 않다면, 이 Mac용 LESS 컴파일러가 좋습니다.
또는 CodeKit(동일한 사용자)를 사용할 수 있습니다.
http://incident57.com/codekit/
WinLess는 더 적은 파일링을 위한 Windows GUI입니다.
역사적으로 단일 CSS 파일을 사용할 때 x의 주요 이점 중 하나는 HTTP 1.1을 사용할 때의 속도 이점입니다.
그러나 2018년 3월 현재 브라우저의 80% 이상이 여러 리소스를 동시에 다운로드할 수 있을 뿐만 아니라 사전에 리소스를 푸시할 수 있는 HTTP2를 지원합니다.모든 페이지에 대해 단일 CSS 파일이 있다는 것은 필요한 파일 크기보다 크다는 것을 의미합니다.제대로 된 디자인이라면 코딩이 더 쉽다는 것 외에는 이점이 없다고 생각합니다.
최상의 성능을 위한 HTTP2의 이상적인 설계는 다음과 같습니다.
- 모든 페이지에서 사용되는 공통 스타일을 포함하는 코어 CSS 파일을 가지고 있습니다.
- 페이지별 CSS를 별도의 파일에 저장합니다.
- HTTP2 푸시 CSS를 사용하여 대기 시간 최소화(쿠키를 사용하여 반복 푸시를 방지할 수 있음)
- 선택적으로 접힌 CSS 위에서 분리하고 이것을 먼저 누르고 나머지 CSS를 나중에 로드합니다(저대역폭 모바일 장치에 유용).
- 향후 페이지 로드 속도를 높이려면 페이지가 로드된 후 사이트 또는 특정 페이지에 대한 나머지 CSS를 로드할 수도 있습니다.
나는 개발 중에 여러 개의 CSS 파일을 선호합니다.이렇게 하면 관리 및 디버깅이 훨씬 쉬워집니다.그러나 배포 시간이 되면 대신 YUI 컴프레서와 같은 CSS 미니화 도구를 사용하여 CSS 파일을 하나의 단일 파일로 병합할 것을 제안합니다.
당신은 두 세계를 모두 원합니다.
당신은 CSS 파일을 여러 개 원합니다. 왜냐하면 당신의 제정신은 낭비하기에 끔찍한 것이기 때문입니다.
동시에 하나의 대용량 파일을 사용하는 것이 좋습니다.
해결책은 여러 파일을 하나의 파일로 결합하는 몇 가지 메커니즘을 갖는 것입니다.
한 가지 예는 다음과 같습니다.
<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />
그럼, 다 같이.php 스크립트는 파일을 연결하고 전달하는 것을 처리합니다.
이상적으로는 스크립트가 모든 파일의 모드 날짜를 확인하고, 변경된 파일이 있으면 새 컴포지트를 만든 다음, 해당 컴포지트를 반환하고, 중복 CSS를 보내지 않도록 If-Modified HTTP 헤더에 대해 확인합니다.
이것은 두 가지 장점을 모두 제공합니다.JS에게도 잘 작동합니다.
하나의 CSS 파일만 있으면 HTTP 요청이 줄어들기 때문에 페이지 로드 시간에 더 좋습니다.
여러 개의 작은 CSS 파일이 있다는 것은 개발이 더 쉽다는 것을 의미합니다(적어도, 저는 그렇게 생각합니다: 애플리케이션의 모듈당 하나의 CSS 파일이 있으면 상황이 더 쉬워집니다).
두 사건 모두 그럴만한 이유가 있습니다
할 수 은 다음과
- 여러 개의 작은 CSS 파일을 사용하여 개발하기
- 즉, 개발하기 쉬운
- 해당 파일을 하나로 "결합"하는 응용프로그램에 대한 빌드 프로세스를 갖는 것
- 그 빌드 프로세스는 또한 그 큰 파일을 최소화할 수 있습니다.
- 이는 애플리케이션에 "다중 파일 모드"에서 "단일 파일 모드"로 전환할 수 있는 구성 요소가 있어야 한다는 것을 의미합니다.
- 또한 프로덕션에서 빅 파일만 사용하는 경우에 따라
- 더 빠른 페이지 로딩
빌드 시간이 아닌 런타임에 CSS 파일을 결합하는 일부 소프트웨어도 있습니다. 하지만 런타임에 CSS 파일을 결합하는 것은 CPU를 조금 더 먹는 것을 의미합니다(그리고 분명히 큰 파일을 너무 자주 다시 생성하지 않기 위해 약간의 캐싱 메커니즘이 필요합니다).
단일 스타일시트는 많은 이점을 제공하지만(다른 답변에 설명되어 있음) 스타일시트 문서의 전체 크기에 따라 IE에서 문제가 발생할 수 있습니다.IE는 단일 파일에서 읽을 셀렉터 수에 제한이 있습니다.제한은 4096개의 실렉터입니다.모노리식 스타일시트의 경우 이보다 더 많은 스타일시트를 분할할 수 있습니다.이 제한은 IE에서 추악한 머리를 키울 뿐입니다.
이것은 모든 버전의 IE를 위한 것입니다.
Ross Bruniges 블로그 및 MSDN 규칙 추가 페이지를 참조하십시오.
둘 이상의 CSS 파일을 갖는 것이 유리한 전환점이 있습니다.
일반 사용자가 5페이지만 볼 수 있는 1M 이상의 페이지가 있는 사이트는 스타일시트의 비율이 엄청날 수 있으므로 초기 다운로드를 대량으로 수행하여 페이지 로드당 하나의 추가 요청에 따른 오버헤드를 절약하려는 것은 잘못된 경제성입니다.
주장을 극단적인 한계까지 확장합니다. 즉, 전체 웹에 대해 하나의 대형 스타일시트가 유지되어야 한다는 것을 제안하는 것과 같습니다.말도 안 되는 소리야
하지만 각 사이트마다 팁 포인트가 다르기 때문에 엄격하고 빠른 규칙은 없습니다.페이지당 고유한 CSS의 수, 페이지 수, 사이트를 사용하는 동안 일반 사용자가 일상적으로 접할 수 있는 페이지 수에 따라 달라집니다.
저는 보통 소수의 CSS 파일을 가지고 있습니다.
- 재설정 및 글로벌 스타일을 위한 "글로벌" CSS 파일
- 논리적으로 그룹화된 페이지(아마 체크아웃 마법사의 모든 페이지)에 대해 특정 CSS 파일을 "제거"합니다.
- 페이지에서 재정의하기 위해 특정 CSS 파일을 "페이지"합니다(또는 개별 페이지의 블록에 넣으십시오).
저는 CSS 파일에 대한 여러 페이지 요청에 대해 별로 신경 쓰지 않습니다.대부분의 사람들은 상당한 대역폭을 가지고 있으며 모든 스타일을 하나의 단일 CSS 파일로 결합하는 것보다 훨씬 더 큰 영향을 미치는 다른 최적화가 있다고 확신합니다.속도와 유지보수성 사이에서 균형이 잡히는데, 저는 항상 유지보수성 쪽으로 기울고 있습니다.YUI 컴프레서는 꽤 멋지네요, 확인해 봐야 할 것 같아요.
나는 여러 개의 CSS 파일을 선호합니다.그렇게 하면 원하는 대로 "스킨"을 주고 받는 것이 더 쉽습니다.단일 단일 파일의 문제는 제어할 수 없고 관리하기 어렵다는 것입니다.파란색 배경을 원하지만 단추가 변경되지 않도록 하려면 어떻게 해야 합니까?배경 파일만 변경하면 됩니다.기타.
아마도 나침반을 보세요. 이것은 오픈 소스 CSS 저작 프레임워크입니다.이것은 Sass를 기반으로 하기 때문에 변수, 중첩, 믹스인, 가져오기와 같은 멋진 것들을 지원합니다.특히 가져오기는 더 작은 CSS 파일을 별도로 유지하되 여러 개의 느린 HTTP 호출을 피하여 자동으로 하나로 결합할 경우 유용합니다.나침반은 여기에 크로스 브라우저 작업을 처리하기 쉬운 사전 정의된 큰 믹스인 세트를 추가합니다.루비로 쓰여 있지만 어떤 시스템과도 쉽게 사용할 수 있습니다.
가장 좋은 방법은 다음과 같습니다.
- 모든 공유 코드로 일반 CSS 파일 생성
- 모든 특정 페이지 CSS 코드를 태그의 동일한 페이지에 삽입하거나 각 페이지에 대한 속성 스타일="를 사용합니다.
이 방법에서는 모든 공유 코드와 HTML 페이지를 가진 하나의 CSS만 있습니다.그나저나 (그리고 나는 이것이 올바른 주제가 아니라는 것을 알고 있다) 당신은 또한 당신의 이미지를 base64로 인코딩할 수 있습니다 (그러나 당신은 당신의 js와 css 파일로도 할 수 있습니다).이렇게 하면 더 많은 http 요청을 1로 줄일 수 있습니다.
SASS와 LESS는 이 모든 것을 정말로 논쟁거리로 만듭니다.개발자는 효과적인 구성 요소 파일을 설정하고 컴파일 시 이를 모두 결합할 수 있습니다.SAS에서는 개발 중에 압축 모드를 해제하여 보다 쉽게 읽을 수 있도록 하고, 생산을 위해 다시 설정할 수 있습니다.
http://sass-lang.com http://lesscss.org
결국 사용하는 기술에 관계없이 하나의 최소화된 CSS 파일이 당신이 원하는 것입니다.서버에 대한 CSS 감소, HTTP 요청 감소, 수요 감소.
단일 CSS 파일의 장점은 전송 효율성입니다.각 HTTP 요청은 요청된 각 파일에 대한 HTTP 헤더 응답을 의미하며 대역폭을 사용합니다.
저는 HTTP 헤더에 "text/css" mime 유형이 있는 PHP 파일로 CSS를 제공합니다.이렇게 하면 서버 측에 여러 개의 CSS 파일을 가질 수 있고 사용자가 요청할 때 PHP를 사용하여 단일 파일로 푸시할 수 있습니다.모든 최신 브라우저는 CSS 코드가 있는 .php 파일을 수신하여 .css 파일로 처리합니다.
성능을 위해 하나의 CSS 파일을 사용한 다음 다음과 같은 섹션을 주석 처리할 수 있습니다.
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
기타
저는 Jammit을 사용하여 css 파일을 처리하고 가독성을 위해 다양한 파일을 사용하고 있습니다.Jammit는 운영 환경에 배포하기 전에 파일을 결합하고 압축하는 모든 더러운 작업을 수행합니다.이렇게 하면 개발 중인 파일은 많지만 운영 중인 파일은 하나뿐입니다.
스타일시트 번들은 페이지 로드 성능을 절약할 수 있지만 스타일이 많을수록 브라우저는 사용자가 있는 페이지에서 애니메이션을 렌더링하는 속도가 느려집니다.사용자가 있는 페이지에 없을 수 있지만 브라우저가 계산해야 하는 미사용 스타일의 양이 너무 많기 때문입니다.
참조: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
스타일시트 번들 장점: - 페이지 로드 성능
스타일시트 번들 단점: - 동작이 느림, 스크롤, 상호 작용, 애니메이션,
결론:두 문제를 모두 해결하기 위해, 프로덕션의 이상적인 해결책은 모든 CSS를 하나의 파일로 묶어서 http 요청에 저장하는 것이지만, 자바스크립트를 사용하여 해당 파일에서 당신이 있는 페이지의 CSS를 추출하고 헤드를 업데이트하는 것입니다.
페이지당 필요한 공유 구성 요소를 파악하고 복잡성을 줄이려면 이 특정 페이지에서 사용하는 모든 구성 요소를 다음과 같이 선언하면 됩니다.
<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">
저는 CSS 개발에 대한 체계적인 접근법을 만들었습니다.이렇게 하면 절대 변하지 않는 기준을 활용할 수 있습니다.처음에는 960 그리드 시스템으로 시작했습니다.그런 다음 기본 레이아웃, 여백, 패딩, 글꼴 및 크기를 위한 단일 줄의 CSS를 만들었습니다.그런 다음 필요에 따라 끈으로 묶습니다.이를 통해 모든 프로젝트에서 일관된 레이아웃을 유지하고 동일한 CSS 파일을 반복적으로 사용할 수 있습니다.왜냐하면 그것들은 구체적이지 않기 때문입니다.예를 들어 보겠습니다. ----div class="c12 bg0 m10 p5 white fl"/div--- 이는 컨테이너가 가로 12열이고 bg0의 여백이 5인 텍스트 패딩을 사용하여 흰색이고 왼쪽으로 뜬다는 것을 의미합니다.이러한 모든 속성을 가진 단일 클래스를 만드는 대신 페이지를 코딩할 때 단일 스타일을 결합하여 새로운 스타일을 제거하거나 추가하여 쉽게 변경할 수 있습니다.이를 통해 스타일의 조합을 만들 수 있으며 창의성을 제한하거나 유사한 스타일을 대량으로 만들 수 없습니다.스타일 시트는 훨씬 더 관리하기 쉽고 최소화되며 반복해서 사용할 수 있습니다.제가 발견한 이 방법은 빠른 디자인에 환상적입니다.저는 또한 더 이상 PSD에서 먼저 디자인하는 것이 아니라 브라우저에서 디자인하여 시간을 절약합니다.또한 배경 및 페이지 디자인 속성에 대한 이름 지정 시스템을 만들었기 때문에 새 프로젝트를 만들 때 이미지 파일을 변경하기만 하면 됩니다. (bg0 = 내 이름 지정 시스템에 따른 본문 배경)즉, 이전에 흰색 배경에 한 프로젝트를 검은색으로 변경한 경우 다음 프로젝트에서 bg0이 검은색 배경 또는 다른 이미지가 된다는 것을 의미합니다.저는 아직 이 방법에 문제가 있다는 것을 발견하지 못했고 잘 작동하는 것 같습니다.
언급URL : https://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files
'programing' 카테고리의 다른 글
| 정적 C 라이브러리에 어떤 기능이 있는지 확인합니다. (0) | 2023.08.10 |
|---|---|
| 데이터를 읽기 위해 데이터베이스 트랜잭션이 필요합니까? (0) | 2023.08.05 |
| 열 정수 값을 날짜 식으로 변환 (0) | 2023.08.05 |
| 모델/테이블 별칭이 작동하지 않음(내부 조인) (0) | 2023.08.05 |
| NotificationCompat.Android O에서 Builder가 더 이상 사용되지 않음 (0) | 2023.08.05 |