ITCSS로 대규모 CSS 프로젝트 관리

Harry Roberts는 방갈로르 생성 12 월 2 일. 그의 이야기를 놓치지 마세요 마음을 잃지 않고 CSS 리팩토링 , 그는 레거시 CSS를 처리하기위한 팁과 기술을 공유합니다. 지금 예약 Generate 창립 멤버가되어 향후 전세계 Generate 컨퍼런스에서 50 % 할인을 받으십시오!



CSS 아키텍처는 현재 다소 유행하는 것 같습니다. 이는 의심 할 여지없이 지난 1 년 동안 여러 번 언급 한 내용이며 그럴만 한 이유가 있습니다. UI (및이를 빌드하는 팀)가 그 어느 때보 다 크고 복잡해지고 있습니다.



CSS에는 문제가되는 여러 측면이 있습니다. 이는 선언적이므로 다른 개발자에게 프로젝트의 상태 또는 구성에 대해 많은 것을 알려주는 논리 또는 제어 흐름이 없습니다. 글로벌 네임 스페이스에서 작동합니다. 즉, 충돌, 스타일 누출 및 의도하지 않은 회귀가 발생합니다. 상속을 활용하여 모든 것이 다소 상호 의존적이고 부서지기 쉽습니다. 마지막으로, 피할 수없는 특이성 모델은 선택자가 두각을 나타 내기 위해 서로 싸울 때 문제를 일으킬 수 있습니다.

이것들은 모두 그 자체로 문제이지만 합리적인 규모로 작업 할 때 직접적으로 더 분명해 지거나 그러한 문제에 직면 할 확률이 통계적으로 훨씬 더 높습니다. CSS 아키텍처를 입력하세요 : 크고 오래 실행되는 프로젝트를 위해 CSS를 계획하고 구성하는 방법입니다.



ITCSS 소개

오늘 살펴볼 아키텍처는 ITCSS – 'Inverted Triangle CSS'입니다. 이것은 전체 CSS 프로젝트를 계층화되고 거꾸로 된 삼각형으로 시각화하는 방법론입니다. 이 계층 적 모양은 CSS를 가장 효과적이고 덜 낭비적인 방식으로 주문하는 데 도움이되는 모델을 나타냅니다. 파헤쳐 보자!

ITCSS는 제가 지금까지 약 4 년 동안 어떤 형태로든 작업해온 것입니다. 지난 4 년 동안 디지털 제품에 대해 독점적으로 작업 한 것도 우연이 아닙니다. 전체 엔지니어 팀이 수개월 동안 동일한 코드베이스에서 작업하는 대규모 장기 실행 프로젝트입니다.

이런 종류의 환경 (레거시, 새로운 기능, 수많은 기여자, 빠른 속도, 발생하는 기술 부채, 이해 관계 상충 문제)에서 우리가 작성하는 코드에 훨씬 더 많은 부지런함과 구조가 필요합니다. 이것이 제가 ITCSS를 발명 한 이유입니다. 이러한 대규모 프로젝트에서 작업하는 개발자가 CSS를 더 잘 구성, 확장 및 관리 할 수 ​​있도록 지원합니다.



ITCSS의 목표는 CSS를 작성하는 방식에 수준의 형식과 구조를 제공하는 것입니다. 이는 표준에서 크게 벗어난 것이 아니며, 이는 ITCSS 로의 이전이 너무 어렵지 않다는 것을 의미합니다. 또한 대부분의 아키텍처와 접근 방식이 CSS의 성가신 측면을 피하려고 시도하는 경우 ITCSS는 CSS의 성가신 측면을 포용하고 길 들여서 우리에게 유리하게 작동합니다. ITCSS는 프로젝트의 공유 측면을 논리적이고 건전한 방식으로 정의하는 동시에 비공유 측면이 서로 간섭하지 않도록 보호하는 견고한 수준의 캡슐화 및 분리를 제공합니다.

ITCSS는 또한 매우 유연합니다. SMACSS, OOCSS 및 BEM과 같은 다른 방법론과도 호환됩니다. 프로젝트에 따라 필요에 따라 확장하거나 축소 할 수 있습니다. 전처리기를 사용하거나 사용하지 않고 작동하며 특정 명명 규칙을 적용하지 않습니다 (항상 사용하는 것이 좋습니다). 이러한 유연성은 ITCSS를 모든 규모 또는 프로젝트 스타일에 사용할 수 있음을 의미합니다.

