CSS 코드베이스를 정리합니다. CSS 정리 도구

생성된 사이트는 지속적으로 확장될 것이며 언젠가는 CSS를 이해하는 것이 얼마나 어려운지 깨닫게 될 것입니다.

비슷한 문제가 이미 발생했다면 이제 CSS 코드를 감사하고 최적화해야 할 때입니다. 우리는 이를 수행하는 데 도움이 되는 15가지 도구를 선택했습니다. 그 중 일부는 CSS 파일 크기를 줄이는 데 도움이 되고 다른 일부는 페이지 성능을 향상시킵니다.

1. Type-o-Matic

Type-o-matic은 웹사이트 페이지에 사용된 글꼴을 분석할 수 있는 Firebug 플러그인입니다. 이 플러그인은 사용된 글꼴의 속성에 대한 정보가 포함된 표 형태의 보고서를 표시합니다( 가족, 크기, 색상 등).

보고서는 표 형식으로 표시되지만 스타일이 유사한 글꼴을 결합하거나 제거하여 이 목록을 쉽게 편집할 수 있습니다.

2.CSSCSS

이 도구는 CSS 파일의 중복 여부를 분석합니다. 이렇게 하면 CSS의 크기가 줄어들고 향후 CSS 작업이 훨씬 더 편리해집니다. 이 도구는 설치가 매우 쉽습니다. Ruby용 확장 패키지로 구현되며 명령줄에서 실행됩니다.

3. CSS 린트

이 도구는 CSS 코드의 문제를 식별하는 데 도움이 됩니다. 이 도구는 스타일의 기본 구문을 확인하고 의심스러운 코드에 일련의 규칙을 적용합니다. 모든 규칙은 연결 가능하므로 쉽게 변경할 수 있습니다.

4. CSS 컬러가드

존재하는지도 몰랐던 색상을 사용하고 싶어하는 고객을 종종 만나게 됩니다. CSS Colorguard는 필요한 색 구성표를 만드는 데 도움을 주며 동일한 두 가지 색상을 사용하면 경고합니다.

5. CSS 발굴

CSS Dig는 로컬에서 실행되는 Python으로 작성된 스크립트로, 스타일이 별도의 파일에 있는지, 페이지 코드에 있는지에 관계없이 거의 모든 사이트의 CSS 속성과 값을 분석할 수 있습니다. 이 도구는 CSS 코드를 수정, 표준화 및 최적화하는 데도 도움이 됩니다.

6. 더스트 미

Dust-Me는 스타일시트에서 사용하지 않는 선택기를 제거하는 Firefox 및 Opera용 플러그인입니다. 이 도구는 사이트의 모든 CSS를 가져와 어떤 선택기가 사용되고 있고 어떤 선택기가 불필요한지 보여줍니다.

7. 데빌로.us

Devilo.us는 CSS3를 지원하는 CSS 코드를 압축하고 최적화하는 고급 엔진입니다.

8. PurifyCSS

이 도구는 웹사이트 페이지나 웹 애플리케이션에서 사용하지 않는 CSS 스타일을 제거하는 데 도움이 됩니다. 자바스크립트 코드에서 동적으로 로드된 CSS 선택기를 감지하고 스타일 파일의 크기를 크게 압축할 수 있습니다.

9. 원자 CSS

Atomic CSS는 CSS 파일을 더 작게 만드는 데 도움이 됩니다. 이를 통해 페이지 로딩 속도를 최적화하고 종속성을 제거하는 등 훨씬 더 많은 작업을 수행할 수 있습니다.

10. CSS 정리

CleanCSS는 다기능 CSS 최적화 프로그램입니다. 이 도구는 CSS 코드를 가져와 더 깔끔하고 작게 만듭니다. javascript, json, python, html 등 다양한 언어로 작성된 코드를 최적화할 수 있습니다.

11. 출판CSS

이 도구를 사용하면 학술 출판물 페이지의 CSS 코드 형식을 쉽게 지정할 수 있습니다. 이는 인터넷에 인쇄하고 게시하기 위한 문서 형식을 지정하기 위한 CSS 스타일 라이브러리입니다.

12.CSSO

CSSO(CSS Optimizer)는 CSS 파일의 구조적 최적화를 수행하는 도구입니다.

13. 헬륨

