웹 개발자를위한 ITCSS 소개
몇 가지 훌륭한 방법이 있습니다. CSS 코드 구조, 그들은 모두 다른 방식으로 작동합니다. 가장 인기있는 것은 OOCSS와 SMACSS이지만, 알려진 덜 알려진 방법이 있습니다. ITCSS (역 삼각형 CSS) 해리 로버츠 (Harry Roberts) 만든.
라이브러리 또는 프레임 워크가 아니지만 코드 작성 방법론 그것은 확장 가능하고 조작하기 쉽습니다. ITCSS의 장점은 다음과 같습니다. 간단한 코드 구성 파일 크기를 줄이고 CSS 아키텍처에 대한 더 깊은 이해.
ITCSS는 모든 사람들을위한 것은 아니지만 코딩 과정에서 스타일 시트를 명료하게 볼 수있는 전문적인 방법을 제공합니다. ITCSS의 개념을 탐구하고 웹 프로젝트에 어떻게 적용 할 수 있는지 살펴 보겠습니다..
ITCSS 란 무엇입니까??
CSS를 구성하는 현대적인 방법은 종종 모듈화 또는 CSS 객체 추상적 인 아이디어를 만들자..
Inverted Triangle CSS의 새로운 아이디어는 분할 CSS 속성의 계층화 된 방법 그들의 특이성과 중요성의 정도에 따라. SMACSS 및 OOCSS와 비교하여 덜 알려진 방법입니다 - 둘 다 ITCSS와 결합 될 수 있지만.
ITCSS가 주로 독점적 인, 그것의 사용법에 관하여 상세한 규칙 책은 존재하지 않는다. 오직 특정 원칙 세트 우리 처분이야. 저자는 아래 동영상에서 이에 대해 이야기합니다..
기본적으로 ITCSS는 OOCSS와 동일한 원칙을 사용하지만 더 큰 분리 특이성에 기초. 따라서 OOCSS에 이미 익숙하다면이 점을 고유 한 것으로 간주하십시오. 대체 CSS 아키텍처 시도하다.
ITCSS 사용의 가장 큰 이점은 다음과 같습니다.
- 페이지 객체는 자신의 CSS / SCSS 파일로 분할 될 수 있습니다. 재사용 성. 모든 개체를 복사 / 붙여 넣기 및 확장하는 것이 간단합니다. 다른 프로젝트로.
- 특이도 너까지.
- 저기있다. 설정된 폴더 구조 없음, 전처리 도구를 사용할 필요가 없습니다..
- CSS 모듈과 같은 다른 방법론의 개념을 병합하여 나만의 하이브리드 워크 플로우 만들기.
ITCSS 시스템
Lubos Kmetko의 포스트에서 다음 그림을 사용하여 Inverted Triangle Model이 어떻게 작동하는지 살펴 보겠습니다..
역 삼각형의 평평한 상단에서 하단의 팁까지의 방향 흐름은 특이성 증가. 이 덜 구체화 된 것에 집중하다 사이트에서 여러 번 클래스를 재사용하는 것을 더 쉽게 만듭니다..
삼각형의 각 하위 섹션은 별도의 파일 또는 파일 그룹으로 간주 될 수 있지만 이러한 방식으로 코드를 작성할 필요는 없습니다. 가져 오기 기능으로 인해 Sass / Less 사용자의 경우 더 이해하기 쉽습니다. 각 하위 섹션에 대한 방법론을 생각해보십시오. 재사용 가능한 CSS 코드 분할 및 구성.
잠깐 살펴 보겠습니다. 역 삼각형의 각 섹션 위에서 아래로 팁으로 이동.
- 설정 - 프리 프로세서 변수 및 메소드 (실제 CSS 출력 없음)
- 도구들 - Mixins 및 함수 (실제 CSS 출력 없음)
- 일반적인 - Eric Meyer의 재설정, Normalize.css 또는 사용자 자신의 코드 배치를 포함하는 CSS 재설정
- 집단 - 클래스가없는 단일 HTML 요소 선택기
- 사물 - 일반적으로 OOCSS 방법론을 따르는 페이지 구조의 클래스
- 구성 요소 - 모든 페이지 요소를 스타일링하기위한 미학 수업 (종종 객체 클래스의 구조와 결합)
- 트럼프 - 삼각형의 다른 것을 오버라이드하기위한 가장 구체적인 스타일
거꾸로 된 삼각형의 각 레이어는 필요에 맞게 조정. 따라서 CSS 사전 처리기를 사용하지 않으면 설정 또는 도구 계층이 필요하지 않습니다..
자신이 적합하다고 생각하는대로 각 하위 섹션을 자유롭게 해석해야합니다. 예를 들어 Jordan Koschei는 구조와 미학을 함께 객체 클래스에 결합하는 방법을 설명하며 구성 요소 섹션에는 거의 남지 않습니다..
ITCSS는 가지고있다. 굳건한 규칙은 없다. 따라 와야합니다. ITCSS 적합성 검사기가 없으며 아무도이 모델을 약간 변경하면 소리를 지르지 않습니다..
ITCSS의 창시자 인 해리 로버츠 (Harry Roberts)는 자신의 방식을 내부 용으로 유지하는 데 관심이 있었지만 ITCSS의 오픈 소스 사례 이 GitHub 레포에서. Harry Roberts의 개인 웹 사이트 인 CSS Wizardry 계정에 의해 호스팅됩니다..
BEM + IT = BEMIT 명명
가장 유명한 CSS 명명 체계 중 하나가 BEM입니다. 이것은 Block-Element-Modifier의 약자이며 아주 특별한 구문을 따른다..
BEM의 각 요소는 CSS 클래스의 명명 규칙을 설명합니다.
- 블록 복제가 가능하고 독립형 인 개별 요소에 대한 클래스입니다..
- 집단 항상 블록의 일부이다.
- 수정 자 항상 블록 또는 요소를 수정하여 모양을 약간 변경합니다 (켜짐 / 꺼짐, 활성 / 비활성, 고정, 정적, 강조 / 중립).
BEMIT 명명 규칙 ITCSS에서 채택, ITCSS를 통해 새로운 아이디어를 구현하면서 BEM의 아이디어를 차용합니다..
BEM 구문은 매우 구체적인 규칙을 나타냅니다. 아래는 BEM 웹 사이트의 샘플입니다.
.form .form - theme-xmas .form - 간단한 .form__input .form__submit .form__submit - 비활성화
블록은 이름이 분리되어 있지 않거나 하나의 대시 또는 밑줄로 분리 된 이름을 갖습니다. 요소는 두 개의 밑줄을 사용하며 해당 특정 블록과 일치하는 내부 요소를 설명합니다. 수식어는 동일한 방식으로 작동하지만 식별을 위해 두 개의 대시를 사용합니다..
해리는이 블로그 게시물에서 BEMIT에 대해 자세히 설명합니다. 그의 설명은 매우 간결하며 ITCSS의 본질은 다른 CSS 방법론과 친숙해지다..
해리는 정의한다. 객체의 네임 스페이스 나타나는 각 주요 클래스 이름의 접두어. 그들은 다음과 같이 무너진다. 영형- 사물, 기음- 구성 요소의 경우 유- 유틸리티 용 (예 : clearfix 또는 텍스트 센터링).
다음은 몇 가지 샘플 코드입니다. 일반적인 BEMIT 명명 규칙.
![]()
...
그는 또한 @ 미디어 스타일에 기반한 클래스의 접미사. 그래서 .오 - 미디어 수업이로 바뀔 수도있다. .o-media @ lg 대형 화면의 경우 .o-media @ md 중간 크기 스크린 용.
개인적으로 추가 접미사는 기본 웹 프로젝트에 너무 복잡하다.. 대부분의 개발자는 공통적 인 미디어 쿼리를 사용하고 다른 중단 점에서 클래스를 다시 작성한다고 생각합니다. 하지만 어느 방법이 옳고 그른지를 말할 수는 없으며 누구나 BEMIT를 사용할지 말 것인지를 개별적으로 결정할 수 있습니다..
ITCSS가 BEM을 확장 한 이유와 CSS 클래스의 이름을 지정하는 방법에 대해 자세히 알아 보려면이 소개 BEMIT 기사를 읽는 것이 좋습니다..
ITCSS는 다음과 같이 요약 할 수 있습니다. 조직적 방법 편지 쓰기 재사용 및 확장 가능한 CSS. BEM은 선호되는 명명 구문이며 BEMIT 이것을 확장하여 일한다. 더 구체적이고 인식 가능한 코드를위한 네임 스페이스.
많은 것을 배울 것이고, CSS를 처음 접한다면 이것은 깨기 어려운 개념이 될 것입니다. 그러나 배우고 싶다면 ITCSS 코드의 세련된 특성에 놀랄 것입니다..
마무리
프런트 엔드 개발자는 항상 자신의 워크 플로를 최적화하려고합니다. ITCSS는 복잡한 웹 사이트를 구성하는 개선 된 방법에 기여할 수있는 또 다른 방법입니다..
어려움은 실제 프로젝트 작업에서 어떻게 작동 하는지를 배우는 것입니다. 만약 당신이 temerity, 그리고 학습을 드라이브 ITCSS 귀하의 툴킷에 추가할만한 가치가있을 수 있습니다. 공식 문서를 찾지 못했지만 ITCSS에 관해 배울 수있는 많은 온라인 자료가 여전히 있습니다..
- 새로운 CSS 아키텍처 ITCSS로 대규모 웹 프로젝트 관리 (creativebloq.com)
- ITCSS로 CSS 프로젝트 관리 - 프레젠테이션 슬라이드 (speakerdeck.com)
- ITCSS가 적용된 CSS 프로젝트 (1 시간 비디오 프레젠테이션)
- ITCSS - 대규모 프로젝트를 구성하는 흥미로운 방법 (css-tricks.com)
(speakerdeck.com을 통해 사진 표지)