무언가를 빈티지하게 만드는 방법

전제 조건

세부 사항을 살펴보기 전에 ITCSS로 작업 할 때 몇 가지 전제 조건이 있습니다. 이 모든 것이 모든 최신 UI 개발자에게 표준 관행이되고 있습니다. 첫째, CSS에 ID가 없습니다. ID는 특이성 중추이며,이를 사용하면 특이성이 완전히 배제됩니다.

둘째, 구성 요소 화 된 UI 아키텍처로 작업해야합니다. 더 이상 '페이지'모델이 아닌 위젯 / 모듈 / 구성 요소 패턴 (ITCSS는이를 '구성 요소'라고 함)으로 빌드합니다. 재사용 가능한 구성 요소로 개별적이고 독립적 인 UI 조각을 빌드합니다.

마지막으로 ITCSS에서는 클래스 기반 아키텍처를 선호해야합니다. HTML에 클래스를 추가하는 것을 두려워하지 않습니다. 당신은 '적은 마크 업'과 '깨끗한 마크 업'이 같은 것이라고 믿지 않는다. HTML 요소가 아닌 클래스에 대한 바인딩이 더 강력하고 확장 가능한 아키텍처를 제공한다는 것을 이해합니다.

Generate Bangalore에서 마음을 잃지 않고 CSS를 리팩터링하는 방법을 알아보세요.

Generate Bangalore에서 마음을 잃지 않고 CSS를 리팩터링하는 방법을 알아보세요.

주요 지표

ITCSS는 완전 관리 형 아키텍처이므로 전체 CSS 프로젝트를 구성하는 방법을 알려줍니다. 예를 들어 구성 요소를 빌드하는 방법을 알려주는 것이 아니라 Sass 아키텍처에서 소스 순서, 낮은 수준의 타이포그래피 스타일, 테마에 이르기까지 모든 것을 관리하는 데 도움이됩니다.

ITCSS는 세 가지 주요 지표에 따라 전체 CSS 프로젝트를 정렬하여 작동합니다. 이제 이것들을 살펴 보겠습니다.

비정상적이거나 잘못 고려 된 소스 순서로 인해 스타일이 불규칙하고 불안정하게 적용될 수 있습니다.

비정상적이거나 잘못 고려 된 소스 순서로 인해 스타일이 불규칙하고 불안정하게 적용될 수 있습니다.

01. 일반에서 명시 적으로

우리는 가장 일반적이고 낮은 수준의 포괄적이고 눈에 띄지 않는 스타일로 시작하여 결국 프로젝트를 진행하면서 더 명확하고 구체적인 규칙으로 진행합니다. 재설정으로 시작한 다음 h1–6 {}와 같은 약간 더 범위가 지정된 규칙부터 .text-center {}와 같은 매우 명시적인 규칙까지 진행할 수 있습니다.

02. 낮은 특이성에서 높은 특이성

가장 낮은 특이성 선택자는 시작 부분에 나타나며 프로젝트를 진행하면서 특이성이 꾸준히 증가합니다. 우리는 가능한 한 특이성 전쟁을 피할 수 있기를 원하므로, 낮은 특이성 선택자보다 높은 특이성 선택자를 작성하려고 시도하고 자제합니다. 우리는 항상 같은 방향으로 특이성을 추가하여 갈등을 피합니다.

03. 광범위한 지역화

프로젝트 시작을 향한 선택자는 많은 DOM에 영향을 미치며 코드베이스를 살펴보면 그 범위가 점차 줄어 듭니다. 점진적으로 영향을 미치는 규칙을 작성하여 DOM을 '통과'하고 싶습니다.

모든 요소에서 여백과 패딩을 지우는 것으로 시작한 다음 모든 유형의 요소를 스타일링 한 다음 특정 클래스가 적용된 모든 유형의 요소로 범위를 좁힐 수 있습니다. 우리에게 삼각형 모양을 제공하는 것은 도달 범위가 점차 좁아지는 것입니다.

포토샵에서 아트 보드 크기를 조정하는 방법

