스타일을 작성할 때 페이지의 CSS가 여러 버전으로 수정된 후 일부 스타일이 더 이상 사용되지 않거나 일부 스타일의 이름이 바뀌고 원래 스타일이 삭제되는 것을 잊었을 수 있습니다. 간단히 말해서 일부 스타일은 쓸모가 없을 수 있습니다. 페이지의 콘텐츠. 이러한 쓸모없는 서버 공간 낭비와 대역폭 소비로 인해 유지 관리 비용도 증가하게 됩니다. 그렇다면 쓸모없는 스타일을 정리할 수 있는 방법이 있을까요? 오늘은 좀 더 유용한 도구에 대해 살펴보겠습니다.
Dust-Me 선택기
Dust-Me는 매우 유용하고 사용하기 쉬운 Firefox 플러그인으로, 페이지에서 호출된 모든 CSS 파일을 분석하고 페이지에서 사용되지 않는 파일을 분석할 수 있습니다.
<link> 태그, <?xml-stylesheet?> 처리 지침, @import 문 등을 사용하여 도입된 스타일 파일을 포함하여 로컬 및 원격 스타일 파일을 지원합니다. (그러나 페이지에서 <style> 블록 및 인라인 스타일은 지원하지 않습니다.)
IE 조건부 주석에 도입된 지원 스타일 파일.
단일 페이지 또는 전체 웹사이트를 확인할 수 있습니다.
CSS1 선택기, 대부분의 CSS2 및 CSS3 선택기를 지원합니다.
"* html #fuck-ie"와 같은 일반적인 CSS 해킹은 "html #fuck-ie"로 해석된다는 점을 이해하세요.
Firefox 3.5 및 Firefox 3.0을 지원합니다. 실제로 FF 3.5의 js 엔진 개선 덕분에 FF 3.5의 성능은 FF 3.0보다 50% 향상되었습니다.
설치: 여기를 클릭하세요. 동시에 프로젝트의 소스 코드를 다운로드할 수 있으며 자세한 내용은 Dust-Me 선택기 공식 페이지를 참조하세요.
페이지 속도
Page Speed는 Google에서 제공하는 프런트엔드 성능 분석 도구입니다. YSlow와 다소 유사하지만 사용하지 않는 CSS 제거와 같은 좀 더 독특하고 유용한 도구를 제공합니다.
YSlow와 마찬가지로 Page Speed는 Firebug를 사용합니다. 자세한 내용과 설치를 보려면 여기를 방문하세요.
CSS 중복 검사기
CSS Redundancy Checker는 쓸모없는 스타일에 대해 특정 CSS 파일을 사용하는 모든 페이지를 검사할 수 있는 무료 온라인 애플리케이션입니다. 여러 페이지에서 특정 스타일의 사용 현황을 동시에 확인할 수 있습니다. 이 도구의 단점은 한 번에 여러 HTML 페이지를 확인할 수 있지만 한 번에 하나의 CSS 파일만 확인할 수 있으며 수동으로 입력해야 한다는 것입니다.
IntelliJ 아이디어
IntelliJ IDEA DreamWeaver와 유사한 매우 강력한 IDE이지만 중국에서는 많이 사용되지 않습니다. 소프트웨어에는 CSS 파일에서 사용되지 않는 클래스와 ID를 분석할 수 있는 즉각적인 코드 분석 도구가 포함되어 있습니다.
표현 웹
Microsoft의 차세대 웹사이트 개발 도구인 Expression Web은 아직도 많은 사람들이 사용하고 있습니다. CSS 보고서 기능을 사용하면 삭제해야 할 미사용 CSS를 확인할 수 있습니다. (저는 실제로 EW를 사용하여 웹사이트를 개발한 적이 없습니다. 이 소프트웨어를 사용하는 아이들이 도움말을 확인하세요.)
결론
물론 여기에 언급되지 않은 다른 도구도 있을 수 있습니다. 알고 있는 내용이 있으면 모든 사람과 공유할 수 있습니다.
또한, 우리는 일반적으로 전체 웹사이트의 스타일을 하나 이상의 스타일 파일로 작성한 다음 이를 모두 페이지에서 호출하거나 모듈에서 호출합니다. 그러면 특정 CSS 파일의 스타일이 특정 페이지에서는 사용되지 않을 수도 있지만, 특정 페이지에서 사용되므로 CSS 파일에서 중복된 스타일을 감지하기 위해 이러한 도구를 사용할 때 스타일을 지우면 다른 페이지에 영향을 미칠 수 있으므로 Page Speed에서 제공하는 확인 결과는 주의가 필요합니다. 단일 페이지에만 적용됩니다. 전체 웹사이트에는 적합하지 않습니다. 대신 Dust-Me 또는 CSS Redundancy를 사용하세요. Checker를 사용하면 전체 웹사이트 또는 웹사이트의 여러 페이지를 동시에 확인할 수 있어 실수를 방지할 수 있습니다.
추신: Knowledge Capsules의 작업에 깊은 감사를 드립니다.