CSS 코드베이스 청소

당신은 출발하는 개발자를 대체하기 위해 기존 프로젝트에 탑승했습니다. 아니면 몇 년 전부터 당신의 오래된 프로젝트를 열었을 수도 있습니다. 코드를 볼 때 당신은 공포와 공포에 직면하게됩니다. 당신은 한 가지만 할 수 있습니다 :이 혼란을 정리하십시오! 당신에게 친숙하게 들리나요? 물론, 우리 모두는 어느 시점이나 다른 시점에서 이것을 만나게됩니다.

당신은 CSS 코드베이스를 청소하는 것이 엄청난 작업이 될 것임을 알고 있습니다. 해야 할 일이 너무 많지만 시간이 너무 적습니다. 특히 고객/보스/동료가 좋은 ol '을 옹호 할 때“깨지지 않은 것을 고치지 마십시오”격언. 어디서부터 시작 해야할지 모르겠습니다!

글쎄, 나는 CSS 청소에 대한 나의 공유를했기 때문에 운이 좋았고, 나는 당신에게 이것을 시작할 힌트를주기 위해 왔습니다. 매달린 과일을 잡는 것이 전부입니다.

키 테이크 아웃

CSS 코드베이스를 일장화하는 것은 잠재적 오류와 나쁜 관행을 식별하기 때문에이를 청소하는 첫 단계입니다. SCSS-Lint와 같은 도구를 사용하여 SASS 폴더를 오류인지 확인할 수 있습니다. 라면 오류 수정은 파일을 하나씩 수행하고 잘못 보이는 것을 업데이트하거나 검색 및 대체 기능을 사용하여 공통 문제를 해결함으로써 수행 할 수 있습니다. 코드베이스의 구조를 수정하는 것이 중요합니다. 준수하는 한 어떤 방법론이 선택되는지는 중요하지 않습니다. 여기에는 선택한 방법론을 준수하기위한 구조 조정 코드가 포함되거나 재사용 가능한 인터페이스 덩어리를 식별하고 스타일을 자신의 부분으로 추출 할 수 있습니다. 초과 코드를 제거하는 것은 좋은 CSS의 핵심입니다. 사용하지 않은 선언은 기술 부채를 늘릴 수 있으므로 각 CSS 선언에 영향을 미치는지 정기적으로 확인하고, 그렇지 않은 경우 제거하는 것이 중요합니다.

. 정기적으로 작업을 저지르고 작은 커밋의 변화를 논리적으로 묶으면 무언가 잘못되면 역사상 더 쉽게 돌아갈 수 있습니다. 이것은 CSS 코드베이스를 리팩토링 할 때 특히 중요합니다. 어떤 것들이 길을 따라 갈 수있을 가능성이 높습니다.

.