이러한 주요 지표에 따라 프로젝트를 주문하면 몇 가지 이점이 있습니다. 우리는 글로벌하고 광범위한 스타일을 훨씬 더 효과적이고 효율적으로 공유하기 시작할 수 있으며, 특이성 문제의 가능성을 크게 줄이고 CSS를 논리적이고 점진적인 순서로 작성합니다. 이는 더 큰 확장 성과 더 적은 중복성을 의미하며, 이는 결과적으로 낭비가 적고 파일 크기가 훨씬 더 작아짐을 의미합니다.

레이어

Inverted Triangle의 세 가지 주요 지표

Inverted Triangle의 세 가지 주요 지표

CSS를 여러 섹션 또는 '레이어'로 나눔으로써 이러한 메트릭을 고수 할 수 있습니다. 각 레이어는 각 기준을 준수하는 위치에 도입되어야합니다. 대부분의 사람들 (및 아키텍처)은 CSS 프로젝트를 주제별 그룹으로 나누려고 시도합니다. 여기에 인쇄 스타일, 양식 스타일, 이미지 갤러리 스타일이 있습니다. 이것의 단점은 CSS가 실제로 작동하는 방식에 그다지 동정적이지 않으며 캐스케이드, 상속 또는 특이성을 가장 잘 활용하거나 길들이거나 활용하는 방식으로 CSS를 주문하지 않는다는 것입니다.

ITCSS에서 각 계층은 마지막부터 논리적으로 진행됩니다. 특이성이 증가하고 더 명확하고 의도적으로 사용되며 사용되는 선택 자의 범위를 좁 힙니다. 즉, 이전에 작성된 내용에만 추가되는 순서로 작성하므로 CSS가 본질적으로 확장하기가 더 쉽습니다. 우리는 이전에 작성된 지나치게 의견이 많은 CSS를 실행 취소하거나 재정의하는 데 시간을 낭비하지 않습니다.

그것은 또한 모든 것, 모든 종류의 것들이 일관되고 예측 가능한 살 곳을 가지고 있음을 의미합니다. 이렇게하면 스타일을 찾고 추가하는 것이 훨씬 간단 해지며, 코드베이스에 많은 개발자가 기여할 때 특히 유용합니다.

기본적으로 ITCSS에는 7 개의 계층이 있습니다. 이제 이들 각각을 차례로 살펴 보겠습니다.

01. 설정

전처리기를 사용하는 경우 여기에서 시작하십시오. 여기에는 프로젝트에 대한 모든 전역 설정이 포함됩니다. 글로벌이라는 단어를 강조하고 싶습니다.이 레이어는 어디서나 액세스해야하는 설정 만 포함해야합니다. $ heading-size-1과 같은 설정은 제목 부분에 정의되어야합니다. 이렇게하면이 레이어가 멋지고 슬림하게 유지되며 대부분의 설정을 사용하는 코드와 함께 찾을 수 있으므로 훨씬 간단하게 찾을 수 있습니다.

전역 설정의 예로는 기본 글꼴 크기, 색상 팔레트, 구성 (예 : $ environment : dev;) 등이 있습니다.

02. 도구

다음 계층에는 전 세계적으로 사용 가능한 도구, 즉 믹스 인과 기능이 있습니다. 전역 적으로 액세스 할 필요가없는 믹스 인 또는 함수는 관련된 부분에 속해야합니다. 믹스 인은 기본 매개 변수로 전역 설정 중 하나를 요구할 수 있기 때문에 Tools 레이어는 Settings 레이어 뒤에옵니다. 글로벌 도구의 예로는 그래디언트 믹스 인, 글꼴 크기 조정 믹스 인 등이 있습니다.

03. 일반

Generic 레이어는 실제로 CSS를 생성하는 첫 번째 레이어입니다. 그것은 매우 높은 수준의 광범위한 스타일을 수용합니다. 이 레이어는 거의 수정되지 않으며 일반적으로 작업하는 모든 프로젝트에서 동일합니다. 여기에는 Normalize.css, 전역 상자 크기 조정 규칙, CSS 재설정 등이 포함됩니다. Generic 레이어는 많은 DOM에 영향을 미치므로 Triangle 모델에서 훌륭하고 넓으며 매우 일찍 발생합니다.

