CS 감사 도구

CSS 코드 감사는 개발자의 일상적인 작업에 일반적인 작업이 아니지만 때로는 수행해야합니다. 이것은 중요한 CSS를 식별하고 사용하지 않는 선택기를 줄이기위한 성능 평가의 일부일 수 있습니다. 또한 접근성을 향상시키고 코드베이스에 사용 된 모든 색상에 대한 대비 평가를 수행하는 것일 수도 있습니다. 일관성을 강화하는 것도 될 수도 있습니다!

어떤 이유로 든, 그리고 이런 일이 발생하면 보통이 기사에 설명 된 도구 중 일부를 사용합니다. 그러나 도구를 도입하기 전에 먼저 "감사 된"CSS의 의미를 이해해 봅시다.

CSS 감사는 쉽지 않습니다

일반적으로 코드 감사에는 코드를 분석하여 가능한 성능 문제와 같은 오류 또는 기타 불규칙성을 찾는 것이 포함됩니다. 대부분의 프로그래밍 언어의 경우 코드 감사 개념은 비교적 간단합니다. 코드는 유효하거나 유효하지 않습니다. 그러나 CSS는 특별한 언어이며 오류는 대부분 브라우저에서 무시됩니다. 또한 여러 가지 방법으로 동일한 스타일을 구현할 수 있습니다. 이로 인해 CSS 감사가 조금 까다로워집니다.

좋아하는 코드 편집기의 확장을 사용하거나 코드 검사관을 설정하여 이러한 오류가 발견되는 것을 방지 할 수 있습니다. 그러나 그것은 내가 여기서 보여주고 싶은 것이 아니며, 그것은 충분하지 않습니다. 우리는 여전히 너무 많은 색상, 타이포그래피 정의 또는 Z 인덱스를 사용할 수 있으며,이 모든 것은 지저분하고 유지하기가 어렵고 불안정한 CSS 코드 기반으로 이어질 수 있습니다.

CSS를 진정으로 감사하려면 더 깊이 파고 모범 사례로 간주되지 않는 장소를 찾아야합니다. 이 장소를 찾으려면 다음 도구를 사용할 수 있습니다.

브라우저 개발자 도구

Chrome 개발자 도구에서 CSS 감사에 사용되는 도구를 살펴 보겠습니다. Chromium을 기반으로 Brave 브라우저를 사용하고 있습니다. 2020 년에 발표 된 많은 훌륭한 데트 툴 기능을 컴파일하는 Umar Hansa 의이 기사를 확인할 수도 있습니다.

CSS 코드를 수동으로 확인하려면 검사 도구를 사용할 수 있습니다. 이를 사용하여 CSS 코드가 특정 요소에 적용되는 것을 볼 수 있습니다. 검사를 사용하여 색상, 글꼴, 크기 및 접근성에 대한 자세한 내용을 볼 수 있습니다.

그리드 및 플렉스 검사관

DevTools 인터페이스에는 실용적인 세부 사항이 많이 있지만 제가 가장 좋아하는 것은 그리드 및 플렉스 검사관입니다. 이를 활성화하려면 설정 (개발자 도구의 오른쪽 상단에있는 피니언 아이콘)으로 이동하여 실험을 클릭하고 CSS 그리드 및 Flexbox 디버깅을 활성화하십시오. 이 도구는 주로 레이아웃 문제를 디버깅하는 데 사용되지만 때로는이를 사용하여 CSS 그리드 또는 Flexbox가 페이지에서 사용되는지 신속하게 결정합니다.

CSS 개요

CSS 점검은 매우 기본적이며 모든 작업을 수동으로 수행해야합니다. 더 고급 DevTools 기능을 살펴 보겠습니다.

CSS 개요는 그 중 하나입니다. CSS 개요 도구를 사용하려면 설정으로 이동하여 실험을 클릭 한 다음 CSS 개요 옵션을 활성화하십시오. CSS 개요 패널을 열려면 CMD Shift P 바로 가기 키를 사용하고 "CSS 개요"를 입력 한 다음 "CSS 개요 표시"를 선택할 수 있습니다. 이 도구는 색상, 글꼴, 대비 문제, 사용하지 않은 청구 및 미디어 쿼리와 같은 CSS 속성을 요약합니다. 나는 보통이 도구를 사용하여 CSS 코드가 얼마나 좋거나 나쁜지 확인합니다. 예를 들어, "회색의 50 음영"또는 너무 많은 조판 정의가있는 경우 스타일 가이드가 따르지 않거나 스타일 가이드가 전혀 존재하지 않을 수 있음을 의미합니다.

코드 적용 범위 패널

코드 커버리지 도구는 페이지에 사용되는 코드의 양과 백분율을 표시합니다. 이를 보려면 CMD Shift P 바로 가기 키를 사용하여 "Coverage"를 입력하고 코드 표시 커버리지 표시를 선택한 다음 "새로 고침"아이콘을 클릭하십시오.

