CSS 감사 도구

CSS의 크기는 얼마입니까? 얼마나 반복적입니까? CSS 특이성 점수는 어떻습니까? 일부 선언 및 공급업체 접두사를 안전하게 제거할 수 있습니까? 그렇다면 어떻게 신속하게 찾을 수 있습니까? 지난 몇 주 동안 우리는 CSS를 리팩토링하고 정리하는 작업을 했으며 결과적으로 중복을 식별하는 데 도움이 되는 몇 가지 유용한 도구를 발견했습니다. 그럼 그 중 일부를 검토해 보겠습니다.

CSS 통계

CSS Stats는 페이지에서 요청된 CSS 파일에 대한 철저한 감사를 실행합니다. 많은 유사한 도구와 마찬가지로 의사 클래스 및 의사 요소와 함께 규칙, 선택기, 선언 및 속성에 대한 대시보드와 유사한 보기를 제공합니다. 또한 레이아웃 및 구조에서 간격, 타이포그래피, 글꼴 스택 및 색상에 이르기까지 모든 스타일을 그룹으로 나눕니다 .

CSS Stats가 제공하는 유용한 기능 중 하나는 CSS 특이성 점수로 , 일부 선택기가 얼마나 불필요하게 구체적인지를 보여줍니다. 점수가 낮고 곡선이 더 평평할수록 유지 관리가 용이합니다.

여기에는 사용된 색상에 대한 개요, 선언 순서에 따라 인쇄된 개요, Total vs. Unique 선언 에 대한 점수와 함께 어떤 속성이 추상화를 만드는 데 가장 적합한 후보인지 식별하는 데 도움이 되는 비교 차트가 포함되어 있습니다. CSS의 주요 문제가 어디에 있고 무엇에 집중해야 하는지 이해하기 위한 좋은 출발점입니다.

노란색 실험실 도구

Yellow Lab Tools는 웹 성능을 감사하기 위한 무료 도구이지만 CSS의 복잡성을 측정하는 데 매우 유용한 도우미도 포함되어 있으며 이러한 문제를 해결하는 방법에 대한 실행 가능한 통찰력도 제공합니다.

이 도구는 복잡한 선택기 및 구문 오류와 함께 중복 선택기 및 속성 , 이전 IE 수정, 이전 공급업체 접두사 및 중복 선택기를 강조 표시합니다. 분명히 각 섹션을 자세히 살펴보고 구체적으로 어떤 선택기 또는 규칙을 덮어쓰거나 반복하는지 연구할 수 있습니다. 이는 덜 매달린 과일을 발견하고 신속하게 해결할 수 있는 훌륭한 옵션입니다.

우리는 조금 더 깊이 갈 수 있습니다. 이전 공급업체 접두사에 대한 개요를 탭하면 위반자를 확인할 수 있을 뿐만 아니라 이러한 접두사를 수용 하는 브라우저 도 확인할 수 있습니다. 그런 다음 Browserslist 구성으로 이동하여 너무 많은 공급업체 접두사를 제공하고 있지 않은지 다시 확인하고 Browsersl.ist 또는 터미널을 통해 구성을 테스트할 수 있습니다.

CSS 특이성 시각화 도우미

CSS Specificity Visualizer는 CSS 파일 전체에서 CSS 선택기 및 해당 특성에 대한 개요를 제공합니다. 스타일시트를 제출하면 도구가 특정성 그래프를 반환합니다. x축은 CSS에서 선택기의 물리적 위치를 보여줍니다. 왼쪽에서 오른쪽으로 배치되어 첫 번째 것은 왼쪽에, 마지막은 오른쪽에 있습니다. y축은 선택기의 실제 특이성을 보여줍니다. 아래쪽에서 가장 구체적인 것부터 시작하여 맨 위에서 가장 구체적인 것으로 끝나는 것입니다.

일반적으로 높은 특이성은 일반적으로 위험 신호이므로 뾰족한 그래프와 많은 양의 노이즈에 주의하십시오. 반면에 전반적으로 특이도가 낮고 노이즈가 적은 상승 추세 그래프는 "좋음"으로 간주될 수 있습니다. 단일 데이터 포인트 위로 마우스를 가져가면 정확한 선택기를 보거나 관심 영역을 확대할 수도 있습니다.

프로젝트 월레스

