CSS 아키텍처와 유지 관리 가능한 CSS의 세 가지 기둥

키 포인트

관리하기 어려운 CSS 아키텍처는 예상치 못한 부작용을 가질 수 있으며 응용 프로그램의 CSS를 철저히 재 작성해야하므로 관리하기 어려운 스타일 시트를 피하려면 필수적입니다. 3 가지 기본 개념 또는 기둥은 CSS 아키텍처 설계의 초석을 형성합니다. 빌딩 블록 (예 : SASS, 효율적인 CSS 선택기, BEM 구문 등), 이러한 빌딩 블록을 신뢰할 수 있고 유지 관리 가능한 계층 적 CSS로 조정하고 소프트웨어 엔지니어링의 적용 원칙. 우려 분리 및 견고한 원칙과 같은 소프트웨어 엔지니어링 원칙은 CSS에 적용되어 코드가 현실을 유지할 수있는 방식으로 보장 할 수 있습니다. 여기에는 건조 (자신을 반복하지 마십시오) 및 습식 (우리는 입력하는 것을 좋아하는)과 같은 원리를 적용하여 코드의 유지 보수 가능성을 향상시키는 것이 포함됩니다.

믹스 인 및 상속을 사용하는 것과 같은 CSS를 결합하려고하면 더 강한 구조를 제공하고 각 조합에 대한 클래스를 정의해야 할 필요성을 줄여 CSS가 더 쉽습니다.

• CSS 아키텍처의 요소 나쁜 CS를 물려받은 적이 있고 그것을 유지해야한다면, 앞으로 코드를 유지할 다른 사람들에게 동정심이있을 수 있습니다. 극단적 인 경우, 개발자는 응용 프로그램의 CS를 완전히 다시 작성하는 것 외에는 선택의 여지가 없습니다. 이러한 극단은 각 패치가 여러 가지 예기치 않은 부작용을 도입 할 때 발생합니다. 이것이 도달하면 스타일 시트는 유지하기가 어려워집니다.
이제 건축 적으로 신뢰할 수있는 결정을 내림으로써 미래의 자아에 어려움을 겪지 않을 수 있습니다. 그렇기 때문에 실제로 유지 가능한 CSS 아키텍처를 구축하는 방법을 배우는 것이 매우 중요합니다.
• 나쁜 코드를 통과하는 사람이되고 싶지 않다면, 처음부터 유지 가능한 CS를 만드는 방법을 알고 싶을 수도 있습니다. 어디서 시작 하시겠습니까? 완벽한 프로젝트를 구축 할 때 고려해야 할 CSS 아키텍처의 요소를 살펴 보겠습니다.
• CSS를 유지할 수있는 3 개의 기둥
"사무실의 CSS 영웅이되기 : CSS 아키텍처"코스를 시청하십시오. 비디오 재생 아이콘
• 이 과정 보기이 과정보기 소프트웨어 시스템의 CSS 아키텍처를 설계 할 때 세 가지 개념을 고려할 가치가 있습니다. 이러한 개념은 매우 기본적이며 건물의 구조를 지원하는 기둥으로 생각할 수 있습니다. 우리는이 세 가지 기둥이 시간 테스트를 받고 CSS를 유지하고 유지하기 어려운 혼돈으로 무너지지 않도록해야합니다.
첫 번째 기둥은 CSS 아키텍처의 빌딩 블록을 정의합니다. 이 빌딩 블록에는 SASS 사용, 효율적인 CSS 선택기 쓰기, BEM (Block-Element-Modifier) ​​구문, ID 속성 대신 클래스를 사용하고 적절한 단위의 친척을 사용하는 것과 같은 다양한 솔루션 및 도구가 포함되어 있습니다.

이 견해는 CSS 코드의 품질을 크게 향상시킬 수 있지만, 우리는 우리의 작업을 체계적으로 체계적으로 관리하기 위해 더 높은 수준의 조직이 필요합니다. 따라서, 우리는 신뢰할 수 있고 유지 관리 가능한 계층 적 CSS를 구축하기 위해 빌딩 블록의 오케스트레이션에 중점을 둔 두 번째 기둥이 필요합니다. 이 층을 CSS 아키텍처의 골격으로 생각하십시오. 기성품 두 개의 CSS 아키텍처에 관심이 있다면 ITCS 및 SMACSS를 추가로 연구 할 수 있습니다.