지옥을 뿌려 이 섹션에서는 코드베이스가 SASS를 사용한다고 가정합니다. 오늘날 합리적인 가정 일뿐 만 아니라 SASS의 사용이 열악하다는 것을 알았 기 때문에 종종 지저분한 코드베이스에 부분적으로 책임이 있습니다. 그래도이 기사는 사전 처리기를 사용하지 않더라도 귀하와 관련이있을 수 있습니다. 코드베이스를 인수해야 할 때 가장 먼저하고 싶은 것은 보풀입니다. Linting은 잠재적 오류와 나쁜 관행을 찾는 프로그램을 실행하는 과정입니다. 코드를 깨끗하게 만드는 것이 코드를 좋게 만드는 첫 번째 단계라고 생각합니다. 다음은“Lint”라는 단어의 어원에 대한 통찰력있는 스택 오버플로 스레드입니다.Sass에는 SCSS-Lint라는 루비 기반의 라이터가 있습니다. 직접 구성하거나 Sass-Guidelines에서 권장 구성 파일을 잡아 즉시 시작할 수 있습니다. Sass-Lint라는 Node.js 버전도 100% 상호 운영 가능하지는 않지만 마일리지가 다를 수 있습니다. SASS 폴더에서 SCSS-Lint를 실행하여 오류를 확인하십시오. 오류의 벽에 압도 될 가능성이 높습니다. 이것은 보통 포기하려는 유혹을받는 시간입니다. 하지만 나와 함께 견뎌냅니다! 이 시점에서, 당신은 당신이 실제로 신경 쓰지 않는 규칙 (색상 형식과 같은)과 관련하여 줄무늬 파일을 조금 덜 엄격하게 만들거나 짐승을 앞쪽으로 다루고 지옥을 보러 올 수 있습니다! 고정 라인 오류가 발견되었습니다 이제 고정해야 할 사항을 고칠 차례입니다. 이 작업을 수행하는 두 가지 방법이 있습니다. 첫 번째는 파일을 하나씩 살펴보고 잘못된 이름 지정 규칙, 지나치게 깊이 빠진 선택기, 제대로 형식화되지 않은 코드 등과 같은 잘못된 것 및/또는 홀수를 업데이트하는 것입니다. 두 번째 (그리고 내가 가장 좋아하는)는 시작하는 것입니다. 약간의 검색 및 교체로. 나는 당신에 대해 잘 모르지만 정규 표현을 좋아하기 때문에 이렇게해야 할 때 항상 재미 있습니다.

예를 들어 의 경우, 모든 부동 소수점 숫자 (즉, 0과 1 사이의 숫자 값)-SCSS-Lint의 주요 Zero 규칙에 따라 누락 된 선행 0을 추가한다고 가정 해 봅시다. s. (d) (공간과 점을 따르는 모든 숫자)를 검색하고 0. $ 1 (공간, 0, 점 및 발견 된 숫자)으로 교체 할 수 있습니다. 또는 SCSS-Lint의 Borderzero 규칙을 존중하려면 국경을 대체 할 수 있습니다 : 없음 국경 : 0 IDE에서 0. 파이처럼 간단합니다! 나는 최근에 Github에서 SCSS-Lint-Regex 저장소를 시작하여 정규 표현식을 한 곳에 수집했습니다. 대규모 프로젝트를 일찍하는 데 어려움을 겪고 있다면 살펴보십시오. 또한 예상치 못한 부작용이 있기 때문에 검색과 교체에주의하십시오. 각 교체 후 GIT 차이를 수행하여 업데이트 된 내용을 확인하여 버그를 도입하지 않았는지 확인하십시오. 횡단 편집 작업을 마치면 청소해야 할 모든 것을 청소하기 위해 수동 파일을 크 롤링하지 않습니다 (빈약 한 압입, 누락 또는 추가 빈 줄, 누락 된 공간 등). 많은 시간이 걸리지 만 다음 단계에 많은 도움이 될 것이므로 시작하는 것이 중요합니다.

. 구조를 수정 기존 프로젝트에 탑승 할 때 종종 방해가되는 것은 적절한 프로젝트 아키텍처가 없다는 것입니다. 아마도 처음에는 하나가 있었을 것입니다. 그러나 상황이 일반적으로 나오고이 간단한 방법론에 대한 아이디어는 줄을 따라 어딘가에 사라졌습니다. 그래도 이것은 엄청나게 중요합니다. 편안하게 느끼고 고수하는 한 어떤 방법론을 선택하는지는 중요하지 않습니다. 그것은 smacss 일 수 있고, 7-1 일 수도 있고, ITCSS-당신의 선택을 가져갈 수 있습니다! 그런 다음 코드를 선택한 방법론을 준수하기 위해 물건을 재구성하십시오. 나는 주로 SASS 지침에 도입 된 7-1 패턴을 사용하므로 이런 식으로 가기로 결정한 경우 일을 개선하기위한 몇 가지 팁을 제공합니다.

. 폴더 폴더는 질문이 없으므로

공급 업체