Helium은 웹사이트의 모든 페이지에서 사용되지 않는 CSS 속성을 식별하는 도구입니다. 자바스크립트 기반이며 브라우저에서 직접 실행됩니다. Helium은 사이트 섹션 URL 목록을 가져온 다음 각 페이지를 구문 분석하여 모든 스타일 목록을 생성합니다. 그런 다음 사용되지 않는 CSS 속성을 식별합니다.

14. 스트립 코멘트

Strip CSS Comments는 CSS 파일에서 주석 제거, 파일 크기 축소 등의 작업을 크게 단순화합니다. gulp/grunt/broccoli용 플러그인으로도 사용할 수 있습니다.

15. CSS 축소

이 도구를 사용하면 마크업의 일관성과 형식을 유지하면서 CSS 파일을 쉽게 최적화할 수 있습니다. 문서에서 공백과 주석을 제거할 수 있는 여러 도구가 있습니다.

염두에 두고 있는 다른 유용한 CSS 도구가 있습니까? 댓글로 공유해주세요!

기사 번역 “ CSS 코드를 감사하고 최적화하는 15가지 CSS 도구”은 친절한 프로젝트 팀이 준비한 것입니다.

현재 기사의 모든 독자와 내 교육 블로그 구독자에게 인사드립니다. 스타일 마크업이 완벽하게 이루어졌을 때 문제가 한 번 이상 발생했을 텐데, 그럼에도 불구하고 페이지가 조금씩 다릅니다. 이런 일이 발생하지 않도록 CSS 스타일 정리가 무엇인지 알려 드리겠습니다.

이 간행물을 읽은 후에는 이 기술의 역사를 배우고 여러 유형의 스타일 정리를 분석하며 코드 예제를 분석하여 새로운 지식을 통합할 수도 있습니다. 이제 사업을 시작합시다!

CSS Reset 기술의 등장 방식과 사용 방법

CSS 재설정브라우저 기본값을 재설정하는 CSS(Cascading Style Sheets) 속성 목록입니다.

이 기술을 사용하면 어떤 경우에도 동일하게 보이고 사용하지 않는 스타일을 제거하는 데 도움이 되는 범용 웹 서비스를 만들 수 있습니다.

오늘날 재설정 라이브러리를 구현하는 데는 다양한 옵션이 있으며 프레임워크라고도 합니다.

나는 자존심이 강한 모든 웹 애플리케이션 개발자가 자신에게 맞는 재설정 프레임워크를 가져야 한다고 믿습니다. 이는 이미 만들어진 파일 중 하나일 수도 있고 직접 만든 재설정 파일일 수도 있습니다.

역사상 유사한 기술은 2004년 Crespanis Andrew에 의해 처음 사용되었습니다. 그의 기술 출판물에서 그는 레이아웃 디자이너에게 스타일이 있는 문서의 시작 부분에 범용 선택기를 사용하라고 조언했습니다. * 그리고 여기에서 각 브라우저에 기본적으로 설정되어 있는 개체 들여쓰기를 재설정합니다.

이 기술의 소프트웨어 구현은 다음과 같습니다.

E. Crespanis의 접근 방식이 작동하는 방식의 예

예제를 실행해 보면 블록이 왼쪽 상단에 가까이 위치해 있는 것을 볼 수 있습니다.

이미 말했듯이 브라우저에 작성된 CSS(Cascading Style Sheet)를 재설정하기 위한 솔루션이 많이 있습니다. 위에서 첫 번째 방법을 이미 설명했습니다. 몇 가지 추가 속성에서만 Crespanis의 솔루션과 다른 두 가지 간단한 재설정 옵션이 더 있습니다.

따라서 접근 방식 중 하나는 웹 개체의 모든 경계에 대한 추가 제로화를 사용합니다(라인 추가). 테두리: 0;) 및 다른 하나-요소의 테두리 및 외부 윤곽 매개 변수 재설정 (첫 번째 옵션에 추가됨) 개요: 0; 테두리: 0;).

그러나 모두 여러 가지 단점이 있습니다. 이는 브라우저 스타일 컨트롤의 첫 번째 버전이므로 완벽하지는 않습니다. 단락이 있는 텍스트도 사용하세요. 재설정의 첫 번째 구현을 사용하면 단락 사이의 들여쓰기가 사라집니다. 이 경우 매번 CSS 마크업을 조정해야 합니다.