불행히도, 빌딩 블록 및 프레임 워크 또는 CSS 아키텍처의 조직화 된 사용으로 인해 검은 색이 풍부하고 관리하기 쉬운 CSS를 작성할 수는 없습니다. 소프트웨어 엔지니어링 원칙을 적용함으로써 당사의 코드는 신뢰할 수있게됩니다. 이것은 관리 가능한 CSS를 서면으로 세 번째 기둥입니다.

소프트웨어 엔지니어링 원칙을 CSS

에 적용하십시오 오래 지속되는 소프트웨어를 설계하기위한 여러 가지 원칙이 있습니다.

이러한 원칙은 CSS 코드가 현실을 유지할 수있는 방식으로 모델링하여 CSS 도구 및 솔루션을 사용하기위한 목적을 제공합니다. 이러한 원칙이 없으면 CSS 아키텍처를 사용하는 것은 대부분 의식 일뿐입니다. CSS를 작성하기 위해 소프트웨어 엔지니어링 원칙을 따르지 않으면 코드 크기가 유지되기 어려워지면 종종 압도되고 무너집니다. 특정 프로그래밍 언어에서 많은 경험을 가진 소프트웨어 엔지니어라면 CSS와 같은 선언적 언어에 이러한 원칙을 적용하는 것이 매우 놀랍습니다. 그러나 실제로 CSS는 다른 언어와 비슷한 성숙한 언어가되었습니다. 구조는 필요한 코드에 대해 사려 깊습니다. 일부 주요 원칙의 실제 적용을 살펴 보겠습니다. 우려의 분리

관심 분리는 소프트웨어 솔루션에서 명확한 분리 책임을 정의하는 소프트웨어 설계 원칙입니다. CSS에 가장 분명한 적용은 스타일에 대한 클래스와 기능에 대한 클래스 간의 분리입니다. 스타일 클래스는 JavaScript 코드에 표시되지 않아야하며 기능 관련 클래스는 스타일 시트에 표시되지 않아야합니다.

솔리드 원리

Robert C. Martin은 다섯 가지 탄탄한 원칙을 정의합니다. 이러한 원칙 중 일부는 CSS 및 기타 프로그래밍 언어에도 적용됩니다.

CSS 아키텍처 과정에서 단일 책임 원칙과 개방 및 마감 원리를 포함하여 CSS 코드의 맥락에서 이러한 견고한 원칙을 사용하는 방법에 대해 자세히 설명하는 다양한 응용 프로그램을 찾을 수 있습니다.

스타일 시트 계층 구조에서 우리는 단일 책임 원칙을 적용합니다. 예를 들어, ITCSS 아키텍처의 레이어에는 리셋 또는 정규화 절차가 포함되어 있습니다. 태그 스타일은 정규화 프로그램을 기반으로하며 구성 요소 스타일은 태그 스타일을 기반으로 구축됩니다. 각 레벨에는 잘 정의 된 단일 책임이 있습니다.

CSS 코드에 소프트웨어 엔지니어링 원칙을 적용하는 가장 유명한 예는 건식과 습식 CSS의 비교입니다. 드라이는“자신을 반복하지 말아라”를 나타냅니다. 젖은 것은“우리는 타이핑하는 것을 좋아합니다.”

건조 코드를 변경할 때마다 한 곳에서만 변경을 수행하기 만하면 다른 외관을 위해 나머지 CSS 코드 기반을 검색 할 필요가 없기 때문에 코드 건조가 가능합니다. 동일한 코드 조건의.

CSS가 습한 경우 코드의 공통 부분을 식별 하고이 공통 기능을 기본 클래스 (또는 사전 처리기를 사용하는 경우 Mixin)로 추상화하여 건조시킬 수 있습니다.

