CSS の 5 つのデザイン パターンを簡単に分析し、vue プロジェクトにおける CSS ディレクトリ コードの役割について説明します。

この記事では、CSS の 5 つのデザイン パターンについて説明し、vue3 プロジェクトの CSS スタイル ディレクトリにあるコード関数を紹介します。

# 数年間働いた後、プロジェクトには次の問題がよく存在することがわかりました:

1. 不当なモジュール分割
• 2. 変数と関数の名前が不明瞭です
• #3. コメントが不足している、または不明瞭な説明が多数あります
#4. 重複したコードがいたるところにあります
• #こうした悪いプログラミング習慣のせいで、プロジェクトの維持はますます困難になり、プログラムのパフォーマンスはますます低下し、日々の作業効率が大幅に低下し、会社の開発コストが増加しました。
• 以下では、Vue3 プロジェクトの CSS アーキテクチャをエントリ ポイントとして取り上げ、CSS コードの冗長性を削減し、CSS コードの保守性と拡張性を強化することで、プログラミング機能とプロジェクト アーキテクチャ機能を向上させます。

技術留保:

Sass（https://www.sass.hk/docs/）

Vue3（https://v3.cn.vuejs .org/)

• CSS デザイン パターン
  
CSS アーキテクチャを学ぶ前に、5 つの一般的な CSS デザイン パターンを簡単に見てみましょう。これらのデザイン パターンは私たちの CSS です。アーキテクチャは特定の開発アイデアを提供します。

1.OOCSS モード

OOCSS (Object-Oriented CSS) は文字通りオブジェクト指向 CSS を意味し、開発時には次のような仕様になっています

HTML 構造への依存を軽減

# bad
# 1.匹配效率低，影响css性能
# 2.和html耦合度高，维护性和扩展性低
.container-list ul li a {}

<div class="container-list">
  <ul>
    <li>
      <a>...</a>
    </li>
  </ul>
</div>


# good
.container-list .list-item {}

<div class="container-list">
  <ul>
    <li>
      <a class="list-item">...</a>
    </li>
  </ul>
</div>

• スタイルの再利用性を向上

.label {
  # 公共代码
}
.label-danger {
  # 特定代码
}
.label-info {
  # 特定代码
}
<div>
  <p class="label label-danger"></p>
  <p class="label label-info"></p>
</div>

• 2.BEM モード

BEM は、Web サイトを 3 つのレイヤーに分割する階層化システムである OOCSS の高度なバージョンです。これら 3 つのレイヤーは、BEM の 3 つの英語の単語の略語に対応します: block、element、Modifier は、block Layer、Element に分割されますレイヤーとモディファイアーレイヤー。 BEM をコードに組み込むには、次の 3 つの原則に従う必要があります。

ブロック名と要素名を区切るには、__ 2 つのアンダースコアを使用します。

使用 - -要素名とその修飾子は 2 つのダッシュで区切られています。

• すべてのスタイルはクラスであり、ネストすることはできません。

• <div class="menu">
    <div class="menu__tab menu__tab--style1">tab1</div>
    <div class="menu__tab menu__tab--style1">tab2</div>
  </div>

ただし、アンダースコア __ とダッシュ 2 つがあるため、実際の開発ではそれほどスムーズではなく、開発効率に影響しますが、CSS の命名規則を厳密に管理する必要がある場合、これは間違いなく問題になります。問題だ。良い選択だ。また、CSS を記述するときは、Sass の混合命令を通じて BEM.scss ファイルをカプセル化して、クラス名の入力を減らし、CSS 構造を強化できます

#3. SMACSS モード

BEM のシンプルな 3 層分類方法は、中小規模の Web サイトを扱うのには問題ありませんが、複雑な Web サイトのスタイルを扱うのはさらに困難になる可能性があります。より良い方法を見つける必要があります。

SMACSS (Scalable and Modular Architecture for CSS) は、モジュール式で構造化された拡張可能な CSS の記述に関するものです。プロジェクト内の CSS を 5 つのカテゴリに分割します。

Base: デフォルトの属性スタイルのリセット。よく知られているライブラリは Normalize.css

Layout: レイアウト スタイル

Modules : 一部のリスト表示などの再利用可能なモジュール スタイル
• State: 灰色または強調表示されたボタンなどの状態スタイル
• Theme: スキンの変更のある一部の Web サイトなどのスキン スタイル Function
• 4.ITCSS モード
  

ITCSS (逆三角形カスケード スタイル シート) は、

「逆三角形 CSS」、と翻訳できます。これは、レイヤー化の概念に基づいて、プロジェクト内のスタイルを 7 つのレイヤーに分割します。

Settings: テーマの色、フォントなどのプロジェクト スタイル変数。 Tools: ツール クラススタイル (使用されている単語が多すぎる場合に省略記号の存在を示す関数の定義など)