그래서 많은 웹 전문가들과 IT 전문가들이 계속해서 새로운 방향을 개선해 나갔습니다. 그래서 Eric Meyer는 몇 가지 연구를 수행하고 당시 작성된 많은 작품을 연구하여 CSS Reset이라는 강력한 도구를 만들었습니다.

주의하여! 웹 마피아! 모든 브라우저 스타일 표준을 종료합니다!

그렇다면 CSS 재설정을 통해 무엇을 얻을 수 있을까요? 이 솔루션은 범용 선택기를 사용하지 않고 태그를 통해 스타일 마크업을 설정합니다. 동시에 코드는 일부 브라우저에서 제대로 작동하지 않는 테두리 붕괴와 같은 "문제" 영역을 처리하는 기능을 제공합니다.

중요한 세부 사항을 언급하고 싶습니다. CSS는 스타일 규칙을 순서대로 처리하고 동일한 태그에 대해 여러 번 지정된 매개 변수 값을 덮어쓰기 때문에 다른 속성을 설정하기 전에 스타일 마크업 재설정을 수행해야 합니다.

Eric Meyer와 그의 CSS Reset으로 돌아가 보겠습니다. 그의 솔루션에서 그는 컨테이너부터 Strong, var, mark 등과 같은 작은 태그에 이르기까지 CSS 언어의 거의 모든 요소에 대한 규칙을 규정합니다. 이 문서의 공식 두 번째 버전은 다음과 같습니다. http://meyerweb.com/eric/tools/css/reset/index.html

모든 브라우저에서 "모든 브라우저에 적합한" 사이트 디자인을 조정하기 위해 위에서 설명한 옵션이 나타난 후 많은 대기업에서 자체 수정 사항을 만들었습니다.

