ITCSS 이해: GhostCMS 블로그에서 ITCSS를 사용하는 실제 사례
나는 자신의 블로그를 위해 디자인한 주제에 ITCSS 구조를 응용했다https://carloscaballero.io이 항목은 GitHub에서 사용할 수 있으므로 자유롭게 사용할 수 있습니다.
만약 잘 쓰지 못하면 CSS는 고통스러운 일이다. 불행하게도 대부분의 경우 CSS의 조직이 정확하지 않다.CSS를 사용하는 주요 문제는 다음과 같습니다.
따라서 솔루션은 ITCSS에서 제공하는 CSS를 특정 순서로 작성하는 것입니다.
ITCSS(역삼각형 CS)
ITCSS는 특히 Harry Roberts에 적합한 대형 프로젝트의 체계 구조이다.라이브러리도 아니고 디자인 프레임(Bootstrap, Angular Material)도 아닌 스타일시트 요소를 구성하는 방법입니다.이 아키텍처는 사전 프로세서(SASS, 터치 펜 또는 그 이하)에 의존하지 않지만 이 아키텍처를 사용하면 더욱 큰 이점을 얻을 수 있습니다.
간단하게 말하면 ITCSS는 계층 내에서 CSS 파일을 구성하는 방법으로 통용에서 현식, 저급에서 고급까지 다양하다.
다음 그림에서는 역삼각형을 볼 수 있습니다.
삼각형의 계층은 다음과 같습니다.
진정한 예--이 블로그!
새로운 기술이나 구조를 이해하는 가장 좋은 방법은 예를 드는 것이다.그래서 제가 이 구조를 어떻게 사용해서 이 블로그의 주제를 디자인했는지 보여드리겠습니다.
이 블로그는 강력한 GhostCMS 도구를 사용하여 개발된 것으로 CSS 사용handlebars과 결합하여 자신의 템플릿을 만들 수 있습니다.그러나 원가 테마의 CSS를 만들기 위해 저는 ITCSS 구조SASS를 사용하여 코드를 CSS의 최종 스타일시트로 변환하여 본 테마의 시각적 효과를 제공하기로 결정했습니다.
따라서 우리가 먼저 보아야 할 것은 이 항목의 디렉터리 구조이다. 아래 그림과 같다.
이 구조에서는 다음 부분을 살펴볼 수 있습니다.
설정
설정된 컨텐트입니다.scss 파일은 다음과 같습니다.
이 파일의 역할은 사용할 글꼴과 전체 테마에서 사용할 팔레트를 정의하는 것입니다.이 파일에서, 우리는 앞으로 우리가 사용자 정의할 수 있는 모든 변수를 정의했다.
도구의 내용.scss 파일은 다음과 같습니다.
이 계층에서는 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를 어떻게 사용해서 이 블로그의 주제를 만들었는지 보여 드렸습니다. 이렇게 하면 블로그에서 이 블로그를 사용하고 싶은 모든 사람이 이 블로그를 사용할 수 있습니다.
점점 많아지는데..
Reference
이 문제에 관하여(ITCSS 이해: GhostCMS 블로그에서 ITCSS를 사용하는 실제 사례), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)