CSS를 리펙터링하는 방법 - 가이드

CSS 리팩토링은 관리가 용이하고 최적화 된 코드 기반을 원한다면 프런트 엔드 개발 워크 플로우의 필수적인 부분이어야합니다. CSS를 리팩터링 할 때 우리는 기존 코드 정리 및 재구성 새로운 기능을 추가하거나 버그를 수정하지 않고.

리팩토링이 도움이됩니다. CSS 폭발 방지, 코드 가독성 및 재사용 성 향상, 과 CSS를 더 매끄럽고 빠르게 실행할 수 있습니다..

조만간 리팩토링이 필요합니다. 조만간 간결하고 체계적인 코드 기반으로 시작된 프로젝트조차도 조만간 선명도를 잃기 시작합니다. 일관성, 오래된 규칙 및 중복 된 코드 부분이 나타납니다. 또한 스타일을 재정의하고 더 많은 해킹 및 해결 방법을 사용하기 시작합니다..

CSS 코드베이스를 유지 관리하는 가장 좋은 방법은 “리팩터링 초기, 리팩터링” 엄지 손가락의 규칙. 이 글에서는 효과적인 CSS 리펙토링 프로세스를 수행하는 방법에 대한 몇 가지 팁을 살펴볼 것입니다..

1. 초기 감사 실시

우리가 리팩터링 할 필요가있는 것에 대해 더 나은 그림을 얻으려면, 포괄적 인 감사부터 시작하여 현재 가지고있는 것을 확인하십시오..

이 노력에서 우리를 도울 수있는 많은 훌륭한 온라인 도구가 있습니다. CSSDig는 웹 사이트의 CSS를 분석하고 너무 구체적인 선택자 또는 반복 속성과 같은 약점을 탐구하는 강력한 Chrome 확장 프로그램입니다..

사용되지 않은 CSS는 사용하지 않는 CSS 규칙을 조사하고 CSS Lint와 같은 linting 도구는 신속하게 compability, maintainability 및 기타 문제를 찾을 수 있습니다.

또한 아키텍처 수준에서 많은 문제가이 방법으로 만 잡힐 수 있으므로 초기 감사 중에 코드를 수동으로 조사하는 것도 중요합니다..

2. 관리 계획 수립

리팩토링 작업 코드는 항상 어려운 작업이지만 우리가해야 할 일에 대한 계획을 세우고, 리팩토링 프로세스를 다루기 쉬운 덩어리로 슬라이스하고, 실현 가능한 일정을 만들면 고통을 완화 할 수 있습니다.

CSS 리펙토링에서 우리가 항상 고려해야 할 중요한 사항이 있습니다. 선택자 이름을 변경하면 관련 HTML 및 JavaScript 파일의 코드를 조정하는 데 필요합니다. 게다가.

그러므로 그것은 수행해야 할 추가 수정 사항을 추적하십시오., 과 리팩토링 일정에 맞추어 기본 CSS 관련 작업과 함께.

3. 트랙 진행

리팩토링에 착수하기 전에, 그것은 필수적인 단계입니다. 초기 파일을 백업해라.. Git 또는 Subversion과 같은 버전 제어 시스템을 워크 플로우에 도입하면 리팩토링 프로세스가 크게 향상 될 수 있습니다. 우리가 수행 한 순차적 단계에 대한 레지스트리가 있으므로 우리가 일을 다시하고 싶다면 이전 단계로 돌아갈 수 있습니다..

4. 코딩 스타일 가이드에 충실하십시오.

일관된 코딩 스타일 가이드는 코드 가독성과 유지 보수성을 크게 향상시킬 수 있으므로 리팩토링을 시작하기 전에 CSS 코딩 스타일 가이드 설정.

결정할 중요한 사항은 다음과 같습니다.

• 명명 규칙
• 서식 지정 규칙
• 선언 명령
• 우리가 사용하고자하는 단위와 가치
• 주석 달기 규칙

독자적인 코딩 스타일 가이드를 만들고 싶지 않다면 ThinkUp과 같은 다른 사람도 Github에서 찾을 수 있습니다.

코딩 스타일 가이드를 소개하는 것만으로는 충분하지 않습니다. 우리가 코드를 다시 작성할 때 그것에 충실하십시오. 리팩토링하는 동안 다른 사람들도 똑같이 기대하다. 우리 프로젝트에서 일하는 사람.

5. 일관된 파일 구조 설정

준비가 끝나면 가장 먼저해야 할 일은 CSS의 계단식 특성에주의를 기울여 적절한 CSS 파일 구조를 설정하는 것입니다.

주로 파일을 구성하는 최선의 방법은 프로젝트에 따라 다르지만 별도의 파일을 사용하는 것과 같은 보편적 인 규칙이 있습니다. normalize.css CSS 재설정 스타일 용 파일, 별도의 global.css 전체 프로젝트에서 사용되는 글로벌 스타일 및 타사 라이브러리를 별도의 폴더에 저장.

우리가 CSS 파일 구조를 안전하게 사용하려면 SMACSS 또는 ITCSS와 같은 기성 아키텍처가 있습니다. 확장 가능한 방식으로 CSS 파일을 구성하는 방법.

6. 미사용 및 중복 규칙 제거

잠시 후 CSS 파일은 일반적으로 리팩토링 중에 식별하고 제거해야하는 사용되지 않는 규칙이 많습니다. 우리에게 많은 온라인 도구가 있습니다. 이 구식 규칙을 조사하십시오., 때로는 우리가 그들을 도랑에 빠지게 할 수도 있습니다..

