CSS 코드를 최적화하려면 어떻게해야합니까? -moz-와 -webkit-, border-top-left-radius 등과 같이 다양한 CSS3 라인이 있습니다. CSS 파일의 크기가 클수록 페이지 로딩 시간이 현저하게 늘어날 것입니다.CSS 코드를 최적화하는 방법은 무엇입니까?
또 다른 질문 : 저는 꽤 많은 코드를 작성했지만, 일부 코드는 사용하지 않습니다. 나는 2000 개가 넘는 CSS 코드를 가지고 있으며 아마도 200-300 줄 정도를 제거 할 수있을 것입니다. 모든 코드를 수정할 가치가 있습니까? 을 Gzip으로 압축하여
- Gzip으로 압축의 효과 : 그것은 매우 크기를 그것은 파일을 줄일 서버
에그들을 업로드하기 전에 ...
편집을
GZip the files을 꽤 시간이 걸릴 것입니다. CSS 파일을 Bargaineering에 게시하면 그 크기는 28.2K에서 7.3K로 74.1 % 가량 줄어 들었습니다.
파일 크기가 작을수록 다운로드가 빨라지고 사용자는 빠른 스타일을 렌더링 할 수 있습니다. 다양한 파일 축소 스크립트 내가 YUI 압축기를 확인해 줄이 있습니다 : body { background: black; color: white }
여러 특성을 결합
body { background: black; color: white; }
에 : http://refresh-sf.com/yui/
는 항상 마지막 세미콜론을 제거
.class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
.class { margin: 10px 20px 30px 40px; }
에 사용 간단한 색상 (대신 `#FFFFFF, #AABBCC, #FF0000이 #FFF, #ABC, #F00을 넣어)
'margin : 10'은 작동하지 않습니다 ('0' 만 사용). 또한 마지막 세미콜론을 제거하는 것은 과도한 작업입니다. –
고마워. 그것을 제거했습니다. 마지막 세미콜론을 제거하는 것에 대한 많은 제안을 보았습니다. 누군가가 그것이 나쁘다고 말한 적이 한번도 없었습니다. 그러나 필자는 항상 세미콜론을 사용하는 것을 선호합니다. 버릇 + 나중에 코드를 추가하는 것이 더 쉽습니다. –
왼쪽 및 오른쪽 여백 값은 뒤쪽으로, 줄여서 표시된 예에서는 10px 40px 30px 20px 여야합니다. – austincheney
Chrome의 개발 도구는 어떤 CSS 규칙이 사용되지 않는지 보여 줄 수 있습니다. –
코드 수정은 나쁜 생각이 아닙니다. – dave
CSS 파일이 (브라우저에서) 캐시되었는지 확인하면 CSS 파일의 크기에 관계없이 문제가되어서는 안됩니다. –