CCSS 소개 (구성 요소 CSS)

키 테이크 아웃

CCSS (구성 요소 CSS)는 대규모 웹 응용 프로그램의 저작 경험을 단순화하도록 설계된 CSS 아키텍처로 유지 관리 가능하고 관리 가능하며 확장 가능합니다. 마크 업과 스타일이 재사용 가능한 HTML 요소로 번들로 연결되는 구성 요소 기반 웹 개발을 장려합니다. CCS의 주요 원칙에는 작고 독립적이며 재사용 가능한 구성 요소를 만드는 것이 포함됩니다. 구성 요소가 모듈 식 및 분리되어 있는지 확인합니다. 포기할 수 있고 예측 가능한 CS를 작성합니다. 모든 CSS 구성 요소를 명확하게 문서화합니다 CCSS는 주로 SMACSS 및 BEM 방법론을 기반으로 특정 디렉토리 구조 및 명명 규칙을 사용합니다. 또한 CSS 컴파일 또는 HTML 유효성 검사와 같은 일반적인 작업을 자동화하기 위해 Grunt와 같은 작업 러너의 사용을 촉진합니다. CCSS는 스타일을 모듈화하여 웹 애플리케이션의 확장 성, 유지 가능성 및 성능을 향상시키고, 스타일이 응용 프로그램에서 충돌하는 스타일의 위험을 줄이고, 브라우저가 구성 요소를 렌더링하는 스타일 만 구문 분석 할 수 있도록합니다. JavaScript 프레임 워크와 호환되며 Sass, Less 또는 Stylus와 같은 CSS 프리 프로세서와 함께 사용할 수 있습니다.

CCSS 또는 구성 요소 CSS는 대형 웹 응용 프로그램에 대한 CSS 저작 경험을 단순화하는 아키텍처입니다. 대형 웹 응용 프로그램에는 일반적으로 많은 CSS 파일이 있으며 종종 많은 개발자가 해당 파일을 동시에 작업하는 경우가 많습니다. 많은 프레임 워크, 지침, 도구 및 방법론 (OOCSS, SMACSS, BEM 등)의 출현으로 개발자는 관리 가능하고 관리 가능하며 확장 가능한 CSS 아키텍처가 필요합니다.

프론트 엔드 엔지니어 인 저는 구성 요소 기반 웹 개발이 앞으로 나아갈 수 있다고 생각합니다. 웹 구성 요소는 W3C를 통해 진행되는 표준 모음입니다. 그들은 우리가

진정으로 캡슐화 된 재사용 가능한 HTML 요소로 마크 업과 스타일을 묶을 수 있도록 허용합니다. 이것이 의미하는 바는 구성 요소 기반 CSS 개발에 대해 생각해야한다는 것입니다. 브라우저 제조업체는 이러한 표준을 구현하는 동안
• Soft-Incapsulation
를 사용할 수 있습니다. CCSS가 무엇인지 정확히 살펴보고 복잡한 웹 애플리케이션을 위해 CSS 아키텍처를 설정하는 방법을 살펴 보겠습니다. ccss의 요소 아래는 CCSS 아키텍처에 대한 최상의 구성을 달성하기 위해 완전히 또는 수정 된 방법으로 사용되는 주요 요소입니다. smacss Jonathan Snook이 만든 Smacss는 CSS를위한 확장 가능하고 모듈 식 아키텍처를 나타냅니다. 그것은 엄격한 프레임 워크보다 스타일 가이드입니다. CCSS가 사용하는 구조에 대한 배경에 대한 SMACSS에 대해 읽으십시오.

