쓸모없는 CSS 스타일을 정리하는 방법을 알고 계십니까?

CSS 스타일을 작성할 때 CSS 스타일이 수정되거나 인터페이스 디자인이 변경되는 경우가 종종 있습니다. 여러 버전에 대해 페이지의 CSS를 수정한 후에는 일부 스타일이 더 이상 사용되지 않을 수도 있고 일부 스타일이 더 이상 사용되지 않을 수도 있습니다. 이름을 변경했지만 원래 이름을 삭제하는 것을 잊어버렸습니다. 즉, 페이지에 쓸모없는 스타일이 있을 수 있습니다.

서버 공간과 대역폭 소비의 이러한 쓸모없는 낭비로 인해 유지 관리 비용도 증가하게 됩니다. 그렇다면 쓸모없는 스타일을 정리할 수 있는 방법이 있을까요? 오늘은 좀 더 유용한 도구에 대해 살펴보겠습니다.

1. Dust-Me 선택기

Dust-Me는 매우 유용하고 사용하기 쉬운 Firefox 플러그인으로, 페이지에서 호출되는 모든 CSS 파일을 분석하고, 페이지에서 사용되지 않는 파일도 분석할 수 있습니다. .

태그, 처리 지침, @import 문 등을 사용하여 도입된 스타일 파일을 포함한 로컬 및 원격 스타일 파일을 지원합니다. 페이지) 블록 및 인라인 스타일)

IE 조건부 주석에 도입된 스타일 파일 지원

페이지 또는 전체 웹사이트를 확인할 수 있습니다.

CSS1 선택기, 대부분의 CSS2 및 CSS3 선택기 지원; "* html #fuck-ie"는 "html #fuck-ie"로 간주됩니다.

실제로 FF 3.5, FF 3.5의 js 엔진 개선 덕분에 Firefox 3.5 및 Firefox 3.0을 지원합니다. 성능은 50%입니다. FF 3.0보다 높아졌습니다.

설치: 여기를 클릭하세요. 동시에, 프로젝트의 소스 코드를 다운로드할 수 있습니다. 자세한 내용은 다음 사이트를 방문하세요. Dust-Me 선택기 공식 페이지.

2. Page Speed ​​​​

Page Speed는 Google에서 제공하는 프런트엔드 성능 분석 도구입니다. YSlow와 다소 유사하지만 사용하지 않는 CSS 제거와 같은 좀 더 개인화되고 유용한 도구를 제공합니다. :

Page Speed와 YSlow도 Firebug에 의존합니다.

Page Speed는 YSlow와 같은 Firebug에 의존합니다. 자세한 내용과 설치를 보려면 여기를 방문하세요.

3. CSS Redundancy Checker

CSS Redundancy Checker는 특정 CSS 파일을 사용하는 모든 페이지에서 불필요한 스타일을 확인할 수 있는 무료 온라인 애플리케이션입니다. 여러 페이지에서 특정 스타일의 사용 현황을 동시에 확인할 수 있습니다.

이 도구의 단점은 한 번에 여러 HTML 페이지를 확인할 수 있지만 한 번에 하나의 CSS 파일만 확인할 수 있으며 수동으로 입력해야 한다는 것입니다.

Four, IntelliJ IDEA
IntelliJ IDEA DreamWeaver와 유사한 상당히 강력한 IDE이지만 중국에서는 많이 사용되지 않습니다. 소프트웨어에는 CSS 파일에서 사용되지 않는 클래스와 ID를 분석할 수 있는 즉각적인 코드 분석 도구가 포함되어 있습니다.

5. Expression Web

Expression Web은 Microsoft의 차세대 웹사이트 개발 도구로 여전히 많은 사람들이 사용하고 있으며, CSS 보고서 기능을 통해 삭제해야 할 미사용 CSS를 확인할 수 있습니다. (저는 실제로 EW 웹사이트를 사용하여 개발한 적이 없습니다. 이 소프트웨어를 사용하는 아동용 신발이 이를 확인하는 데 도움이 되기를 바랍니다.)

요약:

물론 여기에 언급되지 않은 다른 도구가 있을 수도 있습니다. 알고 있는 것이 있으면 모든 사람과 공유할 수 있습니다.

또한, 우리는 일반적으로 전체 웹사이트의 스타일을 하나 이상의 스타일 파일로 작성한 다음 이를 모두 페이지에서 호출하거나 모듈에서 호출합니다. 이는 웹사이트 스타일 파일 구성에 대한 52CSS.com 기사에 소개되어 있습니다.

특정 CSS 파일의 스타일은 특정 페이지에서는 사용되지 않지만 다른 페이지에서는 사용될 수 있으므로 이러한 도구를 사용하여 CSS 파일에서 중복된 스타일을 감지할 때 스타일을 지우면 다른 페이지에 영향을 미칠 수 있으므로 주의해야 합니다.

따라서 페이지 속도별로 제공되는 확인 결과는 전체 웹사이트가 아닌 단일 페이지에만 적용됩니다. Dust-Me 또는 CSS Redundancy Checker를 사용하면 웹사이트 전체를 확인하거나 웹사이트의 여러 페이지를 동시에 확인할 수 있습니다. 시간이 있으니 안전할 수 있습니다.

읽어주신 모든 분들께 감사드리며, 많은 혜택 받으시길 바랍니다.

이 기사는 https://blog.csdn.net/wuchengzhi82/article/details/8669052

추천 튜토리얼: "

CSS Tutorial

"에서 복제되었습니다.

위 내용은 쓸모없는 CSS 스타일을 정리하는 방법을 알고 계십니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!