URL 필터 입력에서 ".CSS"를 입력하여 CSS 파일 만 필터링 할 수 있습니다. 나는 일반적 으로이 도구를 사용하여 사이트의 전달 기술을 이해합니다. 예를 들어, 적용 범위가 상당히 높다는 것을 알면 각 페이지가 CSS 파일을 별도로 생성한다고 가정 할 수 있습니다. 이것은 중요한 데이터는 아니지만 때로는 캐싱 전략을 이해하는 데 도움이됩니다.

렌더링 패널

렌더링 패널은 또 다른 유용한 도구입니다. 렌더링 패널을 열려면 CMD Shift P를 다시 사용하고 이번에 "렌더링"을 입력하고 "렌더링 표시"옵션을 선택하십시오. 이 도구에는 많은 옵션이 있지만 가장 좋아하는 옵션에는 다음과 같습니다.

• 플래시 그리기 - 다시 그리기 이벤트가 발생하면 녹색 사각형을 보여줍니다. 나는 그것을 사용하여 너무 오랫동안 렌더링 된 영역을 식별하는 데 사용합니다.
• 레이아웃 오프셋 영역 - 레이아웃 오프셋이 발생하면 파란색 사각형을 보여줍니다. 이러한 옵션을 최대한 활용하기 위해 일반적으로 네트워크 탭에서 느린 3G 사전 설정을 설정합니다. 때때로 화면을 녹음 한 다음 비디오를 늦추고 레이아웃 오프셋을 찾습니다.
• 프레임 렌더링 통계 -GPU 및 프레임의 실시간 사용량을 보여줍니다. 이 도구는 무거운 애니메이션 및 스크롤 문제를 식별 할 때 매우 편리합니다.

이러한 도구는 정기 감사에 의해 암시되지 않지만 CSS 코드의 성능과 장치의 에너지를 배출하지 않는지 이해하는 것이 중요하다는 것을 알았습니다.

다른 옵션은 다양한 기능을 모방하고 비활성화하는 것과 같은 다른 옵션이 더 도움이 될 수 있으며, 선호하는 컬러 체계 기능 또는 인쇄 미디어 유형을 강제하고 로컬 글꼴을 비활성화하는 것과 같은 다른 옵션이 있습니다.

성능 모니터

성능 감사를위한 또 다른 도구 CSS 코드는 성능 모니터 입니다. 이를 활성화하려면 CMD Shift P를 다시 사용하여 "Performance Monitor"를 입력하고 성능 모니터 표시 옵션을 선택하십시오. 나는 일반적 으로이 도구를 사용하여 페이지와 상호 작용할 때 또는 애니메이션이 발생할 때 몇 개의 재 계산 및 레이아웃이 트리거되는지 확인합니다.

성능 패널

성능 패널은 페이지로드 중에 모든 브라우저 이벤트의 자세한보기를 표시합니다. 성능 도구를 활성화하려면 CMD Shift P를 수행하고 성능을 입력하고 성능 표시를 선택한 다음 아이콘 새로 고침을 클릭하십시오. 일반적으로 스크린 샷 및 웹 메트릭 옵션을 활성화합니다. 저에게 가장 흥미로운 메트릭은 첫 번째 추첨, 첫 컨텐츠 드로우, 레이아웃 오프셋 및 최대 컨텐츠 드로우입니다. 도면과 렌더링 시간을 보여주는 원형 차트도 있습니다.

DevTools는 전형적인 감사 도구로 간주되지 않을 수 있지만 사용되는 CSS 기능, 코드의 효율성 및 성능 (모두 감사의 주요 요인)을 이해하는 데 도움이 될 수 있습니다.

온라인 도구

DevTools는 강력한 도구입니다. 그러나 우리는 또한 다른 사용 가능한 도구를 사용하여 CSS를 감사 할 수 있습니다.

특정 시각화 도구

특이성 시각화 도구는 코드베이스에서 CSS 선택기의 특이성을 보여줍니다. 사이트를 방문하여 CSS를 붙여 넣으십시오.

주요 차트는 스타일 시트의 특이성과 위치의 관계를 보여줍니다. 다른 두 차트는 특정 사용을 보여줍니다. 나는 종종이 사이트를 사용하여 "나쁜"선택기를 찾습니다. 예를 들어, 많은 특이성이 빨간색으로 표시되면 코드를 개선 할 수 있다고 쉽게 결론을 내릴 수 있습니다. 개선하기 위해 열심히 노력할 때 참조 용 스크린 샷을 저장하는 것이 도움이됩니다.

CSS 별 차트 생성기

CSS 특이성 차트 생성기는 특이성을 시각화하는 유사한 도구입니다. CSS 선택기가 특이성으로 구성되는 방법을 이해하는 데 도움이 될 수있는 약간 다른 차트를 보여줍니다. 도구 페이지에서 알 수 있듯이 "피크는 좋지 않으며 전반적인 추세는 스타일 시트의 특이성이 점점 높아지고 있다는 것입니다." 이것을 더 논의하는 것은 흥미롭지만이 기사의 범위를 벗어납니다. 그러나 Harry Roberts는 그의 기사“Specialty Charts”에 광범위하게 글을 씁니다.

