CSS의 역삼각형 아키텍처(ITCSS)

모듈식 CSS의 개념은 몇 년 전부터 등장했다.우리의 프로젝트가 성장하기 시작했을 때, CSS를 사용한 모든 개발자들은 우리의 양식이 신축성과 유지보수성을 가지도록 하는 어려움을 처리해야 한다. 그 외에 몇 명이 협력하고 있다.이것이 바로 우리가 일을 간소화하기 위해 많은 방법이 출현한 이유이다.이러한 방법은 어떤 도서관이나 기술에서도 찾을 수 없으며, CSS를 조직하는 데 도움을 주는 지침과도 같다.
가장 유명한 것은 OOCSS(대상을 대상으로 하는 CSS), SMACSS(CSS의 신축 및 모듈화 구조), BEM(블록, 요소, 수정기)과 ITCSS(역삼각형 CS)다.
CSS 구조의 개념은 SASS나 더 적은 CSS 프로세서의 등장에 따라 만들어진 것으로 서로 다른 파일을 가져오고 변수와 함수를 사용하며 다른 기능을 사용할 수 있습니다.본고에서 저는 ITCSS 체계 구조와 프로젝트에서 실현할 때 제공할 수 있는 장점을 중점적으로 소개하고자 합니다.

그것은 무엇입니까?

Harry Robers에서 개발한 이 제품은 CSS 코드를 최적의 방법으로 구성하기 위한 것입니다.이 이름은 CSS의 역삼각형 아키텍처에서 유래한 것으로, 파일이 특정 수준과 중요도에 따라 계층화되어 있기 때문입니다.

로버스는 ITCSS에 대해 다음과 같이 정의합니다.

확장 가능하고 관리 가능한 아키텍처입니다.

이것은 철학이지 도서관이 아니다.

사전 프로세서와 독립적입니다(예전 프로세서를 사용하는 것이 가장 효과적임에도 불구하고).

이것은 원 프레임이고 프레임에 사용되는 프레임이다.다른 프레임과 함께 사용할 수 있는 기반이 될 수 있다는 것이다.

그 출현의 주요 목적은 우리 프로젝트의 CSS 파일을 조직하여 등급연결과 선택기의 특수성으로 인한 문제를 해결하는 데 있다.아래 차트를 보면 올바른 방법을 따르지 않는 CSS 프로젝트가 어떻게 종료되었는지 알 수 있습니다.

만약 우리가 CSS 파일에서 항목의 모든 규칙을 본다면, 도형 X축의 왼쪽은 시작이고, 오른쪽은 끝입니다.우리는 우리가 어떻게 시작하는 규칙을 끝의 규칙을 능가하게 하는지 보았고, 다른 중간에 있는 규칙이 가장 중요하다.간단히 말하면, 우리의 코드는 유지하기가 매우 복잡하고, 우리가 추가한 새로운 규칙은 특정성과 직접적으로 충돌한다.
ITCSS의 목표는 CSS 파일을 계층적으로 구성하여 상향식 기능을 구현하는 것입니다.

확실히 특정성과 등급 연결의 규칙은 매우 명확하지만 우리가 실제 프로젝트에서 일할 때 우리는 id의 조합을 사용하는 것을 발견한다!중요하고 끼워 넣는 것은 새로운 규칙을 적용하는 것이 문제이며, 우리 프로그램은 최종적으로 유지보수할 수 없다는 것을 의미한다.
따라서 모든 CSS 세션은 어느 것이 그 앞에 있고 어느 것이 다음인지 알아야 한다는 것을 알 수 있습니다.다시 말하면 의존 관계가 만들어진다.마지막으로 CSS는 거대한 의존 나무입니다.
이 모든 문제를 해결하기 위해서는 다음과 같은 것이 필요합니다.

많은 사람들에게 건강하고 편리한 환경이다.

코드와 등급의 순서를 제어하고 길들일 수 있다.

신구가 공존하는 곳을 만들자.

이중화를 줄입니다.

특정성을 겨냥한 전쟁을 끝내다.

