ITCSS 이해: GhostCMS 블로그에서 ITCSS를 사용하는 실제 사례

나는 자신의 블로그를 위해 디자인한 주제에 ITCSS 구조를 응용했다https://carloscaballero.io이 항목은 GitHub에서 사용할 수 있으므로 자유롭게 사용할 수 있습니다.

만약 잘 쓰지 못하면 CSS는 고통스러운 일이다. 불행하게도 대부분의 경우 CSS의 조직이 정확하지 않다.CSS를 사용하는 주요 문제는 다음과 같습니다.

전 세계 범위.CSS의 모든 규칙은 동일한 범위에 있으므로 다른 스타일시트를 사용할 때 규칙을 무시할 수 있습니다.

캐스케이드 규칙.네가 전체적인 범위를 가지고 있을 때, 원순은 정말 중요하다.

유산.규칙은 그들 사이에서 계승될 수 있으며, 이 특성 때문에 다른 행동을 기대할 수 있습니다.

선택기 특이성.스타일시트를 만들 때 가장 큰 문제 중 하나는 선택기의 작업이 깊이가 없다는 것이다.

이런 문제는 대형 프로젝트에서 반복된다. 왜냐하면 많은 사람들이 틀이나 업무 규칙이 없는 상황에서 일하기 때문이다.불행히도 이런 상황의 결과는 스타일시트가 혼란스러워진 것이다.
따라서 솔루션은 ITCSS에서 제공하는 CSS를 특정 순서로 작성하는 것입니다.

ITCSS(역삼각형 CS)

ITCSS는 특히 Harry Roberts에 적합한 대형 프로젝트의 체계 구조이다.라이브러리도 아니고 디자인 프레임(Bootstrap, Angular Material)도 아닌 스타일시트 요소를 구성하는 방법입니다.이 아키텍처는 사전 프로세서(SASS, 터치 펜 또는 그 이하)에 의존하지 않지만 이 아키텍처를 사용하면 더욱 큰 이점을 얻을 수 있습니다.
간단하게 말하면 ITCSS는 계층 내에서 CSS 파일을 구성하는 방법으로 통용에서 현식, 저급에서 고급까지 다양하다.
다음 그림에서는 역삼각형을 볼 수 있습니다.

삼각형의 계층은 다음과 같습니다.

설정 - 사전 프로세서와 함께 사용되며 글꼴, 색상 정의 등을 포함합니다. 이 레이어에서는 일반적으로 템플릿을 사용자 정의할 수 있는 변수를 정의합니다.

도구 - 전 세계에서 사용되는 혼합과 함수.이 계층은 사전 프로세서를 SASS로 사용하는 경우에만 사용됩니다.

일반 - 스타일, 상자 크기 정의 재설정 및/또는 규범화 등. 이것은 CSS를 생성하는 삼각형의 첫 번째 층입니다.

요소 - H1, A, 머리글, 바닥글 등과 같은 원본 HTML 요소의 스타일을 설정합니다.이것들은 모두 브라우저의 기본 스타일이기 때문에, 우리는 반드시 여기서 그것들을 다시 정의해야 한다.

대상 - 클래스 기반 선택기로 수식되지 않은 디자인 모델, 예를 들어 OOCSS에서 알려진 미디어 대상, 예를 들어 목록, 라디오 단추를 정의하는 데 사용된다.다니엘 포넬(Daniel Fornell)의 코드 펜https://codepen.io/collection/DmzVOM/은 이러한 구조 설계를 사용하는 대상 목록을 보여 줍니다.

구성 요소 - 특정 UI 구성 요소.단추, 카드, 구체적인 목록 등 우리 페이지의 구성 요소

유틸리티 - 유틸리티와 조수류로 삼각형의 앞의 모든 내용을 덮어쓸 수 있습니다.

진정한 예--이 블로그!

새로운 기술이나 구조를 이해하는 가장 좋은 방법은 예를 드는 것이다.그래서 제가 이 구조를 어떻게 사용해서 이 블로그의 주제를 디자인했는지 보여드리겠습니다.
이 블로그는 강력한 GhostCMS 도구를 사용하여 개발된 것으로 CSS 사용handlebars과 결합하여 자신의 템플릿을 만들 수 있습니다.그러나 원가 테마의 CSS를 만들기 위해 저는 ITCSS 구조SASS를 사용하여 코드를 CSS의 최종 스타일시트로 변환하여 본 테마의 시각적 효과를 제공하기로 결정했습니다.
따라서 우리가 먼저 보아야 할 것은 이 항목의 디렉터리 구조이다. 아래 그림과 같다.

이 구조에서는 다음 부분을 살펴볼 수 있습니다.

partials: 블로그 페이지의 서로 다른 부분의 구조, 예를 들어 꼬리, 꼬리, 페이지, 게시물 목록, 사이드바의 손잡이 파일이 어디에 있습니까?

자산: 하위 폴더를 찾을 수 있습니다:

css: ITCSS를 사용하여 스타일시트를 구성하는 곳입니다.

글꼴:다른 글꼴.

img: 이미지.

js: 필요한 JavaScript 라이브러리(예: highlight).js.

/: 루트 디렉터리에서 색인,post, 태그, 기본값에 대응하는handlebar 파일과 패키지 같은 설정 파일을 찾을 수 있습니다.json 또는gulpfile.

다음에 우리는 묘사할 것이다.각 ITCSS 레이어의 scss 파일을 사용하여 각 레이어에 포함된 컨텐트를 볼 수 있습니다.

설정

설정된 컨텐트입니다.scss 파일은 다음과 같습니다.

