CSS 모듈이란 무엇입니까?

CSS 모듈은 공식 사양이나 브라우저 메커니즘이 아니지만 빌드 단계에서 CSS 클래스 이름과 선택기의 범위를 지정하는 방법입니다(네임스페이스와 유사). 빌드 도구를 사용하면 클래스 이름이나 선택기 이름의 범위를 지정할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS 모듈이란 무엇입니까

Gihub의 CSS 모듈 프로젝트에 따르면 다음과 같이 설명됩니다.

모든 클래스 이름과 애니메이션 이름은 기본적으로 자체 범위의 CSS 파일을 갖습니다.

따라서 CSS 모듈은 공식 사양도 아니고 브라우저 메커니즘도 아니지만 빌드 단계(예: Webpack 또는 Browserify 사용) 동안 CSS 클래스 이름과 선택기의 범위를 지정하는 방법입니다(네임스페이스와 유사).

CSS 모듈의 장점

전역 이름 지정 충돌 문제 해결 CSS 모듈은 구성 요소 자체의 고유한 이름 지정에만 관심이 있습니다.

모듈화는 Compose를 사용하여 자체 모듈의 스타일과 다른 모듈의 스타일을 도입할 수 있습니다

단일 클래스 이름을 사용하는 너무 깊은 중첩 수준 질문 해결

CSS 모듈을 도입하는 이유는 무엇입니까?

1) 전역 스타일 충돌

webpack이 패키징되면 모든 js 파일을 항목 App.js 파일로 가져오고 스타일도 레이아웃 규칙에 따라 항목에 균일하게 로드됩니다. CSS의 다음 스타일은 이전 스타일 선언을 덮어쓰게 되어 전역 스타일 재정의 문제가 발생합니다.

2) 중첩 수준이 너무 깊은 선택기

매우 깊은 중첩으로 인해 발생하는 문제:

- CSS 선택기의 구문 분석 규칙에 따르면 수준이 깊을수록 비교 횟수가 많아지는 것을 알 수 있습니다. . , 전체 페이지 렌더링에 영향

- 불필요한 바이트 오버헤드 추가

- 의미 혼란 및 확장성 저하, 제약 조건이 많을수록 확장성 악화

3), 변수 공유 불가

복잡한 구성 요소 js 사용 스타일을 함께 처리하는 CSS입니다.

동영상 공유 학습: css 동영상 튜토리얼

위 내용은 CSS 모듈이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!