코드에서 기본 클래스 및 서브 클래스를 사용하는 것은 상속이라고하며 Sass에서 @extend를 사용하여 실행됩니다. SASS 용어를 사용하여 Mixin 또는 @Mixin 지침을 사용하면 조합을 사용합니다. 상속, 구성 및 SASS 상수의 사용은 추상화를 수행하기위한 강력한 도구입니다.

CSS 에서 결합 해보십시오 실용적인 예를 살펴 보겠습니다. 코드베이스에 네 가지 유형의 사각형이 있다고 가정합니다. 범용 사각형, 둥근 사각형, 녹색 사각형 및 둥근 녹색 사각형.

우리는 BEM 이름 지정 컨벤션을 사용하여 각 직사각형 구성 요소를 다음과 같이 표시 할 수 있습니다. 상속을 사용 하여이 네 가지 클래스를 SASS에서 정의해 봅시다. 우리는 .rectangle의 기본 클래스로 시작하여 sass @extend를 사용하여 기본 클래스의 스타일을 상속하는 수정 자 클래스를 만듭니다. 구조는 명확하고 우리는 수정 된 클래스에서 자신을 반복하지 않았습니다. 그러나 5 개의 수정 자의 계층 구조를 생성하면 31 개의 클래스 정의가 발생하며 대부분 @extend 지시문에 지나지 않습니다.

조합은 우리에게 더 강한 구조를 제공합니다. 완전히 유연한 구조를 만들려면 일반적인 직사각형 클래스와 두 개의 믹스가 필요합니다.

우리가 특별한 기능 상자가 있다고 가정 해 봅시다.

피처 박스가 둥글지만 녹색이 아닌 경우 사각형 클래스를 확장하고 사각형을 둥글게 만드는 믹스를 포함하면됩니다.

구조는 각 조합의 클래스를 정의하지 않고 유연합니다.

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

더 나은 CSS 아키텍처를 향해

우리는 소프트웨어 엔지니어링 원칙이 CSS 및 기타 프로그래밍 언어에 적용된다는 결론을 내릴 수 있습니다. 이러한 원칙은 CSS 빌딩 블록의 마이크로 레벨 과이 빌딩 블록의 거시적 레벨의 두 가지 수준 사이에 속합니다. 따라서 유지 관리 가능한 CSS를 만들 때 실제로 이러한 원칙을 적용하는 방법을 배우는 것이 좋습니다.

이러한 원칙의 실제 적용을 설명하고 입증하기 위해 CSS 아키텍처 원리에 대한 과정을 만들었습니다 이 과정에서는 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를 리팩토링하는 과정을 점차적으로 완료 하고이 기사에서 소개 된 원칙을 적용하고 코스 비디오에서 심도있게 적용 할 것입니다.

나는 ITCSS 아키텍처 및 SASS를 사용하여 작은 구성 요소 라이브러리를 만들어 CSS 아키텍처의 세 기둥을 실천하는 섹션을 개발했습니다. CSS 아키텍처에 대해 더 많이 배우고 싶다면 코스에 가입하고 코스에서 우리를 만나십시오!

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

CSS 아키텍처 및 유지 관리 가능한 CSS

에 대한 질문이 자주 묻습니다 웹 개발에서 CSS 아키텍처의 중요성은 무엇입니까?

CSS 아키텍처는 웹 개발에 중요한 역할을합니다. CSS 코드를 작성하는 구조화 된 방법을 제공하여 코드를 이해, 유지 관리 및 확장하기 쉽게 만듭니다. 잘 정의 된 CSS 아키텍처를 통해 개발자는 특정 충돌, 명명 충돌 및 코드 복제와 같은 문제를 피할 수 있습니다. 또한 코드 재사용을 용이하게하고 웹 페이지를 작성하는 데 필요한 시간과 노력을 줄입니다.

OOCSS 방법은 어떻게 관리 가능한 CSS를 촉진합니까?

객체 지향 CSS (OOCSS)는 코드 재사용을 촉진하고보다 빠르고 효율적인 스타일 시트를 홍보하는 방법입니다. 개발자는 CSS를 각각 고유 한 속성과 행동을 가진 객체 시스템으로 생각하도록 권장합니다. OOCSS를 사용하면 컨텐츠에서 구조와 컨테이너에서 구조를 분리하여 확장 가능하고 유지 관리 가능한 CS를보다 쉽게 ​​만들 수 있습니다.