이것이 바로 ITCSS 탄생의 원칙이다.이제 이 점을 어떻게 실현할 것인가의 예를 살펴보자.

구조

상부에서 정의한 코드는 하부에서 정의한 코드보다 영향이 더 크다.따라서 상층부는 하층부에 영향을 미치지만 거꾸로 되지는 않는다.하층부는 상급자의 풍격을 계승할 것이다.

- 설정합니다.이것은 프로세서를 사용할 때 변수를 정의하는 곳입니다.CSS는 생성되지 않습니다.

$main-color: #6834cb

- 도구입니다.프로세서를 사용하면 함수와mixin이 이 층에 정의됩니다.이전과 마찬가지로 CSS가 생성되지 않습니다.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

- 공통.이것은 브라우저를 재설정하거나 표준화하는 데 사용되는 일반 코드를 가리킨다.예를 들어 css를 리셋하거나 규범화하면 여기에 나타납니다.

* {
  padding: 0;
  margin: 0;
}

- 요소입니다.HTML 태그에 영향을 주는 규칙입니다.

h1 {
  color: $main-color;
  font-size: 24px;
}

- 물체.대상, 즉 전체 프로젝트에서 다시 사용할 수 있는 범주.예를 들어 용기.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

- 어셈블리입니다.대상과 달리 구성 요소는 인터페이스의 특정한 부분이다.구성 요소의 한 예는 검색 표시줄이나 프로그램의 제목입니다.우리가 구성 요소를 위해 정의한 스타일은 이 구성 요소에만 영향을 줄 것입니다.

.search-bar {
  background-color: $pearl;
  color: $light-grey;
  font-size: 22px;
}

트럼프.이 레이어는 유틸리티라고도 하며 이전 레이어에 정의된 다른 규칙을 모두 덮어쓰는 규칙을 포함합니다.이게 유일한 층이야!중요한 건 허락이야.예를 들어 디스플레이: none을 사용하여 요소를 숨길 수 있는 클래스가 있습니다.

.d-none {
  display: none!important;
}

프로젝트의 구조

프로젝트를 구성하기 위해 SASS를 CSS 사전 프로세서로 사용한다고 가정해 보겠습니다.

- 가져온 컨텐트가 들어 있는 폴더입니다.이것은 내가 모든 ITCSS 층의 파일을 더욱 잘 조직하는 데 사용하는 것이다. 특히 몇 사람이 일할 때, 우리는 코드를 더욱 잘 포지셔닝하고 가져올 새 파일을 어디에 추가할 수 있다.그러나 원하는 경우 이 폴더를 생략하고 주 파일에 직접 가져오기를 추가할 수 있습니다.

- 응용 프로그램에서 사용할 단일 CSS로 컴파일되는 가져오기 마스터 파일이 모두 포함됩니다.imports 폴더에서 층별로 가져오는 것처럼, 이것은 더 가볍고 깨끗한 방법입니다. 여기에 더 많은 파일을 추가할 염려가 없습니다.

구분하기 쉽도록 다른 파일에서만 가져오기 형식으로 사용되는 파일 이름의 밑줄로 시작합니다.

결론

이것이 바로 ITCSS 구조를 따르는 프로젝트의 구조다.Vue나 React로 만든 작은 프로젝트에 대해 얼마나 큰 쓸모가 있는지 알 수 없지만, 대형, 여러 사람이 참여하고 확장 가능한 프로젝트에 대해 ITCSS는 상당히 일치하는 프레임워크를 제공한다.만약에 우리가 우리 자신의 라이브러리를 만들고 싶다면 이 라이브러리들은 몇 가지 프로젝트에 통용되기 때문에 통일된 체계 구조를 가지고 있다면 그것도 매우 유용하다.
마지막으로 ITCSS는 다른 프레임워크와 호환되고 심지어 BEMIT까지 등장했다. 이것은 BEM과 ITCSS의 연합 사용으로 이들의 장점을 강화했다.그러나 이것은 다른 문장의 주제다.

재미있는 링크

Harry Roberts ITCSS에 대한 심도 있는 설명: https://vimeo.com/114965689