예를 들어 야후! 무료로 사용할 수 있는 YUI CSS 재설정을 만들었습니다(이 링크에서 볼 수 있습니다: http://yui.github.io/yui2/#start).

Chris Poteet와 같은 생각을 가진 사람들이 Siolon의 CSS 브라우저 재설정( http://www.siolon.com/blog/browser-reset-css/). 그리고 이것은 매우 오랫동안 지속될 수 있습니다.

여기에서는 CSS 재설정 사용에 대한 몇 가지 중요한 규칙과 지침을 나열하고 싶습니다.

1. 이미 말했듯이 CSS 코드에서 가장 먼저 작동해야 하는 것은 매개변수를 재설정하는 것입니다. 이는 직관적이지만 초보자와 숙련된 개발자가 이 오류를 발견하는 경우가 많습니다.
2. CSS 재설정을 위해 별도의 CSS 문서를 사용하는 것이 좋습니다. 또한 이러한 파일은 범용 개발자 도구가 되어 다양한 웹 프로젝트에서 사용할 수 있습니다.
3. 개인적인 수정을 구현하거나 자신만의 재설정 프레임워크를 만드는 것을 두려워하지 마세요.
4. 스타일 재설정을 위해 기성 솔루션을 맹목적으로 사용하지 말고 일부 매개변수를 재정의하십시오. 이는 코드 중복을 위협합니다. 그리고 IT 사람들은 이것을 좋아하지 않습니다. 따라서 Yahoo CSS Reset의 경우 캡션, th(텍스트 정렬: 왼쪽;) 속성에 남아 있지 않고 가운데 정렬이 필요한 경우 키워드 center를 자유롭게 작성하세요.

저는 기본 일반 템플릿 규칙과 조정 사항이 포함된 CSS 재설정을 사용합니다.

이것으로 기사를 마칩니다. 제 작업에 감사해 주시고 구독자 대열에 합류해 주시면 감사하겠습니다. 내 블로그 링크를 친구나 동료들과 공유하는 것을 잊지 마세요. 행운을 빌어요!

안녕!

감사합니다, Roman Chueshov

읽다: 114회

저자로부터:일반적으로 CSS 파일이 부풀어 오르는 경우가 많기 때문에 모놀리식 스타일에 대해 이야기하는 것은 매우 어렵습니다. 사용하지 않는 CSS 스타일을 제거하면 상황이 제어될 수 있습니다. 사용되지 않는 스타일을 찾기 전에 유지 관리 가능한 스타일을 작성하기 위한 다른 전략이 많이 있다는 점에 주목할 필요가 있습니다. 우리의 스타일은 논리적 부분(페이지 레이아웃, 버튼, 그리드, 위젯 등)으로 나눌 수 있으며 명확한 명명 시스템(예: BEM)을 사용할 수 있습니다. 일반적으로 개발자는 사용되지 않는 규칙을 찾기도 전에 이 작업을 수행합니다. 스타일은 장기적인 영향을 미치기 때문에 이것이 맞는 것 같아요.

규칙이 자주 정리되지 않는 또 다른 이유는 소규모 웹 프로젝트보다 큰 규모의 프로젝트에서 사용하지 않는 스타일을 찾아서 제거하는 것이 단순히 불편하기 때문입니다. 콘텐츠가 정적이 아닌 경우 어떤 규칙이 어디에 사용되고 있는지 어떻게 알 수 있나요?

Chrome 개발자 도구

Chrome 개발자 도구에는 이미 기능이 내장되어 있는 것으로 나타났습니다. 제거할 수 있는 스타일이 많이 있다는 것을 알고 있는 사이트에서 테스트했습니다. 감정이 엇갈렸다. 특히 이미 Chrome 개발자 패널을 사용해 작업한 개발자의 경우 진입 장벽이 매우 낮습니다. 아무것도 설치할 필요가 없습니다. 좋습니다.

사이트에서 스타일을 확인하기 위해 해야 할 일:

관심있는 사이트를 열어보세요

개발자 패널 열기

감사 탭으로 이동

웹 페이지 성능 옵션을 선택하고 실행하십시오.

일부 결과에는 "사용하지 않는 CSS 규칙 제거"라고 표시됩니다. 그렇지 않으면 사용되지 않은 스타일이 없는 것입니다. 축하해요! 결과는 스타일별로 나뉩니다. 분류는 파일뿐만 아니라 스타일 블록별로도 이루어집니다. 우리가 작성한 스타일만 필요하기 때문에 정말 유용한 기능입니다. 적어도 이 글의 목적을 위해서는요.

좋은가요?

Chrome에서 결과를 내보내는 매우 쉬운 방법을 찾지 못했습니다. 블록에서 직접 복사할 수 있지만 먼저 확장해야 합니다. 이로 인해 결과를 구문 분석하는 것이 약간 어색해집니다. 브라우저에서 테스트를 실행하면 코드 작업에서 더 멀어지게 되어 사이트 테스트를 잊어버릴 수도 있습니다.

결론: 초보자에게는 유용하지만 장기적인 솔루션은 아닙니다.

UnCSS

명령줄 도구를 사용하여 사용되지 않는 스타일을 찾을 수 있습니다. UnCSS는 흥미로운 예입니다. phantomJS를 통해 페이지를 가져오고 JS를 통해 삽입된 스타일을 포착합니다. Chrome 개발자 패널은 코드 편집과 전혀 관련이 없기 때문에 이 도구가 내 문제를 해결했기 때문에 이 도구를 꼭 사용해보고 싶었습니다. UnCSS를 사용하면 결과를 파일에 직접 저장할 수 있습니다.

설치

Ubuntu에서 npm install uncss를 실행할 수 없습니다. 심각한 것은 아닙니다. 몇 가지 종속성을 잊어버린 것으로 나타났습니다. 내가 실행한 누락된 라이브러리를 설치하는 명령:

sudo apt-get 업데이트 sudo apt-get 설치 빌드 필수 chrpath libssl-dev libxft-dev sudo apt-get 설치 libfreetype6 libfreetype6-dev sudo apt-get 설치 libfontconfig1 libfontconfig1-dev

UnCSS는 빌드 프로세스에 통합될 수 있지만 지금은 건너뛰겠습니다. 빌드 프로세스에 삽입하는 것은 좋은 생각이 아니라고 생각합니다. Addy Osmani는 이 주제에 대한 좋은 기사를 가지고 있습니다. 이상적으로는 사용하지 않는 스타일을 최종 제품에 대해 필터링하는 대신 코드에서 직접 제거하는 것이 좋습니다.

아마도 가장 좋은 해결책은 두 가지를 모두 수행하는 것입니다. 먼저 코드를 최적화하기 위해 사전 빌드 단계로 실행합니다. 둘째, 제어할 수 없는 스타일을 최적화하기 위해 빌드 단계를 실행합니다.

명령줄 사용

uncss http://your-site.foo/ > 미사용 스타일.css

결과는 your-site.com과 Chrome 브라우저 스타일로 분할되지만 하나의 파일에 저장됩니다. 내 사이트에는 멋진 글꼴이 있으며 홈 페이지에서 사용되지 않는 모든 아이콘은 결국 UnCSS 출력에 포함됩니다. 지금은 나에게 중요하지 않습니다. 명령을 다시 실행하고ignoreSheets를 지정하여 숨길 수 있습니다.

ignoreSheets는 문자열(무시할 스타일의 전체 URL) 또는 정규 표현식을 허용할 수 있습니다. 정규식은 문자 수가 적고 파일 경로에서 발생할 수 있는 변경 사항을 다루기 때문에 더 쉽습니다.

IgnoreSheets /.*font-awesome.min.css/

페이지 시간 초과 시 나타나는 오류 메시지입니다. -t N을 사용하여 시간 제한을 늘릴 수 있습니다. 여기서 N은 밀리초 수입니다. –t 360을 설정하지 말고 코드가 5분을 기다리지 않은 이유를 생각해 보세요.

결론: UnCSS는 스타일을 편집하는 위치에 더 가깝기 때문에 더 편리합니다. 출력 파일은 불필요한 스타일을 제거하는 데 유용합니다. 정규식에 해당하는 모든 항목을 자동으로 무시하는 –includeSheets 옵션 때문에 이 옵션이 사용되는 것으로 확인되었습니다. 예를 들어, 다양한 플러그인으로 스타일을 조정할 수 있지만 개발자에게는 style.css 등의 테마 스타일만 필요한 WordPress 사이트에 편리합니다.

어떤 도구를 사용해야 합니까?

처음에는 UnCSS와 편리한 명령줄을 선택했습니다. 하지만 이 글을 쓰는 동안 몇 군데 더 많은 사이트에서 시도해 보았지만 그다지 희망적인 결과를 얻지 못했습니다. 특히, 영구 댓글이 포함된 프레임워크를 사용하는 몇 년 전에 만들어진 여러 사이트가 있습니다. /*!*…*/. PostCSS에서는 잘 작동하지 않으므로 UnCSS에서도 잘 작동하지 않습니다. 나는 아직 이 문제를 자세히 조사하지 않았지만 아마도 최신 버전의 PostCSS는 이와 같은 주석에 대해 더 관대할 것입니다. 그러나 지금은 이것이 또 다른 장벽이 되어 작업에 UnCSS를 완전히 사용할 수 없습니다.

5점 만점에 4점

많은 개발자들은 프로젝트 작업을 수행한 후 일정 시간이 지나면 파일에 CSS사용 여부를 확실히 말할 수 없는 스타일이 나타납니다. 이는 팀으로 작업하고 두 명 이상의 사람이 스타일 작업을 할 때 자주 발생합니다. 또는 예를 들어, 당신 앞에 여러 명의 개발자가 있었고 당신이 무언가를 변경하기로 결정했거나 디자이너가 작은 재설계를 계획했습니다. 일반적으로 많은 옵션이 있지만 결과는 동일합니다. "죽은" 선택기가 브라우저에 제공됩니다.

한두 개만 있으면 모든 것이 괜찮을 것이지만 파일에 5,000~6천 줄이 있으면 의심의 여지가 없습니다. 모든 선택기가 사용되는 것은 아닙니다. 즉, 불필요한 선택기를 제거하면 파일을 만들 수 있습니다. 가볍고 페이지 로딩 속도가 빨라졌습니다. 오늘은 불필요한 스타일로부터 CSS 파일을 정리하기 위한 다양한 프로그램, 플러그인 및 서비스를 살펴보겠습니다.

파이어폭스 확장

다음을 통해 페이지에 포함된 스타일을 고려합니다. , @import 및. 단일 페이지와 전체 사이트를 모두 분석할 수 있습니다. 마지막에는 사이트에서 사용되지 않는 선택기 목록이 표시됩니다.

이는 단일 페이지와 사이트 전체에서 사용되지 않는 선택기를 찾을 수 있게 해주는 FireBug의 확장입니다. 결과적으로 모든 선택기 목록을 받게 되며 그중 빨간색으로 표시된 선택기는 사용되지 않습니다.

웹 서비스

특정 파일의 선택기 중 사이트의 특정 페이지에서 사용되지 않는 선택기를 확인할 수 있는 온라인 도구입니다. 단점은 사이트 전체를 평가할 수 없다는 점이다(오히려 가능하지만 시간이 많이 걸리고 불편하다).

데스크탑 편집자

사용되지 않는 CSS 스타일을 찾는 방법을 알고 있는 코드 편집기 목록입니다.

탑스타일 (승)

페이지에서 사용되지만 CSS 파일에는 설명이 없는 선택기를 찾을 수도 있습니다.

IntelliJ IDEA(Win, Mac, Linux)

주로 Java 작업을 위해 설계된 크로스 플랫폼 편집기입니다.

결론

제 생각에는 이들 중 가장 성공적인 도구는 Dust Me입니다. 전체 사이트를 분석하는 데는 1분도 채 걸리지 않으며, 그 후에는 지정된 선택기를 찾아서 제거하기만 하면 됩니다.

그건 그렇고, 이 목록에 없는 편집기나 서비스를 사용하는 분이 계시다면 댓글을 달아주시면 추가하겠습니다. 관심을 가져주신 모든 분들께 감사드립니다;-)

안녕하세요, 블로그 사이트 독자 여러분. 이것은 "유품으로" 시리즈의 작은 메모입니다. 스타일 파일에서 추가 줄을 제거하려는 아이디어가 생겼습니다. 블로그가 존재한 지 7년 동안 많은 것이 바뀌었지만 STYLE.CSS 파일의 줄은 그대로 남아 있습니다(만일의 경우를 대비해, 아니면 단순히 삭제하는 것을 잊어버렸습니다). 이제 무게가 너무 무거워지기 시작한 것 같아서 청소 아이디어가 떠 올랐습니다.

이 작업을 수동으로 수행하는 것은 매우 어렵고 필요하지 않습니다. 이 프로세스를 자동화하는 방법이 있습니다. 그들 중 일부는 나에게 효과가 없었고, 일부는 비용을 지불해야 했고 나는 그것이 불필요하다고 생각했습니다. 결국 나는 반자동 방법을 사용했는데, 이에 대해서는 다음 몇 단락에서 설명하겠습니다. 앞으로 CSS 파일의 크기를 거의 절반으로 줄일 수 있었는데, 이는 조금 놀랐습니다.

웹사이트에 불필요한 CSS 스타일을 찾는 옵션

스타일 파일(그 내용 - 이전 파일을 삭제하고 새 파일을 삽입한 후 Filezilla를 통해 변경 사항을 저장함)을 새(손상된) 파일로 교체해도 사이트에 눈에 띄는 변경 사항이 발생하지 않았습니다(아직은 아닙니다). , 공개되지 않음). 전반적으로 매우 만족하며 사용해 보시길 권합니다. 빠르고 간단하며 편리합니다. 또한 무료입니다.

행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.

에 가시면 더 많은 영상을 보실 수 있습니다

당신은 관심이 있을 수도 있습니다

웹사이트 로딩 속도를 최대화하고 서버 로드를 최적화하는 방법
CSS - 정의, 스타일 및 링크를 사용하여 CSS 스타일 시트를 Html 코드에 연결하는 방법
Page Speed의 CSS 최적화 및 압축 - 외부 스타일시트 파일을 비활성화하고 하나로 병합하여 로딩 속도를 높이는 방법 n번째 자식 의사 클래스를 사용하여 사이트의 테이블, 목록 및 기타 Html 요소 행의 대체 배경색을 구성하는 방법
CSS의 용도, 계단식 스타일 시트를 Html 문서에 연결하는 방법 및 이 언어의 기본 구문
목록 스타일(유형, 이미지, 위치) - HTML 코드의 목록 모양을 사용자 정의하기 위한 CSS 규칙
빠른 웹사이트를 얻는 방법 - 이미지와 스크립트의 최적화(압축) 및 Http 요청 수 감소