CSS 모듈성이란 무엇입니까? CSS 모듈성을 구현하는 방법

이 기사의 내용은 CSS 모듈성이란 무엇입니까? CSS 모듈화 구현 방법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

CSS Modularity

CSS(Cascading Style Sheets)는 처음부터 프로그래밍이 불가능하다고 규정되어 있으며, HTML 요소를 수정하기 위한 간단한 CSS 스타일 시트로만 사용할 수 있습니다. .

그러나 프론트엔드 개발과 함께 프론트엔드 프로젝트는 점점 더 크고 복잡해졌고, 커뮤니티에서는 프론트엔드 코드(js/css/html)와 리소스(이미지, 글꼴, . ..).

이 과정에서 커뮤니티는 js(amd, commonjs, es6)의 모듈성을 탐구했습니다. 이제 js를 사용하여 대규모 프로젝트를 개발하는 것은 쉽지만 CSS의 모듈성은 아직 특별히 인기가 없었습니다.

1. 그룹화된 모듈화

이것은 CSS 모듈화의 가장 초기 구현이자 가장 중요한 방법이기도 합니다. 현재 많은 구성 요소와 개발자가 이러한 방식으로 개발됩니다.

그룹화된 모듈화는 모듈화의 목적을 달성하기 위해 스타일 그룹화 및 파일 청크를 달성하기 위해 다양한 의미를 나타내는 다양한 접두사와 함께 이름 지정을 사용하는 것입니다.

예:

# 目录结构
|-- one/page/css/ 某个页面的 css 目录
    |-- common.css 通用的 css
    |-- page1/ 单页面1
        |-- section1.css 区域1 css
        |-- section2.css 区域2 css
    |-- page2/ 单页面2
    |-- ...
    
# common.css 文件
.c-el-1 {
    ...
}
.c-el-2 {
    ...
}    
...    
    
# page1/section1.css 文件
.page1-section1 {
    ...
}
.page1-section1 .el-1 {
    ...
}    
.page1-section1 .el-2 {
    ...
}    
...

# page1/section2.css 文件
.page1-section2 {
    ...
}
.page1-section2 .el-1 {
    ...
}    
.page1-section2 .el-2 {
    ...
}    
...

이 방법은 전역 충돌을 피할 수 없기 때문에 진정한 의미에서 모듈화되지 않지만 기본 CSS는 저는 프로그래밍 능력이 없어서 이런 문제는 피할 수 없습니다. 그룹화는 진정한 의미에서 모듈식은 아니지만 CSS에서 벗어나지는 않습니다. 이는 기본 메커니즘이므로 CSS 파일을 내보낼 때 많은 타사 구성 요소가 이 방법을 사용합니다.

예를 들어 ant- 접두사는 ant-design이 내보낸 CSS에 사용되고, mui- 접두사는 mui가 내보낸 CSS에 사용됩니다.

1.1 모범 사례

Css 명명 그룹화는 CSS가 탄생할 때부터 오랫동안 실천되어 왔기 때문에 NetEase의 CSS 사양 프레임워크 NEC 및 H-ui와 같이 커뮤니티가 매우 성숙해졌습니다.

보충 사항:

CSS 파일은 너무 커서는 안 됩니다. @import를 사용하여 파일을 블록으로 나눌 수 있습니다.

스타일 렌더링에 #id [attr]를 사용하지 말고 .class를 사용해 보세요. js 라이브러리를 사용하여 dom을 운영할 경우 .class를 사용하지 말고 $('#main'), $('[data-tab="1"]')과 같은 #id 데이터 세트를 사용해보세요.

<ul>
    <li data-tab="1">tab1</li>
    <li data-tab="2">tab2</li>
</ul>
<p data-tab-container="1"></p>
<p data-tab-container="2"></p>

1.2 CSS 언어 확장

CSS는 프로그래밍 언어가 아니기 때문에 변수, 함수 선언, 판단, 루프 및 계산을 할 수 없으며 중첩될 수 없기 때문에 글쓰기 스타일이 비효율적이고 지루합니다.

이 문제를 해결하기 위해 커뮤니티에서는 주로 탐색 중에 less와 sass라는 두 가지 확장 언어를 파생했습니다. 이들은 CSS와 호환되며 주로 다음 기능을 가져옵니다.

선언할 수 있습니다. 변수 및 함수를 사용하여 간단한 계산, 판단 및 루프를 수행할 수 있습니다.

선택기를 중첩하여 작성 내용을 저장하고 가독성을 높일 수 있습니다.

.page1-section1 {
    ...
    
    .el-1 {
        ...
        
        .el-1-1 {
            ...
        }
    }
        
    .el-2 {
        ...
    }   
}

@import는 반복되는 가져오기 문제를 방지하므로 안심하고 다른 제품을 가져올 수 있습니다. 그리고 대담한 문서.

모듈 관점에서 less와 sass는 CSS의 기능만 확장할 뿐, 전역 명명 충돌 문제가 여전히 존재하기 때문에 언어 수준에서 모듈화를 구현하지 않습니다.

2. 모듈화(js 객체로 내보내기)