폴더로 시작하십시오. 포장되지 않은 타사 라이브러리를 거기로 옮기십시오 (즉, NPM 또는 Bundler를 통해 정기적으로 의존성으로 취급되지 않은 라이브러리). 그런 다음 초록 일단 완료되면 전화입니다. base

폴더의 모든 것이 실제로 기본 재료인지 구성 요소와 관련이 없는지 확인하거나

레이아웃 폴더를 살펴 보려면 전반적인 레이아웃은 거기에 살고 있으며 올바르게 문서화되어 있습니다 마지막으로, 구성 요소

를 대처해야합니다. 여기서 나의 조언은 구성 요소를 최대한 작고 재사용 할 수 있도록하는 것입니다. 컨텍스트가 불가지론적이고 읽기 쉽고 읽기 쉽게 읽고 이해하고 업데이트 할 수있는 한 숫자를 두 배로 늘려면 문제가되지 않습니다. 예를 들어 와 같은 구성 요소를 작은 것만 큼 나쁘지는 않습니다.

<.> 모듈 식을 생각하십시오. 작은. 단순한. 독립적. 초과를 제거하십시오 CSS와 나쁜 CSS의 가장 큰 차이점은 작동하는 데 필요한 코드의 양이라고 생각합니다. 언어로서의 CSS는 파악하기가 매우 쉽습니다. 누구나 약간의 시행 착오로 거의 모든 레이아웃을 만들 수 있습니다. 그러나 CSS가 작동하고 그렇게 유지하는 데 필요한 최소한의 CSS로 무언가를 구축 할 수 있다는 것은 진정한 도전입니다. . 3 년이 지났지 만 Nicolas Gallagher 의이 트윗은 CSS에 대한 제가 가장 좋아하는 인용문입니다. "나쁜"CSS 내에서 "좋은"CSS를 작성하기는 매우 어렵습니다. "좋은"CSS 내에서 "나쁜"CSS를 볼트하고 코드 썩음을 시작하는 것은 매우 쉽습니다.- Nicolas (@necolas) 2012 년 9 월 26 일 노후화는 CSS의 실제 전염병입니다. CSS로 무언가를 구축 할 때, 우리는 종종 앞뒤로 가서 몇 가지를 시도합니다. 일반적으로 우리는 보통 불분명 한 몇 가지 선언으로 끝납니다. 예를 들어 오버플로 : 불필요하게 된 숨겨진 숨겨져 있거나 아무런 차이가없는 글꼴 크기. 그것들을 떠나서, 우리는 기술 부채를 쌓습니다. 그게 나쁜 ™입니다.

CSS를 작성할 때, CSS 작업을 저지르기 직전에 내가하고 싶은 것은 개발자 도구를 열고 각 CSS 선언을 전환하는 것입니다. 그들이 그렇지 않다면, 나는 그들이 왜 처음에 거기에 있는지 스스로에게 묻습니다. 그들이 불필요한 것으로 판명되면 나는 그것들을 제거합니다. 이것만큼 간단한 일을함으로써 유용한 정크 프리 코드 만 저장소로 밀려 나게합니다. 청소 CSS 코드베이스는 다르지 않습니다. 정리하고 싶은 구성 요소를 찾고 DevTools를 열고 쓸모없는 선언을 찾으십시오. 때로는 CSS를 제거하기 위해서는 캐스케이드의 혜택을 받기 위해 나무의 일부 스타일을 위쪽으로 움직여야합니다. 다음 예제를 최소로 줄이면서 를 고려하십시오 이것을 최적화하는 깨끗한 방법은 색상을 옮기는 것입니다. 빨간색 선언은 부모에게 문을두고 캐스케이드가 나머지를 수행하게합니다. 물론 실제 사례는 일반적으로 더 복잡하지만 때때로 우리가 *c *ss. CSS는 영리합니다. 너무 가되어야합니다 내가 자주 만나는 것은 상속, 초기 및 전류 콜러 값에 대한 이해가 부족하다는 것입니다. 링크가 핵심 텍스트와 동일한 색상이되기를 원한다고 가정하십시오 (밑줄이 충분하기 때문에). 다음은 bad