CSS 통계

CSS 통계는 스타일 시트의 분석 및 시각화를 제공하는 또 다른 도구입니다. 실제로 Robin은 이전에 기사를 작성했으며 자신의 작품에서 스타일을 감사하는 데 어떻게 사용했는지 보여주었습니다.

사이트의 URL을 입력하고 Enter를 누르면됩니다. 정보는 선언 계산에서 색상, 타이포그래피, Z- 인덱스, 특이성 등의 의미있는 부분으로 나뉩니다. 다시, 향후 참조를 위해 스크린 샷을 저장해야 할 수도 있습니다.

프로젝트 월리스

Project Wallace는 여기에서 CSS- 트릭에 관한 프로젝트를 다루는 Bart Veneman에 의해 만들어졌습니다. Project Wallace의 힘은 수입 콘텐츠를 기반으로 변경 사항을 비교하고 시각화 할 수 있다는 것입니다. 즉, CSS 코드 기반의 이전 상태를보고 코드가 상태가 어떻게 변하는 지 확인할 수 있습니다. 이 기능이 매우 유용하다는 것을 알았습니다. 특히 코드가 개선되었음을 누군가에게 설득하려는 경우. 이 도구는 단일 프로젝트에 무료이며 더 많은 프로젝트에 대한 유료 계획을 제공합니다.

CLI 도구

DevTools 및 온라인 도구 외에도 CSS를 감사하는 데 도움이되는 CLI (Command Line Interface) 도구가 있습니다.

월리스

내가 가장 좋아하는 CLI 도구 중 하나는 Wallace 입니다. 설치 후 Wallace를 입력 한 다음 사이트 이름을 입력하십시오. 출력은 사이트의 CSS 코드에 대해 알아야 할 모든 정보를 보여줍니다. 내가 가장 좋아하는 것은! 중요성의 사용 수와 코드의 ID 수입니다. 또 다른 간결한 메시지는 가장 높은 특이성 번호와 몇 개의 선택기 수입니다. 이것들은 "나쁜"코드의 적기가 될 수 있습니다.

이 도구에서 가장 좋아하는 것은 외부 파일뿐만 아니라 인라인 코드도 사이트에서 모든 CSS 코드를 추출한다는 것입니다. 이것이 CSS 통계 및 월리스의 보고서가 일치하지 않는 이유입니다.

CSSCS

CSSCSS CLI 도구는 동일한 선언을 공유하는 규칙을 표시합니다. 이는 중복 코드를 식별하고 작성된 코드 양을 줄이는 데 유용합니다. 나는 이것을하기 전에, 특히 오늘날의 캐싱 메커니즘 아래에 두 번 생각할 것입니다. CSSCS는 루비가 필요하다는 것을 언급 할 가치가 있습니다.

다른 유용한 도구

다른 CSS 도구는 감사에 사용되지 않을 수 있지만 여전히 유용합니다. 이것들도 나열해 봅시다 :

• 컬러 분류기 - CSS 색상을 색조별로 그 다음 채도로 설정하십시오.
• CSS 분석기 - CSS 문자열 분석을 만듭니다.
• Constyble - 이것은 CSS 분석기를 기반으로 한 CSS 복잡성 코드 검사기입니다.
• 지금 CSS 추출 - 단일 웹 페이지에서 모든 CSS를 얻으십시오.
• CSS를 얻으십시오 - 페이지에서 모든 CS를 크롤링하십시오.
• UCSS - 사용하지 않는 CS를 식별하기 위해 웹 사이트를 크롤링합니다.

결론적으로

CSS는 우리 주변에 있으며 각 프로젝트의 일류 시민으로 간주해야합니다. 다른 사람들이 당신의 CSS에 대해 생각하는 것은 중요하지 않지만 당신이 생각하는 것은 정말 중요합니다. CSS가 구성되고 잘 작성된 경우 디버깅하는 데 시간이 줄어들고 새로운 기능을 개발하는 데 더 많은 시간을 소비합니다. 이상적으로는 모든 사람이 좋은 CS를 쓰도록 교육하지만 시간이 걸립니다.

오늘 CSS 코드에 집중하기 시작하는 날을 만들어보십시오.

CSS 감사는 모든 사람에게 흥미로운 것이 아니라는 것을 알고 있습니다. 그러나 이러한 도구 중 하나로 코드를 실행하고 CSS 코드 기반의 일부를 개선하려고하면이 기사에서 작업이 완료됩니다.

최근에 CSS 코드에 더 많은 관심을 기울이고 있으며 더 많은 개발자가 CSS 코드를 더 존중하게 작성하도록 노력하고 있습니다. 심지어 CSS--auditors.com (Hyphenated Domains의 치어)에서 CSS 감사 전용 새로운 프로젝트를 시작했습니다.

다른 도구를 알고 있다면 의견에 알려주십시오.

위 내용은 CS 감사 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!