폴더로 시작하십시오. 포장되지 않은 타사 라이브러리를 거기로 옮기십시오 (즉, 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 코드베이스를 청소하는 것은 특히 큰 레거시 코드베이스의 경우 복잡한 작업이 될 수 있습니다. 도전 과제에는 사용되지 않거나 중복 된 코드를 식별하고, 구형 브라우저와의 호환성 유지, 변경으로 인해 기존 기능이 중단되지 않도록하는 것이 포함될 수 있습니다. 또한 특히 프로세스를 자동화하기 위해 도구를 사용하지 않고 시간이 소요될 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
