웹 사이트에서 사용되지 않는 CSS를 찾을 수있는 방법이 있습니까?

Question

웹 사이트에서 사용되지 않는 CSS를 찾을 수있는 방법이 있습니까?

방금 ​​상속 한 프로젝트를 정리하려고합니다.

Answer 1

Dust-me Selectors는 사용하지 않는 선택기를 찾는 Firefox 플러그인입니다.

Answer 2

난 그냥이에 달려 귀하의 질문에 기억 : http://github.com/geuis/helium-css

Answer 3

CSS에 대한 베스트 프랙티스 방법에 대해 말할 수 있도록 많은이입니다. 주요 요점에 충실하려고 노력할 것입니다.

CSS 재설정을 사용하십시오.

과 #container em {}과 같은 일반적인 CSS 문을 제거하십시오. h1.section-title 및 #container em.important {}을 사용하면 훨씬 편리합니다. h1 또는 em을 문서의 다른 곳으로 사용하도록 선택하면 기존 코드를 무시하지 않아도됩니다.

필요하지 않으면 CSS 선택기에 너무 구체적이지 마십시오. 특정 섹션에 있으면 요소가 어떻게 표시 될 것인지를 변경하는 경우에만 특수성이 필요합니다. 그렇지 않으면 block 클래스의 코드를 다시 사용할 수있게하려면 #container .content .block ...을 많은 경우에 .block ...으로 줄일 수 있습니다.

CSS에서 공통점을 찾고 재사용 가능한 클래스를 만들 수 있는지 확인하십시오. 비슷한 블록이 class="favorites" 및 class="popular" 인 경우 class="block block-favorites" 및 class="block block-popular"으로 바꾸고 공통점을 .block에 입력합니다.

CSS의 영역을 자동 너비 (암시 적으로 수행 할 수 있음)로 설정하여 컨테이너의 너비가 커지도록하는 습관을 들여야합니다. 이렇게하면 코드를 변경하지 않고도 웹 사이트의 좁은 부분에서 웹 사이트의 넓은 부분으로 섹션을 이동하는 것이 매우 쉽습니다.

코드에 주석을 달고 섹션으로 구분하면 일반적으로 코드를보다 쉽게 ​​읽을 수 있습니다.

더 강력한 CSS 선택기를 구현할 때 코드가 얼마나 깨끗하게 보이는지 놀랄 것입니다. 대부분은 브라우저 간 호환이 가능합니다 (인터넷   탐색기 7 이상).
일부 귀중한 자원 : When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

답변 이동에서 :
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

크롬 59이 내장 된 CSS와 자바 스크립트에 대한 범위 표시 2017-04 년 이후 : https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

개발자 도구를 열고 명령을 사용하여 활성화 할 수 있습니다. nu (Mac에서는 Cmd+Shift+P, Windows 및 Linux에서는 Ctrl+Shift+P) "show coverage"를 입력하십시오.