04. 요소

이들은 클래스가 지정되지 않은 베어 HTML 요소입니다. 수업이없는 h1은 어떻게 생겼습니까? 수업이없는 a의 모습은 어떻습니까? Elements 레이어는 베어 HTML 요소 (또는 '유형') 선택자에만 바인딩됩니다. 지금 우리가 '모든 h1을 이렇게 크게 만든다'또는 '모든 것을 특정 색상으로 만든다'라는 점에서 이전 레이어보다 약간 더 분명합니다. 여전히 매우 낮은 특이성 레이어이지만 DOM에 약간 덜 영향을 미치고 약간 더 독단적이므로 Triangle에서의 위치입니다.

Elements 레이어는 일반적으로 기본 요소 기반 선택자를 찾을 수있는 마지막 레이어이며 초기 설정 후에는 거의 추가되거나 변경되지 않습니다. 요소 수준 스타일을 정의한 후에는 모든 추가 및 편차를 클래스를 사용하여 구현해야합니다.

05. 개체

OOCSS 사용자는 객체의 개념에 익숙 할 것입니다. 이것은 우리가 클래스 기반 선택자를 찾는 첫 번째 레이어입니다. 비 외장 적 디자인 패턴 또는 '객체'스타일링과 관련이 있습니다. 객체는 .wrapper 요소와 같은 단순한 것부터 레이아웃 시스템, OOCSS 포스터 자식 인 미디어 객체와 같은 것까지 다양합니다. 이 계층은 마지막 계층보다 DOM에 덜 영향을 미치고, 더 높은 특이성을 가지며, 이제 클래스를 사용하여 DOM의 섹션을 대상으로한다는 점에서 약간 더 명확합니다.

06. 구성품

컴포넌트 레이어는 인식 가능한 UI의 스타일을 시작하는 곳입니다. 우리는 여전히 여기에서 클래스에 바인딩하고 있으므로 특이성은 아직 증가하지 않았습니다. 그러나이 레이어는 DOM의 명시적이고 설계된 부분을 스타일링한다는 점에서 마지막 레이어보다 더 명시 적입니다.

이 레이어에서 하나의 클래스보다 특이성이 낮은 선택자를 찾을 수 없습니다. 여기에서 초기 프로젝트 설정 후 대부분의 작업이 수행됩니다. 일반적으로 새로운 구성 요소와 기능을 추가하면 대부분의 개발이 이루어집니다.

07. 트럼프

이 레이어는 다른 모든 레이어를 능가하며, 이전에 있었던 모든 것을 무시할 수있는 권한이 있습니다. 우아하지 않고 손이 많으며 유틸리티 및 도우미 클래스, 해킹 및 재정의가 포함되어 있습니다.

이 레이어의 많은 선언에는! important가 포함됩니다 (예 : .text-center {text-align : center! important;}). 이것은 가장 높은 특이성 레이어입니다. 가장 명확한 유형의 규칙을 포함하며 초점이 가장 좁습니다. 이 레이어는 삼각형의 포인트를 형성합니다.

이 계층화 된 주요 메트릭 기반의 ITCSS 소스 주문 접근 방식에 따라 프로젝트 전반에 걸쳐 스타일을 올바르게 적용 할 수 있습니다.

이 계층화 된 주요 메트릭 기반의 ITCSS 소스 주문 접근 방식에 따라 프로젝트 전반에 걸쳐 스타일을 올바르게 적용 할 수 있습니다.

따라서 사물을 '타이포그래피 스타일'또는 '양식 스타일'로 그룹화하는 대신 특정 성, 도달 범위 및 명시 성을 기반으로 그룹으로 나누고 있습니다. 이 형식을 사용하면 이전에 온 것에 만 추가하고 상속하는 순서로 CSS를 작성할 수 있습니다.

우리의 캐스케이드와 특이성은 모두 같은 방향을 가리키고 있기 때문에 우리는 일을 되 돌리는 데 거의 시간을 할애하지 않습니다. 우리는 충돌, 누출 및 재정의의 양을 대폭 줄였습니다.

삼각형을 원뿔로 재 해석하면 아래를 내려다 보면 각 레이어의 도달 범위를 확인할 수 있습니다.