• bem Yandex의 개발자가 만든 BEM은 "Block", "Element", "Modifier"를 나타냅니다. 웹 인터페이스를 개발할 때 새로운 사고 방식 인 프론트 엔드 방법론입니다. Yandex의 사람들은 BEM을 제시했으며 Harry Roberts의 훌륭한 기사에서 더 많은 정보를 찾을 수 있습니다.

  사스 Sass는 초강대국이있는 CSS입니다. 나는 그것을 강력히 추천하지만 원하는 경우 덜 사용할 수도 있습니다. 자세한 내용은 SASS 문서를 참조하십시오

  나침반 나침반에는 클래스 정의가 없습니다. 많은 유틸리티를 제공하는 Sass의 확장입니다. 일반적인 유용한 Mixins 및 Sass 컴파일에 사용됩니다. Compass Mixins는 공급 업체 접두사가 필요한 경우 거의

  항상

  를 사용해야합니다. 이것은 다시 한 번 좋은 모습이며 버번입니다. 첫 번째 모습은 훌륭한 대안입니다.

  CCSS의 원리 이제 CCSS의 주요 원칙을 살펴 보겠습니다 구성 요소 기반 재사용 가능한 소형 및 독립적 인 구성 요소를 작성하십시오. 재사용 가능한 CSS 구성 요소는 DOM 트리의 특정 부분에만 존재하지 않거나 특정 요소 유형을 사용해야하는 구성 요소입니다. 필요한 경우 추가 HTML 요소를 사용하여 구성 요소를 재사용 할 수 있어야합니다. 모듈 식 및 분리 된 구성 요소에는 UI의 특정 부분에 필요한 모든 것이 있어야하며 단일 초점이 있어야합니다. 각 구성 요소는 분리되어야하므로 다른 구성 요소에 직접 수정하거나 의존하지 않음을 의미합니다. 분리는 재사용 재사용이 종속성과 단단한 커플 링을 증가시켜 CSS를 관리하기 쉽게 만들 수 있으므로 구성 요소 간의 코드 재사용보다 더 중요합니다. composable CSS를 작성하는 데 소요되는 시간을 줄이는 방식으로 CSS를 작성할 때 스타일을 수정하거나 추가하기 위해 요소에서 HTML 클래스를 변경하는 데 더 많은 시간을 소비하는 방법으로 생각해야합니다. CSS 전쟁과 싸우는 것보다 레고 블록을 조립하는 것과 같을 때 모든 개발자가 CSS를 작성하는 것이 훨씬 쉽습니다. CSS 클래스는 스타일을 작성하는 데 사용해야하는 빌딩 블록입니다. 예측 가능

  예측 가능성은 CSS를 작성할 때 규칙이 예상대로 행동합니다. 이것은 많은 페이지가있는 대규모 응용 프로그램에 중요합니다. 지나치게 복잡한 선택기와 일반 클래스 이름을 사용하지 마십시오. 이는 예측할 수없는 CSS로 이어질 수 있습니다.

  문서화 대부분의 사람들은 CSS가 자명하다고 가정합니다. 사실, 이것은 일반적으로 그렇지 않습니다! CSS 구성 요소는 자신이 수행하는 작업과 사용 방법을 설명하는 명확한 문서가 있어야합니다. 디렉토리 구조 아래는 더 쉬운 시각화를위한 예제 디렉토리 구조입니다. CCSS Github Repo에 예제 설정도 포함되어 있습니다.

  styles
      ├── bootstrap.css
      ├── ext
      │   ├── bootstrap
      │   │   ├── _settings.scss
      │   │   └── bootstrap.scss
      │   └── font-awesome
      │       └── font-awesome.scss
      ├── font-awesome.css
      ├── images.css
      ├── main.css
      └── scss
          ├── _config.scss
          ├── base
          │   ├── _animation-classes.scss
          │   ├── _base-classes.scss
          │   ├── _base.scss
          │   └── images.scss
          ├── components
          │   ├── directives
          │   │   ├── _empty-state.scss
          │   │   ├── _legend.scss
          │   │   └── _status-message.scss
          │   ├── pages
          │   │   ├── _404.scss
          │   │   └── _redirect.scss
          │   └── standard
          │       ├── _alarm-state.scss
          │       ├── _graph-message.scss
          │       └── _panel.scss
          ├── main.scss
          ├── mixins
          │   ├── _animation.scss
          │   ├── _bem.scss
          │   └── _icon.scss
          └── themes
              └── _light.scss

  > 위에 표시된 폴더 트리의 SCSS/ 폴더의 파일을 편집/ 작성합니다. 이를 통해 Ext/ 폴더에있는 외부 라이브러리를 쉽게 업데이트 할 수 있습니다. 많은 응용 프로그램은 부트 스트랩 또는 기초와 같은 외부 CSS 프레임 워크로 시작하므로 Ext/내부의 예제 설정에 추가했습니다. 그러나 모든 CSS를 처음부터 작성하는 것은 절대적으로 괜찮습니다. 위에서 언급 한 다른 모든 것은 여전히 ​​적용됩니다.

  예제 구성 요소/ 디렉토리는 AngularJS 응용 프로그램에 적합하지만 다른 프레임 워크 또는 응용 프로그램에 대해 사용자 정의 할 수 있습니다. 자세한 내용은 아래의 "아키텍처"섹션에 있습니다 HTML 페이지에 에는 모든 컴파일 된 CSS (Grunt, Compass 등)가 포함 된 스타일/ 폴더의 모든 .CSS 파일이 포함되어 있습니다. 그들을 바꾸지 마십시오. 명명 규칙 - 단순화 된 bem

  u className-글로벌 기본/유틸리티 클래스 IMG ClassName-글로벌 이미지 클래스

  ANIMET-CLASSNAME-글로벌 애니메이션 클래스

  componentName - 표준 구성 요소 (b) ComponentName-ElementName-Component 's Emplic (e) ComponentName-ModifierName-Component 's Modifier (m)

  어퍼 카멜 케이스 구성 요소 이름 스타일에 유의하여 마스터 요소임을 나타냅니다. 이것은 그것이 구성 요소

  의
  경계임을 나타냅니다. 요소 및 수정 자 이름은 각각 ElementName 및 ModifierName입니다. 요소/요소 이름의 시작을 의미하므로 하이픈 (-)을 사용하여 구성 요소 이름을 분리하지 마십시오. 건축 및 디자인 CCSS가 장려 한 아키텍처를 고려해 봅시다
  • grunt Grunt는 많은 일반적인 집안일 (예 : CSS 컴파일 또는 HTML 검증)을 자동화 할 수있는 훌륭한 작업 러너입니다. 다른 작업 주자도 있습니다. 이상적인 워크 플로우에는 하나를 사용하여 개발중인 파일을 시청하고 변경 될 때 CSS를 다시 컴파일하는 것입니다.
  파일 조직 SMACSS에서 파생 된 디렉토리 구조를 다시 살펴보십시오. 모든 외부 프레임 워크 (부트 스트랩)가 포함 된 내선/ 디렉토리에 주목하십시오. 쉽게 업그레이드하려면이를 수정해서는 안됩니다. 대신, 재정의 및 확장자는 기본/ 디렉토리에 배치해야합니다.
  • base/는 응용 프로그램 전체에 사용되는 글로벌 기본 스타일을 유지하는 곳입니다. _base.scss는 요소 선택기 전용 기본 스타일입니다. 이것들은 일종의 "CSS 재설정"입니다. _base-classes.scss는 모든 페이지,보기 및 구성 요소에서 응용 프로그램 전체에서 사용되는 모든 유틸리티 클래스입니다. u-
  가있는 접두사 클래스 이름 images.scss는 SCSS 컴파일 소스로 사용됩니다. 모든 사이트 이미지를 데이터 URI로 정의하고 인라인해야합니다. /app/styles/images.css는이 파일에서 생성됩니다 _animate.scss는 모든 응용 프로그램 전체 애니메이션 클래스를 보유합니다 _bootstrap-Overrides.scss는 프레임 워크를 재정의합니다. 때로는 프레임 워크 선택기의 특이성 수준이 너무 높아서 그들을 재정의하려면 긴 특정 선택기가 필요합니다. SCSS 구성 요소의 맥락에서 글로벌 수준에서 우선적으로 수행해서는 안됩니다. 대신, 모든 글로벌 오버라이드는 여기로 이동합니다.

  구성 요소

  위에서 언급하지 않은 재사용 가능한 CSS 단위는 "구성 요소"로 간주됩니다. 우리는 AngularJS를 사용하여 3 가지 유형의 CSS 구성 요소로 분류했습니다 :보기/페이지, 지침 및 표준; 따라서 SMACSS에서 파생 된 디렉토리 구조 github 저장소의 예제 설정에서 명확하게 명확한 폴더를 만들었습니다. 응용 프로그램이 작 으면 한 폴더에 응용 프로그램을 넣을 수 있습니다. 모든 구성 요소는 Camelcase와 함께 수정 된 BEM 명명 규칙을 따릅니다. 이로 인해 다른 팀원들이 BEM 스타일 구문을 따르도록 격려하는 데있어

  큰 승리

  . 또한----및 __ 문자와 함께 일반적인 BEM 스타일을 사용하는 것을 멀리 할 때 많은 혼란을 피했으며, Module-name__child-name과 같은 클래스 이름을 생성합니다. 구성 요소의 CSS 클래스 정의 순서가 HTML보기를 반영하는 것도 중요합니다. 이를 통해 스캔, 스타일, 편집 및 클래스를 쉽게 적용 할 수 있습니다. 마지막으로 웹 애플리케이션을위한 광범위한 스타일 가이드를 갖고 CSS 및 SASS에 대한 지침을 따르는 것이 좋습니다 (예 : @extend를 피하십시오). CCSS 예 CSS의 예제 설정에 대해서는 코드를 참조하십시오. <example> 여기 Sass의 예제 구성 요소가 있습니다 : <p> <to> 이것은 다음 css에 컴파일합니다 : </to></p> <t> 및 귀하의 HTML은 다음과 같이 보일 수 있습니다 <p> <to> 당신은 참조 선택기를 사용하여이를 달성하고 @at-root보다 간단한 단순화 된 BEM Mixin을 참조 할 수 있습니다. Sass 3.3에서 BEM과의 작업이 훨씬 쉬워졌습니다. 이는 이해하기 쉬운 유지 관리 가능한 코드를 작성할 수 있습니다. <em> 기여 <in> 더 많은 예제를 추가하기위한 문제/PR의 형태로 Github 리포의 기여, 포스트 처리, 설명 등의 개선 등이 가장 도움이됩니다. </in></em> <to> 그리고 CCSS와 관련된 크레딧 및 유용한 리소스는 저장소에 확인하십시오. 질문이나 의견이 있으시면 아래의 의견이나 Github Repo에 게시하십시오.<questions> 구성 요소 CSS (CCSS)에 대한 질문 에 자주 묻습니다 <main> CCSS와 전통적인 CSS의 주요 차이점은 무엇입니까? <h3 id="전통적인-CSS는-HTML로-작성된-문서의-모양과-형식을-설명하는-데-사용되는-스타일-시트-언어입니다-레이아웃-색상-및-글꼴을-포함하여-프레젠테이션에서-컨텐츠를-분리-할-수-있도록-설계되었습니다-반면-CCSS-구성-요소-CSS-는-스타일이-특정-구성-요소와-직접-연결되는-스타일링에-대한-현대적인-접근-방식입니다-이는-스타일이-구성-요소에-로컬로-범위를-지정하여-애플리케이션에-걸쳐-스타일이-충돌-할-위험이-줄어-듭니다-이-접근법은-스타일을보다-관리-가능하고-모듈화하며-확장하기-쉽게-만듭니다"> 전통적인 CSS는 HTML로 작성된 문서의 모양과 형식을 설명하는 데 사용되는 스타일 시트 언어입니다. 레이아웃, 색상 및 글꼴을 포함하여 프레젠테이션에서 컨텐츠를 분리 할 수 ​​있도록 설계되었습니다. 반면, CCSS (구성 요소 CSS)는 스타일이 특정 구성 요소와 직접 연결되는 스타일링에 대한 현대적인 접근 방식입니다. 이는 스타일이 구성 요소에 로컬로 범위를 지정하여 애플리케이션에 걸쳐 스타일이 충돌 할 위험이 줄어 듭니다. 이 접근법은 스타일을보다 관리 가능하고 모듈화하며 확장하기 쉽게 만듭니다. </h3> <p> CCSS는 프로젝트의 확장 성을 어떻게 향상 시키는가? </p> CCSS는 스타일을 모듈화하여 프로젝트의 확장 성을 향상시킵니다. 전통적인 CSS에서 프로젝트가 커지면 CSS 파일도 커져 관리하기가 어렵습니다. 그러나 CCSS에서는 각 구성 요소에는 고유 한 스타일이있어 관리 및 확장이 쉽습니다. 응용 프로그램의 나머지 부분에 영향을 미치지 않고 쉽게 구성 요소를 업데이트하거나 수정할 수 있습니다. <h3 id="JavaScript-프레임-워크와-함께-CCSS를-사용할-수-있습니까"> JavaScript 프레임 워크와 함께 CCSS를 사용할 수 있습니까? </h3> <p> 예, CCSS는 JavaScript 프레임 워크와 호환됩니다. React, Angular, Vue 또는 기타 프레임 워크를 사용하든 CCSS를 사용하여 구성 요소를 스타일링 할 수 있습니다. 이로 인해 CCSS는 모든 프론트 엔드 개발자를위한 다재다능한 도구입니다. </p> CCSS는 글로벌 스타일을 어떻게 처리합니까? <h3> </h3> CCSS는 주로 개별 구성 요소 스타일링에 사용되지만 글로벌 스타일도 처리 할 수 ​​있습니다. 별도의 파일로 글로벌 스타일을 정의하고 필요에 따라 구성 요소로 가져올 수 있습니다. 이를 통해 CCSS의 모듈화로부터 여전히 혜택을받는 동안 애플리케이션 전반에 걸쳐 일관된 모양과 느낌을 유지할 수 있습니다. <p> 인라인 스타일을 통해 CCS를 사용하면 어떤 이점이 있습니까? </p> <h3 id="인라인-스타일은-쉬운-일입니다-사용하려면-몇-가지-제한-사항이-있습니다-미디어-쿼리-의사-클래스-또는-의사-요소를-사용할-수-없습니다-또한-가장-높은-특이성을-가지므로-스타일을-우선적으로-어려움으로-이끌-수-있습니다-반면에-CCSS는-미디어-쿼리-의사-클래스-및-의사-요소를-사용하는-기능을-포함하여-CSS의-전체-힘을-제공합니다-또한-인라인-스타일보다-특이성이-낮으므로-필요할-때-스타일을-더-쉽게-무시할-수-있습니다"> 인라인 스타일은 쉬운 일입니다. 사용하려면 몇 가지 제한 사항이 있습니다. 미디어 쿼리, 의사 클래스 또는 의사 요소를 사용할 수 없습니다. 또한 가장 높은 특이성을 가지므로 스타일을 우선적으로 어려움으로 이끌 수 있습니다. 반면에 CCSS는 미디어 쿼리, 의사 클래스 및 의사 요소를 사용하는 기능을 포함하여 CSS의 전체 힘을 제공합니다. 또한 인라인 스타일보다 특이성이 낮으므로 필요할 때 스타일을 더 쉽게 무시할 수 있습니다. </h3> CCSS는 웹 애플리케이션의 성능을 어떻게 향상 시키는가? <p> </p> 개별 구성 요소에 스코핑을 통해 CCSS. 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 기존 CSS에서 브라우저는 전체 CSS 파일을 구문 분석하여 페이지를 렌더링하여 렌더링 프로세스 속도를 늦출 수 있습니다. 그러나 CCSS를 사용하면 브라우저는 현재 렌더링중인 구성 요소의 스타일 만 구문 분석하면 페이지로드 시간이 더 빠릅니다. <h3 id="c-CCSS와-함께-CSS-프리-프로세서를-사용할-수-있습니까-h">.<c> CCSS와 함께 CSS 프리 프로세서를 사용할 수 있습니까? <h3> </h3> 예, SASS, LESS 또는 Stylus와 같은 CSS 프리 프로세서를 CCS와 함께 사용할 수 있습니다. 이를 통해 변수, 믹스 인 및 중첩 규칙과 같은 이러한 사전 프로세서의 힘을 활용할 수 있지만 CCSS의 모듈성 및 확장 성으로부터 여전히 혜택을받을 수 있습니다. CCSS는 CSS 특이성을 어떻게 처리합니까? <p> CCSS의 주요 장점 중 하나는 CSS 특이성과 관련된 문제를 제거한다는 것입니다. 각 구성 요소에는 고유 한 스타일이 있으므로 스타일이 서로 충돌하거나 무시하는 것에 대해 걱정할 필요가 없습니다. 이를 통해 스타일을 쉽게 관리하고 CSS 특이성과 관련된 버그의 위험을 줄일 수 있습니다. </p> 응답 디자인에 CCSS를 사용할 수 있습니까? <h3 id="예-응답-디자인에-CCSS를-사용할-수-있습니다-기존-CSS와-마찬가지로-CCSS는-미디어-쿼리를-지원하므로-장치의-화면-크기에-따라-다양한-스타일을-적용-할-수-있습니다-이것은-모든-장치에서-멋지게-보이는-반응-형-디자인을-쉽게-만들-수있게-해줍니다"> 예, 응답 디자인에 CCSS를 사용할 수 있습니다. 기존 CSS와 마찬가지로 CCSS는 미디어 쿼리를 지원하므로 장치의 화면 크기에 따라 다양한 스타일을 적용 할 수 있습니다. 이것은 모든 장치에서 멋지게 보이는 반응 형 디자인을 쉽게 만들 수있게 해줍니다. </h3> <p> CCSS는 프로젝트의 유지 관리 가능성을 어떻게 향상 시키는가? </p> CCSS는 스타일을 모듈화하여 프로젝트의 유지 관리 가능성을 향상시킵니다. 관리하기 쉽습니다. 각 구성 요소에는 고유 한 스타일이 있으므로 구성 요소를 업데이트하거나 수정 해야하는 경우 해당 구성 요소의 스타일 만 변경하면됩니다. 이렇게하면 버그가 발생할 위험이 줄어들고 코드를보다 쉽게 ​​업데이트하거나 리팩터링 할 수 있습니다.</c> </h3></main></questions></to></to></p></t></example>

위 내용은 CCSS 소개 (구성 요소 CSS)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!