이 목적으로 가장 잘 알려진 툴은 아마도 사용되지 않는 CSS 규칙을 빨리 제거 할 수있는 Node.js 모듈 인 UnCSS 일 것이고, 정교한 구성 옵션을 제공하여 청소 프로세스를 쉽게 미세 조정할 수 있습니다.

그것은 우리가 반드시 사용되지 않은 규칙을 제거하지 않으려는 경우 모든 우리가 가지고있는 CSS 파일들, 예를 들어 글로벌, 리셋 또는 타사 스타일 시트에서 가져온 것입니다. 그들을 제외하다 청소를하는 동안.

오래된 규칙들과 함께, 중복 규칙은 불필요한 코드 팽창과 성능 손실을 초래합니다. CSS Purge Node.js 모듈을 사용하여 제거 할 수 있지만, 중복 규칙을 검색하기위한 CSS linters CSS 파일에서.

7. 특이성 감소

CSS 선택기의 특수성은 포함 된 내부 선택기의 수와 유형에 따라 계산됩니다. CSS 특수성은이 시각적 CSS 지정 계산기를 체크하면 이해할 수있는 4 자리 숫자로 표현됩니다.

가장 낮은 특이성 (0001)는 다음과 같이 하나의 일반 HTML 요소 만 대상으로하는 선택기에 속합니다.

또는

. 복합체 선택기에 포함 된 내부 선택기가 많을수록 특이성이 높아집니다..

특정 선택기 (예 : 신분증 또는 인라인 스타일에서 오는 선택기는 더 일반적인 선택기에 속한 스타일을 덮어 쓰기 때문에 우선 순위가 높습니다. 예를 들어, # id1 선택자는 0100.

리팩터링에서 목표는 가능한 한 선택자의 구체성을 줄이는 것입니다 (짧게 유지하십시오). 높은 특이성을 갖는 선택자는 셀렉터의 재사용 성을 상당히 감소시킵니다., 과 부풀어 오른 코드 기반으로 이끌다.

높은 특이성 선별 자의 3 가지 주요 유형은 다음과 같습니다 :

1. 자격있는 선택자, 와 같은 p.class1 ( 피 태그는 다른 HTML 요소와 같은 클래스를 사용할 수 없으므로 여기서는 불필요합니다.
2. 깊게 중첩 된 선택기, 와 같은 .class1 .class2 .class3 .class4 ...
3. 신분증, 와 같은 # id1

1 단계에서 언급 한 CSSDig와 같은 온라인 도구를 사용하여 이러한 높은 특이성 셀렉터를 빠르게 찾을 수 있습니다. 또한 중첩 수준 또는 사용 제한에 대한 규칙을 코딩 스타일 가이드에 설정하는 것이 유용 할 수 있습니다 신분증 셀렉터.

위드가 빠져 나갔다. !중대한 규칙

CSS 규칙 뒤에 !중대한 문이 규칙적인 스타일 규칙보다 우선합니다. 사용 !중대한 조만간 규칙 일관성없는 코드로 연결된다.. 대부분의 린팅 도구가 오류로 표시되는 것은 우연이 아닙니다..

CSS를 빨리 작성해야 할 때, 단순함 때문에 CSS에 의존하기 시작할 수도 있습니다.

주요 문제 !중대한 우리가 미래에 그것들을 오버라이드하고 싶다면, 우리는 더 많은 것을 넣을 필요가있다. !중대한 사용중인 선언이므로 리팩터링 프로세스 중에 가능할 때마다 이들을 제거하는 것이 가장 좋습니다.

9. 매직 넘버와 하드 코딩 된 값 삭제

일상적인 CSS 작업 과정에서 가끔씩 해결할 수없는 문제가 발생하는 경우가 있습니다. 마법의 숫자, 어떤 이유로 작동하는 값이지만 이유를 이해하지 못합니다. 예를 들어 다음 예제를 보자.

 .class1 위치 : 절대; 상단 : 28px; 왼쪽 : 15.5 %; 

매직 넘버의 가장 큰 문제점은 상세한, 그들은 “순열에 의한 프로그래밍” 반 패턴. 리팩토링 프로세스 중에 코드에서 이러한 임의의 규칙을 제거하고 가능하면 더 합리적인 솔루션으로 대체해야합니다..

동일한 어림셈이 적용됩니다 하드 코드 된 값 게다가. 하드 코딩 된 값의 가장 빈번한 발생은 아마도 선 높이 규칙에서 찾을 수 있습니다.

 / * bad, 우리는 .class1 * / .class1 font-size : 20px;의 자식 요소에 고정 된 line-height 규칙을 추가해야 할 것입니다. 줄 높이 : 24px;  / * 유연한 선 높이 규칙은 자식 요소에서도 안전하게 사용할 수 있습니다. * / .class1 font-size : 20px; 라인 높이 : 1.2; 

하드 코딩 된 값은 우리의 코드가 미래 보장형이 아닌보다 엄격 해 지도록하므로 리팩토링의 일부로 코드를 파헤칠 필요가 있습니다. 유연한 값으로 대체하십시오..

10. 리 팩터 단위와 값

나중에 유지 관리 및 디버깅을 쉽게하고, 다른 단위를 사용하여 발생할 수있는 오류를 방지하려면 여자 이름 과 픽셀, 동시에, 우리는 상대 값과 절대 값을 사용하는 방법에 대한 일관된 규칙을 고수하십시오..

과거에 일관성없이 사용했다면 간결한 시스템을 구성 할 수 있도록 변환해야합니다.

우리 사이트에서 너무 많은 비슷한 색상을 사용한다면, 현명한 방법이 될 수도 있습니다. 색체 배합을 합리화하다 우리가 사용하는 색상 수를 줄임으로써 (실질적인 방법으로 웹 사이트 색상 체계를 선택하는 방법에 대한 게시물이 있습니다.)