> 수행 방법입니다

그것이 열악한 솔루션 인 이유는 분명해야합니다. 바디 사본의 색상을 변경하면 링크 색상이 해제됩니다. 변수를 사용하려는 경우 불필요하게 복잡하게 만들고 있습니다. 또한 링크가 회색 단락으로 끝나면 (예를 들어 블록 쿼트 내부) 색상과 일치하지 않습니다! . CSS는 상속 값으로 이것을 처리하는 내장 방법을 가지고 있습니다. 그렇게 간단합니다. 이 덕분에 링크는 항상 부모의 색상을 상속합니다. 조상의 색상을 물려받을 수도 있습니다.

같은 줄을 따라 속성을 기본 값으로 다시 구체화 할 때 상기 값을 하드 코드로 만드는 것은 불량한 아이디어입니다. CSS는 이러한 시나리오에 대한 초기 마법 가치를 정확하게 가지고 있습니다. 일반적으로 차이를 만들지는 않지만 텍스트 정렬과 같은 방향 기반 속성과 같이 실제로 중요한 경우가 있습니다. 텍스트 정상을 재설정 할 때 왼쪽 설정은 RTL 언어에 손상 될 수 있습니다. 초기는가는 길입니다 (또는 더 나은 시작, 그러나이 값은 IE9에서 지원하지 않습니다). 마지막으로 CurrentColor를 알지 못하는 CSS 개발자의 수는 너무 높습니다. 당신이 그것에 대해 모른다면, 기분이 나쁘지는 않지만 스스로에게 물어보십시오. 테두리 색상을 지정하지 않을 때는 자동으로 요소의 색상과 일치합니까? 글쎄, 이것은 테두리 컬러의 기본값이 CurrentColor이기 때문에 발생합니다 (사양을 확인하십시오). 꽤 명백한 이름, 당신은 인정할 것입니다.

내 요점은 요소 글꼴과 색상을 공유하려면 하드 코딩 된 값 또는 SASS 변수 대신 CurrentColor를 사용하려는 것입니다.

이 모든 것들은 기본 CSS 기능입니다. 그들은 CSS가 그것이 무엇인지 만드는 것입니다. 그럼에도 불구하고 그들은 엄청나게 부인됩니다. 따라서 구성 요소의 코드를 개선해야한다면, 이것이 당신이 만들고 싶은 개선의 종류입니다.

당신의 git 좋은 를 얻으십시오 CSS Codebase를 리팩토링하는 것은 .quote { padding: 10px; } .quote__attribution { font-size: 80%; } .quote > :first-child { margin-top: 0; } .quote > :last-child { margin-bottom: 0; } 작품입니다. 수십 개의 파일을 업데이트 할 가능성이 높습니다. 당신은 또한 길을 따라 물건을 깨뜨릴 것입니다. 솔직히 말해서, 우리 모두는 실수를 저지르고, 그러한 큰 변화를 다룰 때, 당신이 작은 실수조차없이 모든 것을 청소하는 데 성공하면 매우 인상적입니다.

. 이 때문에 버전 컨트롤에 대해 매우 어리석게하는 것이 좋습니다 (여기서 git을 가정하는 것이 공정하다고 생각합니다). 즉, 한 가지 일을하는 것을 의미합니다. 한 가지 일만 할 수있어 갈등과 같은 지옥처럼 어려움을 겪지 않고 버그가 포함 된 단계로 돌아올 수 있습니다.

.

나는 많은 사람들에게 git가 어렵고 모호하다는 것을 알고 있으며, 그것을 단순하게 만드는 방법을 파는 것은이 기사의 범위를 벗어난 방법입니다. 당신은 이것에 대해 나를 믿어야합니다 : 당신이 화를 내고 싶지 않다면 당신의 git 역사를 시로 만드십시오.

