Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것

Svelte의 인기가 높아지는 (24,000 개 이상의 Github 스타)는 잘 보증되었습니다. Rich Harris (롤업 뒤에도)가 만든이 제품은 가장 간단한 JavaScript 프레임 워크입니다. 성능, 내장 상태 관리 및 클린 마크 업이 매력적이지만 CSS 처리는 저에게 눈에 띄는 기능입니다.

단일 파일 구성 요소 : 단순성의 우아함

React의 문서는 유명한 상태에서 "React는 스타일이 어떻게 정의되는지에 대한 의견이 없습니다"라고 말합니다. Svelte는 다른 접근 방식을 취합니다. "구성 요소에 스타일을 추가 할 수있는 내장 방법이없는 UI 프레임 워크는 완성되지 않습니다."라고 Harris는 말합니다.

Svelte를 사용하면 구성 요소 내에 직접 CS를 작성하여 표준 프로젝트 워크 플로우를 반영 할 수 있습니다. CSS-in-JS 솔루션은 옵션으로 남아 있지만 Svelte의 접근 방식은 VUE 사용자에게 친숙한 개념 인 단일 .svelte 파일의 JavaScript, Markup 및 Styling을 결합하여 개발을 간소화합니다.

 // button.svelte
버튼 {
  국경-라디우스 : 0;
  배경색 : 아쿠아;
}
<slot></slot>

스코프 스타일 : 충돌없는 스타일

Svelte의 기본 스코프 스타일링은 구성 요소 간의 스타일 충돌을 방지합니다. CSS 모듈 또는 CSS-in-JS와 유사하게 컴파일하는 동안 고유 클래스 이름을 생성합니다. 이를 통해 복잡한 클래스 이름 관리없이 간단한 선택기 (예 : div 및 button )를 사용할 수 있습니다. 구성 요소 내의 여러 버튼에는 여전히 차별화를 위해 클래스가 필요하며 이러한 클래스도 범위를 띠게됩니다.

생성 된 클래스 이름 (예 : svelte-433xyz )은 DevTools에서 비밀스러운 것처럼 보일 수 있지만,이 접근법은 BEM 명명 규칙보다 훨씬 간단합니다. Svelte의 스코프 스타일을 글로벌 스타일, 유틸리티 클래스 또는 CSS 프레임 워크를위한 외부 스타일 시트와 결합 할 수 있습니다.

글로벌 스타일 : 제어 유지

글로벌 스타일은 링크 된 스타일 시트 또는 필요한 경우 :global 사용하여 Svelte 구성 요소 내에서 정의 할 수 있습니다. 이를 통해 필요할 때 스코핑을 대상으로 삼는 것을 허용합니다. 예를 들어, 모달 구성 요소는 다음을 사용할 수 있습니다.

 : Global (.Noscroll) {
  오버플로 : 숨겨진;
}

사용하지 않는 스타일 감지 : 효율성 향상

Svelte의 컴파일러는 미사용 스타일을 표시하여 중복 코드를 식별하고 제거하여 효율성을 높입니다.

간결한 조건부 클래스 : 간소화 된 구문

Svelte는 조건부 클래스 응용 프로그램을 단순화합니다. JavaScript 변수 및 클래스 이름이 일치하면 구문은 매우 간결합니다.

 내보내기는 빅 = 거짓을 보자;
내보내기 고스트 = 거짓;

.BIG {font-size : 20px; 디스플레이 : 블록; 너비 : 100%; }
.Ghost {배경색 : 투명; 테두리 : 고체 전류 검색기 2px; }

<slot></slot>

ghost 과 big 클래스는 해당 소품에 따라 적용됩니다. 이름이 일치하지 않더라도 단일 소품을 통해 여러 클래스를 효율적으로 전달할 수 있습니다.

 class_name = '';
내보내기 {class_name as class};
<slot></slot>

이와 같이 사용 :

 <button class="my-class another-class">나를 클릭하십시오</button>

Bem에서 Svelte까지 : 단순성 혁명

Bem 스타일 카드 구성 요소 비교 :

 .c-card {Border-Radius : 3px; 국경 : 솔리드 2px; }
.c-card__title {text-transform : 대문자; }
.c-card__text {색상 : 회색; }
.c-card--양성 {Border-Color : Gold; }

그것의 부드러운 동등한 것 :

 Div {Border-Radius : 3px; 국경 : 솔리드 2px; }
H2 {텍스트 변환 : 대문자; }
p {색상 : 회색; }
. 양식 {Border-Color : Gold; }
<div class:featured="">
  <h2 id="제목">{제목}</h2>
  <p><slot></slot></p>
</div>

Svelte 버전은 훨씬 간결하고 읽을 수 있습니다.

전처리 자 호환성 : 옵션 확장

Svelte에서는 덜 중요하지만, 전처리는 svelte-preprocess 를 통해 지원됩니다. 이를 통해 Sass, Less, Stylus 및 Postcs를 사용할 수 있습니다. SASS의 경우 svelte-preprocess 및 node-sass 를 설치하고 rollup.config.js 구성하고 스타일 태그에서 type="text/scss" 또는 lang="scss" 사용하십시오.

 $ 핑크 : RGB (200, 0, 220);
p {색상 : 검은 색; Span {색상 : $ 핑크; }}

동적 값 및 CSS 변수 : 강력한 조합

Svelte는 CSS에서 JavaScript 변수를 직접 사용할 수 없지만 CSS 변수는 해결 방법을 제공합니다.

 내보내기 cols = 4;
ul {
  디스플레이 : 그리드;
  너비 : 100%;
  그리드-컬럼 갭 : 16px;
  그리드 행 갭 : 16px;
  그리드-템플릿-컬럼 : 반복 (var (-열), 1fr);
}
<slot></slot>

결론적으로 Svelte는 내가 사용한 다른 접근법 (Sass, Shadow Dom, CSS-In-JS, BEM, Atomic CSS 및 PostCSS)을 능가하는 놀랍도록 직관적이고 사용자 친화적 인 스타일링 API를 제공합니다. 더 깊은 다이빙은 Rich Harris의 "CSS를 작성하는 선"을 참조하십시오.

위 내용은 Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!