블로그에서 몇 가지 속도 테스트를 실행 중이며 항상 사용하지 않는 CSS에 대한 불만이 있습니다. 그러나 이것은 내가 결코 사용하지 않는 CSS가 아니며 특정 페이지에서 사용되지 않습니다.
이제 구조화 된 방식으로 작업하지만 다른 페이지에서 필요하기 때문에 여전히 사용하지 않을 CSS가 파일에 있어야합니다.
다른 페이지에서 다른 CSS 파일을 사용하는 것이 좋은 방법이라고 생각하지 않습니다. 캐시 할 수있는 하나의 큰 파일을 만드는 것이 훨씬 낫습니다.
이제 이것을 다루는 우아한 방법이 있습니까, 아니면 그냥 고수합니까?
답변:
하나의 더 큰 CSS 파일을 사용하는 것이 더 낫다는 주장은 맞습니다. gzip으로 압축하면 몇 KB에 불과하며 캐시되어야하므로 오버 헤드가 크지 않습니다. 그래도 확인해야 할 것이 몇 가지 있습니다.
일부 CSS가 한 페이지에서만 사용되는 경우에는 일부 스타일 태그로 CSS를 페이지에 배치하는 것이 좋습니다. (참고 : 특히 나중에 다른 스타일을 사용하기로 결정한 경우 유지 관리가 어려워 질 수 있습니다.)
가장 인기있는 페이지 (예 : 페이지 조회수의 50 % 이상을 차지하는 페이지)를 가져 와서 해당 페이지에서 매우 적은 양의 CSS 만 사용하는 경우 사용자가 더 빠르게 분할 할 수 있습니다. 두 개의 CSS 파일. 이제 가장 인기있는 페이지를 방문하는 신규 사용자는 다운로드 횟수가 훨씬 적습니다. 다른 페이지에는 하나의 추가 HTTP 요청이 있지만 그다지 중요하지 않습니다.
CSS가 잘 최적화되어 있는지 확인하십시오. 가능한 경우 하위 선택기를 피하십시오. 선택기의 오른쪽이 너무 일반적이면 렌더링 시간이 느려질 수 있습니다. 예를 들어 .class div {}브라우저가 <div>페이지의 모든 요소 를 확인한 다음 클래스가있는 요소를 찾기 위해 DOM 트리를 맨 위로 검색해야 하기 때문에 약간 느립니다 .
나는 이것이 당신이 사용하고있는 가장 빠른 도구의 단점이며, 전체 사이트를 보지 않고 어떤 CSS가 전혀 사용되지 않는지 확인합니다. 도움이되는 도구를 찾으면 알려주십시오!
캐시 할 수있는 하나의 큰 파일을 만드는 것이 훨씬 낫습니다.
예, CSS를 조금 더 필요로하는 페이지 세트가없는 경우에는 해당 페이지에이를 포함시킬 수 있습니다.
media="print"-일부 브라우저는 실제로 페이지를 인쇄 / 미리보기하려고 시도 할 때까지 요청을 발행하지 않습니다.
Dust-Me Selectors 라는 편리한 소형 Firefox 플러그인이 있습니다.이 플러그인 은 CSS를 통해 확인하고 사용되지 않은 규칙을보고합니다. 그러나 최신 버전의 Firefox (v8.0)에서는 작동하지 않습니다.
PS : 내가 당신이라면, 소금 한 덩어리로 CSS Lint를 가져갈 것입니다.“권장 사항”이 현명하고 완전한 과잉 행동이라고 말하는 학교가 있습니다. (자세한 내용은 Matt Wilcox의 설득력있는 기사 인 “ CSS Lint는 유해합니다 ”를 참조하십시오.) 기껏해야 그것은 비공식적입니다. 그리고 그것을 직시하자. 우리 가 만족시킬 또 다른 툴 / 의사 표준이 정말로 필요한가?
내가 처리 할 수있는 가장 최적화되고 확장 가능한 방법은 다음으로 구성됩니다.
"글로벌 범위"와 관련된 모든 것 (사이트 디자인, 글로벌 클래스, 라이브러리, 플러그인 등)에 대한 기본 CSS 파일 만들기
페이지 당 하나의 고유 CSS 파일을 포함하는 폴더를 포함하는 시스템 만들기 (필요한 경우에만). 이러한 파일은 링크 된 페이지와 동일한 파일 이름을 가질 수 있으므로 각 페이지에서 해당 폴더에서 CSS 파일을 찾는 서버 측 스크립트를 실행하고 해당 파일이있는 경우 페이지를 추가 할 수 있습니다.
방문자에게 상대 브라우저가있는 경우에만로드하는 브라우저 특정 항목에 대해 다른 CSS 파일을 작성 하는 것이 좋습니다.
그렇게하면 CSS를 분리하는 견고하고 최적화 된 방법으로 끝납니다. 그러나 주 파일에는 여전히 사용되지 않는 규칙이 있지만 논리적으로 볼 수있는 위치에 있습니다.
또한 CSS 파일의 3 가지 "레이어"는 단일 CSS 파일처럼 캐시됩니다.