汎用: スタイル、ボックス サイズ定義などをリセットおよび/または標準化します。normalize.css
• # に対応します。 ##ベース: リセット ブラウザー要素属性のデフォルト値を設定します
• オブジェクト: OOCSS スタイルを維持します
• コンポーネント: パブリック コンポーネント スタイル
• トランプ: スタイルの重みを最大にします。ユーティリティ クラスと補助クラスは、三角形内の以前のコンテンツを上書きできます。これだけが重要です。place
• 5.ACSS mode
• 
  
ACSS (Atomic) CSS) は、

「Atomic CSS」

と翻訳されます。 は、小規模で単一目的のクラスを優先する CSS アーキテクチャ メソッドであり、視覚効果にちなんで名付けられました。ロジックを重視せず、パフォーマンスを重視したWYSIWYG言語です 登場の背景には、フロントエンドのコンポーネント化時代の到来があります 各コンポーネントのCSSは互いに独立しており、相互に影響を与えることはありません。したがって、このようなコードが表示されます。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>

現在市場に出ているより成熟した ACSS ライブラリには、

Tailwind CSS および Windi CSS

が含まれます。 ACSS の

• CSS文件停止增长：使用传统方法，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS，一套样式全局通用。
• 不再浪费精力命名，不再添加愚蠢的类名：例如 sidebar-inner-wrapper 只是为了能够设置样式，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。
• 灵活，易读：CSS 是全球性的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此可以 插拔式改变样式 而不必担心其他问题，CSS 样式很多缩写更加符合大脑的记忆。
• 永远不用担心命名冲突，永远不用担心样式覆盖。

ACSS的缺点

• 会增加HTML 的体积
• 破坏了CSS命名的语义化
• 熟悉命名 ACSS 命名会有一定成本

综上，我们可以看出ACSS 劣处是非常小的，而好处有非常大，没有理由在项目中不适用。下面我们通过使用BEM、ITCSS和ACSS模式打造一套CSS架构方案。

项目搭建

创建vue3项目和安装依赖

• 1.创建vue3项目
• 2.安装：npm i sass@1.26.5 sass-loader@8.0.2 --save
  

CSS目录结构展示与说明

src
  style
    acss         # 存放boder、margin、padding等基于acss模式的代码
    base         # 存放元素(input、p、h1等)的重置样式
    settings     # 存放项目统一规范的文本颜色、边框颜色等变量
    theme        # 存放项目特定主题下的元素样式
    tools        # 存放封装好的mixin(混合指令)和function(函数)样式
    global.scss  # 需要项目全局引用的CSS
    index.scss   # 需要Vue文件引用的CSS

1.关于mixin(混合指令)和function(函数)的区别

• 函数是有计算逻辑，返回计算的结果，不输出css块
• mixin主要是根据计算结果输出css块

/* mixin */
@mixin center-translate($direction: both) {
  position: absolute;
  @if $direction == both {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  } @else if $direction == horizontal {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  } @else if $direction == vertical {
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
}

/* function */
@function am($module, $trait: false) {
  @if $trait==false {
    @return '[am-' + $module + ']';
  } @else {
    @return '[am-' + $module + '~="' + $trait + '"]';
  }
}

2.关于style/global.scss和style/index.scss

• global.scss中导入的代码不仅在Vue文件中使用，而且在style中scss定义文件里也会被引用到

# style/global.scss
@import "./settings/var.scss";

# style/settings/var.scss
$background-color-primary: #F1F1F1;
$background-color-secondary: $color-white;

# style/acss/color.scss
@each $style in (primary $background-color-primary, secondary $background-color-secondary) {
  [bg-#{nth($style, 1)}] {
    background-color: #{nth($style, 2)};
  }
}

• 全局引入style/global.scss

// 根目录下：vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // @/ 是 src/ 的别名
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        prependData: `@import "@/style/global.scss";`
      },
    }
  }
}

• style/index.scss定义的代码只是不被style中其他css文件引用到而已，其他的都和global.scss一致
• 引入style/index.scss

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './style/index.scss'

createApp(App).use(router).mount('#app')

下面简单分析和演示下各个style目录中的代码作用。

1.acss

该目录主要是定义一些简单的border、color、font-size、margin和padding等代码

/* style/acss/border.scss */
@for $i from 1 through 100 {
  [radius#{$i}] { 
    border-radius: #{$i}Px;
    overflow: hidden;
  }
}
[circle] {
  border-radius: 50%;
}

/* style/acss/font-size.scss */
@for $i from 12 through 30 {
  [fz#{$i}] { 
    font-size: #{$i}px;
  }
}

使用acss代码

