2012-06-04 116 views
4

CSS 파일의 크기를 줄이려고합니다. 아주 CSS 인 템플릿에서입니다. & JS heavy. CSSMin을 사용하더라도 CSS 파일 크기는 250kb입니다.동적 웹 사이트에서 중복 CSS 규칙을 제거하십시오.

내가 CSS를 많이 사용하는 반면, 나는 그것을 모두 사용하지 않습니다. 그래서 어떤 스타일을 제거 할 수 있는지 알아 내려고 노력 중입니다. Dust-Me 선택기에 대해 알고 있습니다. 그러나 웹 사이트를 정적으로보아야합니다. HTML5와 CSS3 - 웹 사이트는 이제 매우 동적이며 CSS의 대부분은 동적 이벤트 또는 '반응 형'이벤트, 즉 부트 스트랩에서 발생합니다.

질문 : 웹 사이트에 내 모든 CSS 사용 기록을 시간 단위로 '기록'하는 도구가있어서 각 요소를 클릭하고 이동하고 내 사이트와 상호 작용할 수 있습니다. 그런 다음 끝에는 & 스타일이 사용되지 않았는지 알려주세요.

답변

1

2백50킬로바이트 정말 그냥 CSS 파일 같은 큰 인물이다.
템플릿에는 일반적으로 모든 파일에 필요한 모든 CSS가 하나의 파일에 들어 있습니다.
내가 제안 :

이 당신의 CSS 코드를 절단하지 마십시오, 그들은 시간의 어떤 점을 필요할 수 있습니다.

대신

전, 제안 다른 페이지 stylings가에 대한 작은 파일의 수에 CSS 파일을 깰 것 같은 로그인 페이지, 페이지에 대한 다른 CSS 파일 등 다른 CSS
CSSHTML 코드를 적극적으로 읽고 을 확인하십시오. CSS 코드의 상당 부분이 HTML 섹션에 사용됩니다.

업데이트 :
당신은 Removed Unused CSS - CSS optimizer을 시도 할 수 있습니다.
나는 개인적으로 그것을 사용하지 않았다. 그것은 당신을 위해 일하기를 희망한다.

+0

Asif -하지만 작동하지 않는 사이트는 기본적으로 "SaaS"응용 프로그램입니다 - CSS의 대부분은 여러 페이지에서 동적으로 재사용됩니다. 그래서 브라우저로 보내지는 하나의 minfied CSS 파일을 만드는 것이 더 합리적입니다 한 번 캐시하고 오랫동안 캐시 했으니 까. – Laurence

+0

너 말했어. 결국에는 어떤 스타일이 사용되고 사용되지 않았는지 알려주지?_, 내가 템플릿 디자이너가된다면 결코 사용하지 않을 코드를 제공하는 노력을 결코 기울이지 않을 것입니다. – Asif

+0

템플릿은 기능과 유연성을 많이 갖춘 일반적인 구입 템플릿입니다. 나는 다만 그것을 나의 웹 사이트에서 전부 사용하지 않는다. 그래서 스타일 + 코드가 사용되었을 수 있습니다 ...하지만 그들은 내 경우에 werent합니다 – Laurence

1

CSS 사용법은 Firefox를위한 훌륭한 확장 프로그램입니다. 그것은 어떤 CSS가 현재 페이지에서 사용되는지 알려줍니다.

는 링크 : https://addons.mozilla.org/en-us/firefox/addon/css-usage/

+0

hmmm .. thats 'close'- 유일한 문제는 내가 웹 사이트에서 단 한 번의 작업을 할 때마다 '스캔'을 눌러야한다는 것입니다. 그러면 내 사이트에서 많이 사용됩니다. 이 같은 것이 있는지, 자동적인지는 알고 있습니까? – Laurence

1

도움이 될만한 도구가 두 가지 있습니다.

helium은 사용되지 않은 CSS 규칙을 발견하는 자바 스크립트 도구입니다.

csscss은 중복을보고하는 소스 코드 분석기입니다. 나는 이것을 한 어떤 것도 찾을 수 없기 때문에 csscss를 정확하게 썼기 때문에 나는 편향되어있다. 그러나 많은 사람들이 유용하다고 생각합니다.

관련 문제