CSS 아키텍처에서 BEM 방법의 역할은 무엇입니까?

블록, 요소, 수정 자 (BEM)는 HTML 및 CSS의 클래스에 사용되는 명명 규칙입니다. 코드를 쉽게 읽고 이해할 수 있도록 명확하고 엄격한 구조를 제공합니다. BEM 접근 방식은 이름 지정 및 특정 갈등의 기회를 줄임으로써 강력하고 확장 가능한 CSS 아키텍처를 만드는 데 도움이됩니다.

SMACSS 방법은 관리 가능한 CSS를 만드는 데 어떻게 도움이됩니까?

CSS의 SMACS (Scalable and Modular Architecture)는 모듈성 및 확장 성을 장려하는 스타일 가이드입니다. CSS 규칙을 기초, 레이아웃, 모듈, 상태 및 테마의 5 가지 유형으로 나눕니다. 이 분류는 CSS 코드를 구성하는 데 도움이되므로 유지 관리 및 확장이 쉽습니다.

CSS 아키텍처에서 ITCSS 방법의 중요성은 무엇입니까?

반전 삼각형 CSS (ITCS)는 대규모 CSS를 관리하는 데 도움이되는 방법입니다. CSS를 여러 층으로 구성하며 각 층은 특정 역할을합니다. 이 계층 구조는 가장 일반적인 스타일이 먼저로드되고보다 구체적인 스타일이로드되어 특정 문제의 가능성을 줄입니다. CSS 변수는 어떻게 관리 가능한 CSS를 촉진합니까?

CSS 변수 (CSS 사용자 정의 속성이라고도 함)를 사용하면 개발자가 재사용 가능한 값을 정의 할 수 있습니다. 코드 복제를 줄이고 글로벌 변화를 더 쉽게 만들어 유지 관리 가능성을 크게 향상시킬 수 있습니다. 예를 들어, 변수로 색상을 정의하면 스타일 시트 전체에서 재사용하여 한 곳에서 변경할 수 있습니다.

관리 가능한 CSS에서 CSS 전 처리기의 역할은 무엇입니까?

SASS 및 LESS와 같은 CSS 전 처리기는 변수, 중첩, 믹스 인 및 일반 CSS에서 사용할 수없는 기능과 같은 기능을 제공합니다. 이러한 기능은 코드의 유지 관리 가능성과 가독성을 크게 향상시켜 복잡한 CS를 쉽게 작성할 수 있습니다.

구성 요소 기반 아키텍처는 어떻게 관리 가능한 CS를 촉진합니까?

구성 요소 기반 아키텍처는 각각 고유 한 HTML, CSS 및 JavaScript와 함께 재사용 가능한 독립적 인 구성 요소의 생성을 용이하게합니다. 이 접근법은 한 구성 요소의 변경이 다른 구성 요소에 영향을 미치지 않기 때문에 코드를보다 모듈화하고 유지하기가 더 쉽습니다.

CSS 아키텍처에서 스타일 가이드의 중요성은 무엇입니까?

스타일 가이드는 일련의 CSS 쓰기 표준을 제공합니다. 코드 기반의 일관성을 보장하고 코드를보다 쉽게 ​​읽고 유지 관리 할 수 ​​있습니다. 스타일 가이드에는 이름 지정 규칙, 서식 규칙 및 모범 사례가 포함될 수 있습니다.

CSS 보풀 도구는 어떻게 관리 가능한 CSS를 홍보합니까?

스타일 린트와 같은 CSS 보풀 도구는 코딩 표준을 실행하고 문제가 발생하기 전에 잠재적 인 문제를 캡처하는 데 도움이 될 수 있습니다. 특정 문제를 자동으로 수정하고 다른 문제에 대한 조언을 제공하여 코드 품질과 유지 관리를 향상시킬 수 있습니다.

위 내용은 CSS 아키텍처와 유지 관리 가능한 CSS의 세 가지 기둥의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!