이 파일의 역할은 사용할 글꼴과 전체 테마에서 사용할 팔레트를 정의하는 것입니다.이 파일에서, 우리는 앞으로 우리가 사용자 정의할 수 있는 모든 변수를 정의했다.
도구의 내용.scss 파일은 다음과 같습니다.

이 계층에서는 CSS를 생산하지 않지만 도구(기능)를 정의하여 보다 높은 수준의 반복 작업을 수행하고 있습니다.이러한 측면에서 우리는 세 가지 기능을 정의했다.

박스 사이즈.이것은 우리가 두 개의 매개 변수를 사용하여 상자의 크기를 정의할 수 있게 한다.

유연성.이 mixin은 다른 용기에 Flex 레이아웃 규칙을 설정합니다.

직함.이mixin은 여러 개의 CSS 규칙을 생성했는데, 이 규칙들은 상부에서 중복되지만, 용기를 바꾸고, 일부 규칙은 덮어씁니다.이 때문에, 우리는 모든 규칙에서 이 규칙을 반복하지 않고, 공공 코드에 입구점을 제공하기 위해 함수의 공공 규칙을 추출했다.

통용했어

일반적인 내용.scss 파일은 다음과 같습니다.

일반 파일은 하나의 규칙만 포함하기 때문에 페이지의 모든 요소의 경계와 채우기를 변경하고 기본 레이아웃을 설정할 수 있습니다.
이 섹션에는 Disqs 리뷰 서비스의 리뷰 스타일과 관련된 규칙도 포함되어 있습니다.플러그인이 정상적으로 작동하기 위해서는 용기에 식별자 (id='disqs thread ') 를 할당해야 하지만, 이것은 ITCSS 시스템 구조를 완전히 파괴할 수 있습니다.이를 위해 이 원소의 특이성을 속성 단계로 낮추는 기술을 사용했다(속성 선택기 사용).

원소.

요소의 컨텐트입니다.scss 파일은 다음과 같습니다.

이 층에서 우리는 html과 바디 요소와 관련된 양식을 설정한다.

복제약

일반적인 내용.scss 파일은 다음과 같습니다.

이 레이어에서 HTML 요소에 영향을 주는 일반 규칙은 구조화되어야 합니다.주의, 정의 클래스 없이 html 요소, 위조 요소와 위조 요소만 사용합니다.이 층에서, 우리는 SASS의 강력한 기능을 사용하여 CSS 규칙을 끼워 넣었는데, 이렇게 지루한 코드는 없었다.사실 우리가 특이성도를 보면 우리가 생성한 플러그 수준과 관련된 최고치가 나타나는 것은 정상이다.

오브젝트

대상의 내용.scss 파일은 다음과 같습니다.

/** EMPTY **/

템플릿 디자인의 이 단계에서 우리는 대상과 관련된 규칙이 없다. 규칙은 매우 낮은 단계에서 요소로 구분되고 충분한 의미 값을 얻을 때 구성 요소로 구분되기 때문이다.따라서 현재 우리는 이 부분에 어떠한 규칙도 없지만, 정의도 괜찮다. 왜냐하면 우리의 체계 구조를 끊임없이 재구성하고 개선할 때 우리는 이 층을 이용할 수 있기 때문이다.

구성 요소

구성 요소의 내용입니다.scss 파일은 다음과 같습니다.

이 층은 더욱 높은 층을 가지기 때문에 우리는 여기서 더욱 구체적인 규칙을 찾았다. 즉, 여기서 마지막 접촉에 적응했다.이 층을 보면 우리의 주제에서 의미 가치를 가진 요소를 정의하는 규칙이 많다.웹 페이지가 많은 구성 요소로 구성된 것을 감안하면, 이것이 마지막 윤색이다

공용 사업

유틸리티의 내용.scss 파일은 다음과 같습니다.

마지막으로 실용 프로그램 층은'모든 것이 다 갖추어져 있다'로 보존되었다. 우리의 예에서 우리는 여기에 애니메이션을 남겼다. 이런 애니메이션 원본은 비교적 낮은 층에 완벽하게 적용될 수 있다. 왜냐하면 그들은 통용되기 때문이다. 그러나 우리는 이를 실용 프로그램으로 옮기기를 원한다.

코드 실행 및 가져오기

마지막으로, 마운트 프로그램의 단일 파일에서 앞의 파일을 가져옵니다.파일의 내용은 다음과 같습니다.

SASS의 내용을 CSS로 변환하고 축소하기 위해 아래 npm 스크립트를 만들었습니다.

결론

이 글에서 ITCSS라는 스타일시트 구조를 보여 드리려고 합니다.이 아키텍처는 다른 방법(예: BEM 또는 OOCSS)과 완벽하게 호환됩니다.이러한 구조는 이러한 방식을 바탕으로 CSS 규칙을 조직한다. 즉, 우리는 발생할 수 있는 혼란을 제어할 수 있다. 왜냐하면 스타일시트의 범위는 전역적이기 때문이다.
마지막으로 저는 이 구조the theme is free, open source on GitHub를 어떻게 사용해서 이 블로그의 주제를 만들었는지 보여 드렸습니다. 이렇게 하면 블로그에서 이 블로그를 사용하고 싶은 모든 사람이 이 블로그를 사용할 수 있습니다.

점점 많아지는데..

Carloscaballero.io Theme: A free, open source theme for Ghost

ITCSS: Scalable and maintainable CSS Architecture .

How to Organize your Styles with ITCSS .

Manage large CSS projects with ITCSS .

CSS at trivago — Part 1: Structure and ITCSS .

Intro to ITCSS for Web Developers .

www.carloscaballero.io.