웹 프로젝트에서 CSS 계단식 레이어 사용

CSS의 전체 이름은 Cascading Style Sheets입니다. 중요한 개념은 나중에 선언된 스타일이 이전 스타일을 덮어쓰게 된다는 것입니다. 이 기능을 사용하면 새로운 콘텐츠를 개발할 때 기존 스타일을 계승하면서 미세 조정을 할 수 있어 매우 편리합니다.

프런트 엔드 개발 엔지니어링, 특히 Vue.js와 같은 프레임워크의 광범위한 사용으로 인해 프로젝트에서 점점 더 조각난 스타일 파일을 관리해야 합니다. 이러한 스타일 파일이 서로 관련되어 있으면 HTML 문서에 표시되는 순서가 기대에 부응하도록 하기 위해 더 많은 노력을 기울여야 하는 경우가 많습니다.

다행히 이제 CSS 캐스케이딩 레이어가 생겼습니다.

캐스케이딩 레이어를 사용하면 CSS 코드를 매우 편리하게 분류할 수 있으므로 레이어의 스타일이 HTML 문서 순서에 따라 나타나는지 신경 쓰지 않고 항상 논리적으로 원하는 방식으로 정렬됩니다.

CSS Cascading Layers가 Baseline 2022로 확정되어 안심하고 사용할 수 있습니다.

이상적인 엔지니어링 실습

Atomic Design 은 현대 웹 개발에서 일반적으로 사용되는 디자인 패턴입니다. 이 디자인을 따르면 스타일 레이어를 다음 5개 레이어로 나눌 수 있습니다.

1. 원자
2. 분자
3. 유기체
4. 템플릿
5. 페이지

실제 프로젝트에서는 기본 레이어를 추가하여 다양한 브라우저에서 초기 스타일을 표준화(재부팅/정규화)하는 등 이를 늘리거나 줄여야 할 수 있으므로 최종 프로젝트의 스타일 레이어는 다음과 같을 수 있습니다.

/* 规范基础样式、定义CSS自定义属性等 */
@layer base { /* ... */ }

/* 我们可以借助子层来排序这些可重用组件的样式 */
@layer components.atoms { /* ... */ }
@layer components.molecules { /* ... */ }
@layer components.organisms { /* ... */ }

/* 模板可以被归类到布局中 */
@layer layouts { /* ... */ }
@layer pages { /* ... */ }

HTML 문서 시작 부분에서 레이어가 이 순서로 정의되어 있는지 확인하는 한, 가져오는 순서에 대해 걱정할 필요 없이 후속 개발 시 레이어에 스타일 코드를 직접 배치할 수 있습니다.

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在定义层时，可以用简写 -->
  <style>@layer base, components.atoms, components.molecules, components.organisms, layouts, pages;</style>
  <!-- 实际的样式代码从这里之后导入 -->
  <style>/* ... */</style>
  <link rel="stylesheet" href="...">

TailwindCSS와 함께 사용됩니다.

현재 TailwindCSS와 결합된 대부분의 구성 요소 라이브러리는 JS 제어 도구 클래스를 통해 구성 요소의 스타일을 조정합니다. 이 기사에서는 이 방법에 대해 논의하지 않습니다. TailwindCSS는 계단식 레이어의 도움으로 모든 구성 요소 라이브러리와 결합할 수 있으므로 tailwind를 사용하여 구성 요소 라이브러리의 스타일을 미세 조정할 수 있습니다.

TailWindCSS에는 이미 레이어 개념이 있습니다. 버전 4 이전 버전에서는 실제 계단식 레이어가 아닌 시뮬레이션된 레이어가 계속 사용됩니다. TailwindCSS 스타일이 프로젝트의 적절한 위치에 나타나도록 하려면 가져오기를 다시 작성해야 합니다. 파일:

/*
 * "base"这个层名会被TailwindCSS当作它的逻辑层处理，
 * 此处我们使用"tailwind-base"代替
 */
@layer tailwind-base {
  @tailwind base;
}

/*
 * "utilities"和"variants"同理，
 * 但我们无需定义两个层来包裹它们，因为它们始终应该定义在我们的样式之后
 */
@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
}

그런 다음 캐스케이드 레이어의 정의를 조정해 보겠습니다.

/*
 * 注意！我在此处删除了前文中的base层，
 * tailwind的base已经包含了样式的规范化内容，
 * 我们的工程通常不需要再次格式化
 */
@layer
  tailwind-base,
  components.atoms,
  components.molecules,
  components.organisms,
  layouts,
  pages,
  tailwind-utilities;

구성 요소 라이브러리와 함께 사용

컴포넌트 라이브러리는 프런트엔드 프로젝트의 필수 부분입니다. 위 내용을 토대로 컴포넌트의 스타일이 "기본" 레이어(또는 "tailwind-base" 레이어)와 중간에 있어야 한다고 쉽게 생각할 수 있습니다. "레이아웃" 레이어, 즉 "컴포넌트" 레이어에 있습니다. 구성 요소의 위치는 실제 상황에 따라 결정해야 하며 하위 계층의 특성을 사용하여 정렬할 수 있습니다.