CSS를 진정한 의미에서 모듈화 기능을 가지게 하려면, 당분간 언어 수준에서는 고려할 수 없으므로 관점에서만 실현 가능합니다. 도구의.

현재 더 좋은 방법은 js를 사용하여 CSS 파일을 로드하고, CSS 콘텐츠를 객체로 내보내고, js를 사용하여 전체 DOM 트리를 렌더링하고 해당 스타일을 해당 요소에 일치시키는 것입니다. 모듈화를 달성하기 위해 CSS에서 추가 처리를 수행할 수 있는 기회입니다.

예:

소스 파일

# style.css 文件
.className {
  color: green;
}

# js 文件
import styles from "./style.css";

element.innerHTML = '<p class="&#39; + styles.className + &#39;">Hello!</p>';

actual effect

# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
  color: green;
}

# DOM
<p class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</p>

이 변환 프로세스에서는 파일의 위치와 콘텐츠를 기반으로 전역적으로 고유한 base64 문자열이 생성되어 원본을 대체합니다. 이름은 전역 명명 충돌 문제를 방지하여 모듈화 목적을 달성합니다. 따라서 개발 과정에서 글로벌 스타일 충돌 문제가 발생하지 않습니다.

# common.css 文件
.container {
    ...
}
.el1 {
    ...
}
.el2 {
    ...
}    
...    
    
# page1/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}    
...

# page2/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}
...

CSS 모듈성에 대한 정의는 css-modules를 참조하세요. CSS 작성을 위한 주요 요구 사항은 다음과 같습니다.

1 #id [attr] 대신 .class를 사용해야 합니다(.class만 속성으로 내보낼 수 있기 때문). ;

2.class-name 대신 .className으로 작성하는 것이 좋습니다(전자는 styles.className을 통해 액세스할 수 있고 후자는 styles['class-name']를 통해 액세스해야 함). ).

더 많은 기능을 보려면 CSS 모듈을 확인하세요.

물론 이 기능을 사용하려면 빌드 도구의 지원이 필요합니다. webpack을 사용하여 프로젝트를 빌드하는 경우 css-loader를 사용하고 options.modules를 true로 설정하여 모듈식 기능을 사용할 수 있습니다.

3. 모듈화(내장 js, 바인딩 컴포넌트)

프론트엔드 컴포넌트화의 발전과 함께 React, Vue 등 컴포넌트화 프레임워크의 업데이트가 서서히 발전하여 전체 컴포넌트의 리소스를 캡슐화하고 객체를 외부 세계에 노출하면 호출자는 구성 요소의 내부 구현과 리소스에 대해 신경 쓸 필요가 없습니다. 객체를 직접 호출하는 것만으로도 충분합니다.

比如（以 react 为例），一个 Welcome 组件，包括一个 js 文件、一个 css 文件、图片：

# Welcome 组件
|-- welcome.js
|-- welcome.css
|-- images/

在 welcome.js 中便可如下加载（使用“导出为 js 对象”的 css 模块化）：

import styles from './welcome.css';
import image1 from './images/1.jpg';

其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。

这样做的目的，一是 css 的模块化，二是直接绑定到组件上。

比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的这种方式。

这种方式的实现有很多种，这里主要介绍一下 styled-jsx。

3.1 styled-jsx

styled-jsx 的原理是根据当前文件的位置、内容生成一个全局唯一的标识，然后把这个标识追加到组件每一个元素上，每一个样式选择器上，达到模块化的目的。

可以参考官方文档，查看详细的用法，我在这里给个例子：

3.1.1 安装工具（babel 转码所需）

npm install --save styled-jsx

3.1.2 配置 babel plugins（如 .babelrc）

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

3.1.3 添加源文件代码

hello.js

export default () => (
    <div className={&#39;container&#39;}>
        <p className={&#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;}>Hi!</div>
        <style jsx>{`
          .container {
            color: blue;
          }
          p:first-child {
            color: red;
          }
          .hello {
            color: yellow;
          }
          #hi {
            color: green;
          }
        `}</style>
    </div>
)

3.1.4 转码

babel path/to/hello.js -d target/dir

转码后的文件

import _JSXStyle from 'styled-jsx/style';
export default () => (
    <div className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;container&#39;}>
        <p className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;} className={"jsx-234963469"}>Hi!</div>
        <_JSXStyle styleId={"234963469"} css={".container.jsx-234963469{color:blue;}p.jsx-234963469:first-child{color:red;}.hello.jsx-234963469{color:yellow;}#hi.jsx-234963469{color:green;}"} />
    </div>
);

3.1.5 运行

实际渲染效果

<style type="text/css" data-styled-jsx="">
.container.jsx-234963469{
  color:blue;
}
p.jsx-234963469:first-child{
  color:red;
}
.hello.jsx-234963469{
  color:yellow;
}
#hi.jsx-234963469{
  color:green;
}
</style>
<div class="jsx-234963469 container">
  <p class="jsx-234963469 hello">Hello! Hello!</p>
  <div id="hi" class="jsx-234963469">Hi!</div>
</div>

以上就是本篇文章的全部内容了，更多css相关内容请关注php中文网的css教程栏目。

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