<div class="container">
  <div class="item" radius20>border-radius: 20px;</div>
</div>
<div class="container">
  <div class="item" circle>border-radius: 50%;</div>
</div>
<div class="container">
  <div class="item" fz30>font-size: 30px;</div>
</div>

2.base

该目录主要是重置项目中一些元素的默认样式，比如input、hn、p、a等元素

/* style/base/form.scss */
input {
  padding: 0;
  outline: none;
  border: none;
}

/* style/base/link.scss */
a {
  color: #ccc;
  text-decoration: none;
}

3.settings

该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量

/* style/settings/var.scss */
/* 主题色调 */
$color-primary: #FF5777;
$color-white: #FFFFFF;

/* 文本色调 */
$color-text-primary: green;
$color-text-secondary: #FF4533;
$color-text-tertiary: $color-white;
$color-text-quaternary: $color-primary;

/* 盒子边框色调 */
$border-color-base: #E5E5E5;

/* 盒子背景色色调 */
$background-color-primary: #F1F1F1;
$background-color-secondary: $color-white;
$background-color-tertiary: $color-primary;


/* 盒子默认边框 */
$border-width-base: 1Px !default;
$border-style-base: solid !default;
$border-base: $border-width-base $border-style-base $border-color-base !default;

4.theme

该目录定义项目各个主题下相关模块的样式

/* style/theme/default.scss */
[data-theme='default'] .header {
  background: #FF5777;
}
[data-theme='default'] .footer {
  color: #FF5777;
  border: 2px solid #FF5777;;
}

/* style/theme/cool.scss */
[data-theme='cool'] .header {
  background: #409EFF;
}
[data-theme='cool'] .footer {
  color: #409EFF;
  border: 2px solid #409EFF;;
}

我们通过添加html元素上的data-theme属性和值，即可达到项目主题的变换

<!-- Theme.vue -->
<template>
  <div class="theme">
    <div class="header"></div>
    <div class="theme__set">
      <div class="set set--default" @click="changeTheme(&#39;default&#39;)"></div>
      <div class="set set--cool" @click="changeTheme(&#39;cool&#39;)"></div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "Theme",
  setup() {
    const changeTheme = (theme = &#39;default&#39;) => {
      window.document.documentElement.setAttribute("data-theme", theme);
    }
    return {
      changeTheme
    }
  }
}
</script>


<!-- Other.vue -->
<template>
  <div class="about">
    <div class="header"></div>
    <div class="about-title">This is an about page title</div>
    <div class="about-content">This is an about page content</div>
    <div class="footer"></div>
  </div>
</template>

5.tools

该目录是定义一些全局的公共mixin和function，目前这块内容比较完善就是SassMagic，感兴趣的可以点进来看一下。下面简单看一下BEM模式的应用

$elementSeparator: '__';
$modifierSeparator: '--';

// 判断`$selector`中是否包含BEM中Modify
@function containsModifier($selector) {
  $selector: selectorToString($selector);
  @if str-index($selector, $modifierSeparator) {
    @return true;
  } @else {
    @return false;
  }
}

// 将`$selector`转换成String
@function selectorToString($selector) {
  $selector: inspect($selector); //cast to string
  $selector: str-slice($selector, 2, -2); //remove brackets
  @return $selector;
}

// @param  {String}  $selector
@function getBlock($selector) {
  $selector: selectorToString($selector);
  $modifierStart: str-index($selector, $modifierSeparator) - 1;
  @return str-slice($selector, 0, $modifierStart);
}

@mixin b($block) {
  .#{$block} {
    @content;
  }
}

@mixin e($element) {
  $selector: &;
  @if containsModifier($selector) {
    $block: getBlock($selector);
    @at-root {
      #{$selector} {
        #{$block + $elementSeparator + $element} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$selector + $elementSeparator + $element} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  @at-root {
    #{&}#{$modifierSeparator + $modifier} {
      @content;
    }
  }
}

// @param {string} $block - BEM中的Block
// <div class="block">
//   <div class="block__header">
//     <div class="block__header--css"></div>
//   </div>
// </div>

//  @include b(block) {
//    background: red;
//    @include e(header){
//       font-size: 14px;
//       @include m(css) {
//         font-size: 18px;
//      }
//   };
// }

// 编译后
// .block {
//   background: red;
// }
// .block__header {
//   font-size: 14px;
// }
// .block__header--css {
//   font-size: 18px;
// }

尾声

暂时先讲这么多，更多内容可以关注下这个仓库vue3-css-architecture，会持续更新完善，补充更多的mixin、function，以及在项目中的应用。

（学习视频分享：css视频教程）

以上がCSS の 5 つのデザイン パターンを簡単に分析し、vue プロジェクトにおける CSS ディレクトリ コードの役割について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。