각 페이지에 대해 하나의 CSS 파일 또는 개별 CSS 파일?
https://stackoverflow.com/questions/1813383
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
페이지를 작성할 때 각 페이지에 대한 개별 스타일 시트 또는 전체 사이트의 큰 스타일 시트를 원하십니까? 로드 목적으로, 개별 파일은로드의 총 CSS가 적기 때문에 개별 파일이 더 나은 관행이 아닌가?
해결책
단일 파일을 사용하면 CSS 파일이 캐시되어 방문한 각 페이지에 대해 새 파일을 다운로드 할 필요가 없습니다.
도움을주기 위해 나는 보통 내 CSS를 CSS 클리너 파일 크기를 줄이기 위해 추가로 가능합니다 .htaccess를 사용하는 GZIP CSS 또한 다시 더 작게 만들었습니다.
마지막으로 모든 CSS를 단일 파일에 넣으면 앞으로 프레젠테이션을 더 쉽게 변경할 수 있습니다 (처음에 CSS를 사용하는 전체 이유)도 디버깅이 더 쉬워집니다.
편집, 2017 년 5 월
7 년 이상이 많이 바뀌 었고이 답변을보고있는 사람은 누구나 새로운 자산 전달 방법을 연구하는 것을 고려해야합니다. 특히 현재 HTTP2를 사용하고 전처리 기는 더 흔합니다.
다른 팁
다른 제안은 개발 중에 여러 스타일 시트를 사용하고 모든 스타일 시트를 생산 배포를 위해 단일 CSS 파일로 병합하는 메커니즘을 갖습니다. 이를 위해서는 생산 배포 전에 약간의 추가 코딩과 일부 추가 스크립트가 실행되어야하지만 개발 사용 및 생산 사용에 이상적입니다. 프로세스가 올바르게 자동화 된 경우 (달성하기가 어렵지 않음) 이런 종류의 실수도 발생하지 않습니다.
스타일 시트의 주요 목적은 모든 페이지에서 디자인을 변경할 수 있도록하는 것입니다. 당신이 가지고 있다면 h1 {color:red;} 각 페이지에서 나중에 파란색으로 변경하려면 각 페이지의 스타일 시트를 편집해야합니다. 하나의 스타일 시트를 사용하면 색상을 변경할 수 있고 전체 사이트에 반사 할 수 있습니다.
또한 스타일 시트는 각 페이지에서 다운로드하지 않고 사용자의 컴퓨터에 캐시됩니다.
웹 사이트의 모든 페이지에서 일관된 스타일을 원한다면 모든 일반적인 스타일에 대해 하나의 스타일을 사용하십시오. 그렇지 않으면 많은 스타일 시트를 유지하기가 매우 어려울 수 있습니다. 여러 스타일 시트 중 하나에 변경 사항이 추가되어야합니다.
단일 페이지에서만 사용되는 스타일 시트는 별도의 스타일 시트로 이동할 수 있습니다. 이것은 대규모 단일 페이지 스타일 시트 및/또는 스타일 시트에 가장 유용 할 수 있습니다.
스타일 시트는 모든 페이지 새로 고침에 다시로드되지 않습니다. 홈페이지에서 대형 일반 목적 스타일 시트를 참조하면 한 번만 다운로드하고 향후 사용을 위해 캐시됩니다.
"로드 목적으로, 작은 스타일 시트를 원하지 않으므로 개별 스타일을 만들기 위해 더 나은 방법이 있습니까?"
1 스타일 시트를 사용하여 캐시 된 다음 쉽게 다시로드 할 수있는 반면 리버스 효과가 발생할 수 있지만 메소드와 함께 각 페이지에 새 CSS 파일을 지속적으로로드합니다.
대부분의 사이트에는 한 유형의 미디어에 대해 둘 이상의 스타일 시트가 필요하지 않습니다. 그러나 사이트가 디자인이 크게 변하면 모든 공통 속성을 갖는 기본 스타일 시트와 차이점이 포함 된 각 페이지에 대한 보조 스타일 시트를 갖는 것이 좋습니다.
CSS 변경이 크기가 크면 별도의 스타일 시트의 사용을 보증 할 수있는 경우에만 사용해야합니다.
실제로 실제 웹 프로그래머 (PHP와 같은 스크립팅이 아닌 Java의 웹 프로그래밍 재료)이기 때문에 실제 웹을 본 적이없는 의견을 제시해야합니다. 디자이너 주다:
계속해서 CSS 파일을 가능한 한 여러 논리 파티션으로 나누십시오! 엄청나게 양식화 된 테이블이있는 경우 CSS 물건을 하나의 파일로 수집하고 실제 페이지의 기본 스타일을 다른 파일에 수집하고 메뉴 탐색 CSS를 추가하십시오. 물론 개별 CSS를 재사용 할 수 있습니다 : S가 관련이 있지만 하지 마라 모든 것을 하나의 큰 파일에 넣으십시오!
나는 같은 질문을 찾는이 실을 발견했다. 내 생각은 이런 식으로 구조화하는 것이었다 ..
Layout.css <--- 사이트의 구조, 사이트 전체에서 공통적 인 링크, 제목 등. form.css <- 일반 양식 스타일 reset.css <- 모든 문서를 사용하면 재설정
그리고 현재 나는 모든 페이지 스타일에 pages.css를 사용합니다 ..
또는
Homepage.css About.css Gallery.css