삼각형을 원뿔로 재 해석하면 아래를 내려다 보면 각 레이어의 도달 범위를 확인할 수 있습니다.

부분

각 레이어에는 일련의 부분이 포함됩니다. 이름 지정 규칙 _ .. scss (예 : _settings.colors.scss, _elements.headings.scss, _components.tabs.scss)를 권장합니다.

이러한 부분은 가능한 한 작고 세밀하게 유지되어야하며 각 부분은 역할을 수행하는 데 필요한만큼의 CSS 만 포함해야합니다. 따라서 _elements.headings.scss에는 h1에서 h6까지의 규칙 만 포함되며 그 이상은 포함되지 않습니다. 예를 들어 기본 제목 (예 : h1)과 부제목 (예 : h2)을 특정 방식으로 만드는 페이지 제목 구성 요소가있는 경우 구성 요소 레이어에 _components.page-title.scss 부분을 만들고 바인딩합니다. HTML 요소가 아닌 클래스 (예 : .page-title, .page-title-sub)에.

반응 형 웹 디자인 원칙 : 반응 형 타이포그래피 만들기

이것이 ITCSS가 작동하는 방식입니다. 우리는 모든 제목 관련 스타일을 함께 배치하지 않습니다. 대신 모든 요소 기반 규칙을 함께 배치하고 모든 클래스 기반 규칙을 함께 배치합니다. 우리는 이제 유용한 CSS 메트릭을 기반으로 프로젝트를 주문하고 있으며, 주제별로 프로젝트를 주문하여 어색한 특이성과 계단식 그룹화를 생성하지 않습니다.

결과

이 모든 것이 합쳐지면 다음과 같이 보일 수 있습니다.

@import 'settings.global'; @import 'settings.colors'; @import 'tools.functions'; @import 'tools.mixins'; @import 'generic.box-sizing'; @import 'generic.normalize'; @import 'elements.headings'; @import 'elements.links'; @import 'objects.wrappers'; @import 'objects.grid'; @import 'components.site-nav'; @import 'components.buttons'; @import 'components.carousel'; @import 'trumps.clearfix'; @import 'trumps.utilities'; @import 'trumps.ie8';

이 작은 예제에서도 각 레이어가 몇 개의 부분을 포함 할 수 있는지 확인할 수 있으며 이러한 부분은 이론적으로 원하는 @import 순서로 배치 할 수 있습니다. 유일한 요구 사항은 레이어 자체가 항상이 형성에 남아 있어야한다는 것입니다.

각 레이어에는 다음과 같은 CSS가 포함됩니다.

  • 유사한 특이성 : 모든 요소 기반 선택기 또는 모든 클래스 기반 선택기 또는! important를 포함하는 유틸리티 클래스
  • 유사한 명시 성 : 모든 HTML 요소 스타일 지정, UI 구성 요소 스타일 지정 또는 특정 도우미 클래스 스타일 지정
  • 유사한 도달 범위 : 모든 DOM (예 : * {}), DOM의 하위 집합 (예 : {}), DOM 섹션 (예 : .carousel {}) 또는 특정 DOM 노드 (예 :. clearfix {})

이 드릴 다운 접근 방식은 훨씬 더 관리하기 쉬운 CSS 아키텍처를 제공합니다. 이제 우리는 우리가 추가하는 모든 것이 이전에 있었던 모든 것에 추가되어야한다는 것을 압니다. 우리는 각 유형의 규칙이 어디에 있고 새로운 스타일을 어디에 둘 것인지 알고 있으며, 우리의 모든 다른 선택기가 서로 잘 어울릴 것이라는 확신을 가지고 있습니다.

ITCSS에 대해 더 자세히 알아 보려면 DaFED에서 해리 로버츠의 소개 강연을 살펴보세요.

레거시 CSS 작업이 싫습니까? 해리 로버츠를 놓치지 마세요 방갈로르 생성 에 대한 이야기 마음을 잃지 않고 CSS 리팩토링 . 지금 예약 Jonathan Snook, Stephanie Rieger 및 Shikhar Kapoor를 비롯한 주요 웹 이름의이 강연과 기타 강연을 즐기세요.

이 기사는 원래 267 호에 게재되었습니다. 넷 매거진 .