포장 요약하고 약간의 tl을 가지고 게으른 독자들을위한 dr을 가지고 있습니다 : CSS/SASS 프로젝트 청소는 CSS 라인의 업데이트 또는 제거의 영향을 평가하기가 어렵 기 때문에 어렵습니다. CSS는 거의 테스트 할 수 없기 때문입니다. 이 때문에 조심해야합니다.

코드를 줄이면서 시작하십시오. 이것으로 시작하여 나중에 당신의 삶을 더 쉽게 만들 수 있습니다. 이것은 또한 많은 위험없이 코드베이스 상태에 대한 귀중한 개요를 얻는 좋은 방법입니다 (구문 흙을 고치는 것은 문제를 일으키지 않을 것입니다).

. 다음으로 프로젝트가 구조 방법론을 수용해야합니다. 제대로 수행되는 한 어느 쪽이든 상관 없습니다. 프로젝트가 실제로 구성 요소로 조정되지 않은 경우이 경로에서 시작할 수있는 좋은 기회가 될 것입니다. 재사용 가능한 인터페이스 덩어리를 찾고 스타일을 자신의 부분으로 추출하십시오. 더 쉬워지고 진보의 느낌을 얻도록 자유롭게 문서화하십시오.

프로젝트를 정리하고 모든 것을 올바른 위치에두면 CSS 자체를 개선 할 차례입니다. 먼저 물건을 제거 할 수 있는지 확인하십시오. 우리는 종종 너무 많은 코드를 작성합니다. 그런 다음 코드를 최적화하여 반복적이지 않도록하십시오. 그래도 과도하게 엔지니어를 사용하지 않도록 조심하십시오! 복잡성을 제거하고 추가하지 말아야합니다. 또한 첫눈에 분명하지 않은 것처럼 보이는 모든 것을 자유롭게 언급하십시오.

마지막으로, 정기적으로 그리고 논리적으로 일을 커밋하십시오. 작은 커밋에 변경 사항을 묶어 각각 한 가지 일을하는 일을하여 무언가 잘못되면 역사로 돌아가는 것이 간단합니다.

마지막이지만, 완료시기를 축하하는 것을 잊지 마십시오. 행운을 빕니다!

CSS Codebase 청소에 대한 자주 묻는 질문 (FAQ) CSS 코드베이스 청소의 중요성은 무엇입니까?

CSS 코드베이스 청소는 몇 가지 이유로 중요합니다. 첫째, 코드의 가독성을 향상시켜 다른 개발자가 더 쉽게 이해하고 작업 할 수 있습니다. 둘째, 불필요하거나 중복 코드가 제거되므로 웹 사이트 또는 응용 프로그램의 성능을 향상시킵니다. 이로 인해로드 시간이 빨라지고 사용자 경험이 향상 될 수 있습니다. 마지막으로, 깨끗한 코드베이스는 유지 관리 및 디버그가 더 쉽고 장기적으로 시간과 리소스를 절약 할 수 있습니다.

중복 또는 불필요한 CSS 코드를 어떻게 식별 할 수 있습니까?

사용 가능한 몇 가지 도구가 있습니다. 사용하지 않거나 중복 된 CSS 코드를 식별하는 데 도움이됩니다. 여기에는 브라우저 개발자 도구, CSS 커버리지 도구 및 다양한 온라인 서비스가 포함됩니다. 또한 수동 코드 검토도 특히 코드의 중복성 또는 불일치를 식별하는 데 도움이 될 수 있습니다.

CSS 코드베이스를 정리하기위한 모범 사례는 무엇입니까?

청소를위한 일부 모범 사례는 무엇입니까? CSS Codebase에는 사용되지 않거나 중복 코드 제거, 논리적이고 일관된 방식으로 코드 구성, 코드의 복잡한 섹션을 설명하기 위해 주석을 사용하고, 일관된 이름 지정 컨벤션을 준수합니다. 또한 CSS 전 처리기를 사용하면 대형 코드베이스를 관리하고 유지하는 데 도움이 될 수 있습니다.