그러나 대부분의 구성 요소 라이브러리는 계단식 레이어를 사용하지 않습니다. 구성 요소 라이브러리의 스타일을 직접 가져오면 해당 스타일이 계단식 레이어 규칙에 따라 가장 높은 우선순위를 갖게 됩니다. 이들 스타일은 순풍이나 다른 수단을 사용하여 재정의할 수 없습니다.

이 문제를 해결하기 위해 구성을 통해 가져온 스타일에 계단식 레이어를 추가할 수 있는 postcss 플러그인을 개발했습니다.

다음으로 Vite 프로젝트를 예로 들어 프로젝트에서 요소 플러스 컴포넌트 라이브러리를 사용하는 방법을 간략하게 설명합니다.

여기에서는 프로젝트 초기화 및 TailwindCSS 및 Element Plus 설치 내용을 생략합니다. Element Plus 도입을 위해 자동 가져오기를 사용하는지 여부에 관계없이 이 문서의 단계를 따르면 됩니다.

먼저 @web-baseline/postcss-wrap-up-layer를 설치하고 원하는 패키지 관리자를 선택할 수 있습니다.

yarn add -D @web-baseline/postcss-wrap-up-layer

그런 다음 vite.config.ts 파일에서 이 플러그인을 사용하세요.

/* 这里省略了其他无关的配置内容 */

import WrapUpLayer from '@web-baseline/postcss-wrap-up-layer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        WrapUpLayer({
          rules: [
            {
              /* 此处使用了正则进行匹配 */
              includes: /^node_modules\/element-plus\//,
              layerName: 'components.element-plus',
            },
          ],
        }),
      ],
    },
  },
})

이 플러그인은 일치하는 모든 파일에 계단식 설정 레이어를 추가합니다. 다른 구성 요소 라이브러리를 사용하는 경우 비슷한 설정을 할 수 있습니다.

Vue SFC(Single File Component)에서 CSS 계단식 레이어를 보다 편리하게 처리합니다.

Vue의 단일 파일 구성 요소에서는 을 사용하여 스타일을 정의할 수 있으며, 다음과 같이 스타일을 계단식 레이어로 직접 래핑할 수 있습니다.

<template>
  <h2 class="title">Title</h2>
</template>

<style scoped>
@layer components.atoms {
  .title {
    font-size: 3rem;
  }
}
</style>

이건 불편하고 예쁘지도 않아요. 일반적으로 우리는 스타일이 어느 레이어에 있는지 주의를 기울이지 않으며 항상 존재하는 들여쓰기를 보고 싶지 않습니다. 따라서 저는 속성 형태로 계단식 레이어를 사용할 수 있는 vite 플러그인도 개발했습니다(예:

@web-baseline/vite-plugin-vue-style-layer 설치:

yarn add -D @web-baseline/vite-plugin-vue-style-layer

vite.config.ts 파일에서 이 플러그인을 사용하세요:

/* 这里省略了其他无关的配置内容 */

import Vue from '@vitejs/plugin-vue';
import VueStyleLayer from '@web-baseline/vite-plugin-vue-style-layer';

export default defineConfig({
  plugins: [
    Vue(),
    VueStyleLayer(),
  ],
})

이런 방식으로 위 구성 요소를 다음과 같이 다시 작성할 수 있습니다.

<template>
  <h2 class="title">Title</h2>
</template>

<style scoped layer="components.atoms">
.title {
  font-size: 3rem;
}
</style>

我认为，这或许可以成为Vue SFC官方支持的功能，甚至是新的Web特性，将layer作为

这个Vite插件目前已经满足了使用的需要，但我知道它还有些许不足之处，我正在考虑将其使用 unplugin 重构，以支持更多的框架，而不仅仅是Vite+Vue。

在Nuxt中使用级联层

我通常使用Nuxt进行Web开发，而以上的功能在Nuxt中配置需要分散在各处，因此我将它们合并为一个模块以集中配置。由于Nuxt并不公开HTML文档的编辑，我在模块中添加了级联层排序字段。

安装@web-baseline/nuxt-css-layer：

yarn add -D @web-baseline/nuxt-css-layer

在nuxt.config.ts文件中使用这个模块：

/* 这里省略了其他无关的配置内容 */
export default defineNuxtConfig({
  modules: [
    '@web-baseline/nuxt-css-layer',
    '@nuxtjs/tailwindcss',
    '@element-plus/nuxt',
  ],
  cssLayer: {
    rules: [
      {
        includes: /^node_modules\/element-plus\//,
        layerName: 'components.element-plus',
      },
    ],
    cssLayerOrder: [
      'tailwind-base',
      'components.element-plus',
      'components.atoms',
      'components.molecules',
      'components.organisms',
      'layouts',
      'pages',
      'tailwind-utilities',
    ],
  },
});

结语

在CSS级联层的帮助下，我们可以方便的在大型项目中管理样式文件，同时也允许我们将TailwindCSS与那些传统的组件库结合使用。

感谢您的阅读，如果您觉得我的工作对您有所帮助，欢迎为我的仓库添加Star！

• @web-baseline/postcss-wrap-up-layer
• @web-baseline/vite-plugin-vue-style-layer
• @web-baseline/nuxt-css-layer

如果您在使用的过程中发现任何问题，欢迎提出issue以及提出pr！

위 내용은 웹 프로젝트에서 CSS 계단식 레이어 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!