CSS 아키텍처와 유지 관리 가능한 CSS의 세 가지 기둥
- Jennifer Aniston원래의
- 2025-02-16 11:05:10253검색
키 포인트
관리하기 어려운 CSS 아키텍처는 예상치 못한 부작용을 가질 수 있으며 응용 프로그램의 CSS를 철저히 재 작성해야하므로 관리하기 어려운 스타일 시트를 피하려면 필수적입니다.
-
CSS 아키텍처의 요소
나쁜 CS를 물려받은 적이 있고 그것을 유지해야한다면, 앞으로 코드를 유지할 다른 사람들에게 동정심이있을 수 있습니다. 극단적 인 경우, 개발자는 응용 프로그램의 CS를 완전히 다시 작성하는 것 외에는 선택의 여지가 없습니다. 이러한 극단은 각 패치가 여러 가지 예기치 않은 부작용을 도입 할 때 발생합니다. 이것이 도달하면 스타일 시트는 유지하기가 어려워집니다. -
나쁜 코드를 통과하는 사람이되고 싶지 않다면, 처음부터 유지 가능한 CS를 만드는 방법을 알고 싶을 수도 있습니다. 어디서 시작 하시겠습니까? 완벽한 프로젝트를 구축 할 때 고려해야 할 CSS 아키텍처의 요소를 살펴 보겠습니다. - CSS를 유지할 수있는 3 개의 기둥
- 이 과정 보기이 과정보기
소프트웨어 시스템의 CSS 아키텍처를 설계 할 때 세 가지 개념을 고려할 가치가 있습니다. 이러한 개념은 매우 기본적이며 건물의 구조를 지원하는 기둥으로 생각할 수 있습니다. 우리는이 세 가지 기둥이 시간 테스트를 받고 CSS를 유지하고 유지하기 어려운 혼돈으로 무너지지 않도록해야합니다.
불행히도, 빌딩 블록 및 프레임 워크 또는 CSS 아키텍처의 조직화 된 사용으로 인해 검은 색이 풍부하고 관리하기 쉬운 CSS를 작성할 수는 없습니다. 소프트웨어 엔지니어링 원칙을 적용함으로써 당사의 코드는 신뢰할 수있게됩니다. 이것은 관리 가능한 CSS를 서면으로 세 번째 기둥입니다.
소프트웨어 엔지니어링 원칙을 CSS
에 적용하십시오
솔리드 원리
Robert C. Martin은 다섯 가지 탄탄한 원칙을 정의합니다. 이러한 원칙 중 일부는 CSS 및 기타 프로그래밍 언어에도 적용됩니다.
CSS 아키텍처 과정에서 단일 책임 원칙과 개방 및 마감 원리를 포함하여 CSS 코드의 맥락에서 이러한 견고한 원칙을 사용하는 방법에 대해 자세히 설명하는 다양한 응용 프로그램을 찾을 수 있습니다.
CSS가 습한 경우 코드의 공통 부분을 식별 하고이 공통 기능을 기본 클래스 (또는 사전 처리기를 사용하는 경우 Mixin)로 추상화하여 건조시킬 수 있습니다.
코드에서 기본 클래스 및 서브 클래스를 사용하는 것은 상속이라고하며 Sass에서 @extend를 사용하여 실행됩니다. SASS 용어를 사용하여 Mixin 또는 @Mixin 지침을 사용하면 조합을 사용합니다. 상속, 구성 및 SASS 상수의 사용은 추상화를 수행하기위한 강력한 도구입니다. CSS 에서 결합 해보십시오
<code><div class="rectangle"></div> <div class="rectangle--rounded"></div> <div class="rectangle--green"></div> <div class="rectangle--rounded--green"></div></code>더 나은 CSS 아키텍처를 향해
<code>.rectangle {
width: 200px;
height: 100px;
margin: 20px;
padding: 20px;
display: inline-block;
border: 1px solid black;
}
.rectangle--rounded {
@extend .rectangle;
border-radius: 20px;
}
.rectangle--green {
@extend .rectangle;
background-color: green;
}
.rectangle--rounded--green {
@extend .rectangle--rounded;
@extend .rectangle--green;
}</code>
예를 들어 많은 블로그 게시물을 수집하고 제공된 CSS 코드를 유지하기 어려운 이유를 알아 봅니다. 우리는 CSS를 리팩토링하는 과정을 점차적으로 완료 하고이 기사에서 소개 된 원칙을 적용하고 코스 비디오에서 심도있게 적용 할 것입니다.
<code>@mixin rounded {
border-radius: 20px;
}
@mixin green {
background-color: green;
}</code> CSS 아키텍처 및 유지 관리 가능한 CSS 에 대한 질문이 자주 묻습니다
CSS 변수 (CSS 사용자 정의 속성이라고도 함)를 사용하면 개발자가 재사용 가능한 값을 정의 할 수 있습니다. 코드 복제를 줄이고 글로벌 변화를 더 쉽게 만들어 유지 관리 가능성을 크게 향상시킬 수 있습니다. 예를 들어, 변수로 색상을 정의하면 스타일 시트 전체에서 재사용하여 한 곳에서 변경할 수 있습니다.
스타일 린트와 같은 CSS 보풀 도구는 코딩 표준을 실행하고 문제가 발생하기 전에 잠재적 인 문제를 캡처하는 데 도움이 될 수 있습니다. 특정 문제를 자동으로 수정하고 다른 문제에 대한 조언을 제공하여 코드 품질과 유지 관리를 향상시킬 수 있습니다.
CSS 아키텍처는 웹 개발에 중요한 역할을합니다. CSS 코드를 작성하는 구조화 된 방법을 제공하여 코드를 이해, 유지 관리 및 확장하기 쉽게 만듭니다. 잘 정의 된 CSS 아키텍처를 통해 개발자는 특정 충돌, 명명 충돌 및 코드 복제와 같은 문제를 피할 수 있습니다. 또한 코드 재사용을 용이하게하고 웹 페이지를 작성하는 데 필요한 시간과 노력을 줄입니다.
반전 삼각형 CSS (ITCS)는 대규모 CSS를 관리하는 데 도움이되는 방법입니다. CSS를 여러 층으로 구성하며 각 층은 특정 역할을합니다. 이 계층 구조는 가장 일반적인 스타일이 먼저로드되고보다 구체적인 스타일이로드되어 특정 문제의 가능성을 줄입니다.
CSS 변수는 어떻게 관리 가능한 CSS를 촉진합니까?
SASS 및 LESS와 같은 CSS 전 처리기는 변수, 중첩, 믹스 인 및 일반 CSS에서 사용할 수없는 기능과 같은 기능을 제공합니다. 이러한 기능은 코드의 유지 관리 가능성과 가독성을 크게 향상시켜 복잡한 CS를 쉽게 작성할 수 있습니다.
스타일 가이드는 일련의 CSS 쓰기 표준을 제공합니다. 코드 기반의 일관성을 보장하고 코드를보다 쉽게 읽고 유지 관리 할 수 있습니다. 스타일 가이드에는 이름 지정 규칙, 서식 규칙 및 모범 사례가 포함될 수 있습니다.
위 내용은 CSS 아키텍처와 유지 관리 가능한 CSS의 세 가지 기둥의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!