다른 도구와 달리 Bart Veneman이 만든 Project Wallace는 시간이 지남에 따라 CSS 히스토리를 추가로 보관합니다. 웹훅을 사용하여 CI에서 푸시할 때마다 CSS를 자동으로 분석할 수 있습니다. 이 도구는 CSS 복잡성에 대한 일반적인 개요와 함께 규칙 당 평균 선택기, 규칙 당 최대 선택기 및 규칙당 선언과 같은 특정 CSS 관련 측정항목을 조사하여 시간 경과에 따른 CSS 상태를 추적합니다.

파커

Katie Fenn의 Parker는 스타일시트에 대한 메트릭을 실행하고 복잡성에 대해 보고하는 명령줄 스타일시트 분석 도구입니다. Node.js에서 실행되며 CSS Stats와 달리 이를 실행하여 빌드 프로세스의 일부로 로컬 파일을 측정할 수 있습니다.

DevTools CSS 감사

물론 DevTools의 CSS 개요 패널을 사용할 수도 있습니다. ("실험 설정"에서 활성화할 수 있습니다.) 페이지를 캡처하면 미디어 쿼리, 색상 및 글꼴 선언에 대한 개요를 제공할 뿐만 아니라 안전하게 제거할 수 있는 사용하지 않는 선언 도 강조 표시합니다.

또한 CSS 적용 범위는 페이지에서 사용되지 않은 CSS의 개요를 반환합니다. Puppeteer로 조금 더 나아가 사용하지 않는 CSS/JS를 대량으로 찾을 수도 있습니다.

많은 탭, 탭 이동 및 창 크기 조정을 포함하는 몇 가지 시나리오를 거치면서 "코드 적용 범위"가 설정되면 DevTools가 (내보내기/다운로드 아이콘을 통해) JSON으로 수집하는 적용 범위 데이터도 내보냅니다. 그 위에 API도 제공하는 Puppeteer를 사용하여 적용 범위를 수집할 수 있습니다.

Smashing Magazine의 유용한 DevTools 팁 및 바로 가기 에서 Chrome, Firefox 및 Edge에 대한 몇 가지 세부 정보와 몇 가지 추가 DevTools 팁을 강조 표시했습니다.

스타일 체크

HTML 요소에 대한 CSS의 효과를 일반적으로 어떻게 확인합니까? 프로젝트에 직접 또는 모든 스타일을 한 눈에 보기 위해 사용하는 모든 HTML 요소가 포함된 전용 테스트 HTML 파일이 있습니까? Austin Gill은 비슷한 접근 방식을 취하는 작은 도구인 Style Check를 만들었습니다. 이점: 테스트 HTML 파일을 직접 설정할 필요가 없으며 도구가 알아서 해줍니다.

.css 파일을 Style Check에 업로드하면 일반 HTML 요소에 미치는 영향을 감사할 수 있습니다. 라이브러리(Bedrocss, Bootstrap, Eric Meyer의 CSS Reset 및 Normalize.css 사용 가능)를 선택하거나 인라인 스타일을 입력할 수도 있습니다. 요소는 제목과 단락에서 미디어, 목록, 표, 버튼, 양식, 기타 입력, 그리고 아래 첨자 및 위 첨자, 코드, 따옴표 등과 같은 세부 정보에 이르기까지 다양합니다. 편리한 작은 도우미.

어떤 도구를 사용하고 있습니까?

이상적으로는 CSS 감사 도구는 CSS가 렌더링 성능에 얼마나 큰 영향을 미치는지, 어떤 작업이 비용이 많이 드는 레이아웃 재계산 으로 이어지는지에 대한 통찰력을 제공할 것입니다. 또한 어떤 속성이 렌더링에 전혀 영향을 미치지 않는지(Firefox DevTools가 수행하는 것처럼) 강조 표시할 수 있으며 아마도 약간 더 효율적인 CSS 선택기를 작성하는 방법을 제안할 수도 있습니다.

이것들은 우리가 발견한 몇 가지 도구일 뿐입니다. 병목 현상을 식별하고 CSS 문제를 더 빨리 수정하는 데 잘 작동하는 도구와 귀하의 이야기를 듣고 싶습니다. 댓글로 여러분의 이야기를 댓글로 남겨 주세요!

이와 같은 다음 게시물을 놓치지 않으려면 저희의 친절한 이메일 뉴스레터를 구독하실 수도 있습니다. 그리고 물론 행복한 CSS 감사 및 디버깅입니다!