CSS 코드베이스가 처음부터 지저분 해지는 것을 방지 할 수 있습니까?

지저분한 CSS 코드베이스를 방지하는 것은 좋은 코딩으로 시작됩니다. 관행. 여기에는 모듈 식, 재사용 가능한 코드 작성, 일관된 이름 지정 규칙을 준수하고 코드의 복잡한 섹션을 설명하기 위해 주석을 사용하는 것이 포함됩니다. 또한 정기적 인 코드 검토는 더 큰 문제가되기 전에 일찍 문제를 포착하는 데 도움이 될 수 있습니다.

CSS 코드베이스를 청소할 때 CSS 전처리 기의 역할은 무엇입니까? A CSS Preprocessor는 크게 도움이 될 수 있습니다. CSS 코드베이스 청소. 변수, 중첩, 믹스 인 및 코드를보다 읽기 쉽고 유지 관리 할 수있는 기타 기능을 사용할 수 있습니다. 또한 미니 화 및 자동 프릭 픽스와 같은 작업을 자동화하여 코드베이스의 청결과 효율성을 더욱 향상시키는 데 도움이 될 수 있습니다. CSS 코드베이스를 청소하면 웹 사이트 성능을 향상시키는 방법은 무엇입니까?

CSS 코드베이스 청소는 브라우저에서 다운로드하고 구문 분석 해야하는 코드의 양을 줄임으로써 웹 사이트 성능을 향상시킬 수 있습니다. 이로 인해로드 시간이 빨라지고 더 부드러운 사용자 경험이 생길 수 있습니다. 또한 불필요하거나 중복 코드를 제거하면 성능에 영향을 줄 수있는 충돌 또는 버그의 가능성을 줄일 수 있습니다.

CSS 코드베이스 충격 SEO를 청소할 수 있습니까?

예, CSS 코드베이스를 정리할 수 있습니다. 충격 SEO. 불필요하거나 중복 코드의 양을 줄임으로써 달성 할 수있는 더 빠른로드 시간은 검색 엔진 순위의 요소입니다. 또한 깨끗하고 잘 구조화 된 코드베이스는 검색 엔진 봇이 사이트를 크롤링하고 색인 할 수있게 해줄 수 있습니다.

CSS 코드베이스를 청소하는 프로세스를 자동화하는 데 사용할 수있는 도구는 무엇입니까?

CSS 코드베이스를 청소하는 프로세스를 자동화 할 수있는 몇 가지 도구가 있습니다. 여기에는 CSS 전 처리기, 라이터 및 미니 파이어가 포함됩니다. 또한 코드베이스를 분석하고 개선을위한 영역을 식별 할 수있는 온라인 서비스가 있습니다.

CSS 코드베이스를 얼마나 자주 정리해야합니까?

CSS 코드베이스 정리 빈도는 여러 요인에 따라 다를 수 있습니다. 코드베이스의 크기, 작업중 인 개발자 수 및 프로젝트의 복잡성을 포함하여. 그러나 일반적으로 정기적 인 코드 검토 및 정리는 코드베이스가 깨끗하고 유지 관리 가능하도록 개발 프로세스의 일부가되어야합니다.

CSS 코드베이스를 정리하는 데 어떤 어려움이 있습니까?

CSS 코드베이스를 청소하는 것은 특히 큰 레거시 코드베이스의 경우 복잡한 작업이 될 수 있습니다. 도전 과제에는 사용되지 않거나 중복 된 코드를 식별하고, 구형 브라우저와의 호환성 유지, 변경으로 인해 기존 기능이 중단되지 않도록하는 것이 포함될 수 있습니다. 또한 특히 프로세스를 자동화하기 위해 도구를 사용하지 않고 시간이 소요될 수 있습니다.

위 내용은 CSS 코드베이스 청소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!