Analysieren Sie kurz die 5 Entwurfsmuster in CSS und sprechen Sie über die Rolle des CSS-Verzeichniscodes im Vue-Projekt

In diesem Artikel geht es um die 5 Designmuster in CSS und um eine Einführung in die Codefunktionen im CSS-Stilverzeichnis im vue3-Projekt. Ich hoffe, dass es für alle hilfreich ist!

Nachdem ich mehrere Jahre gearbeitet habe, habe ich festgestellt, dass in Projekten häufig folgende Probleme auftreten:

• 1. Unzumutbare Modulaufteilung
• 2. Die Benennung von Variablen und Funktionen ist unklar.
• 3 geschrieben Eine Menge unklar beschriebener Inhalte
• 4. Doppelte Codes sind in jeder Ecke verbreitet usw.

Aufgrund dieser schlechten Programmiergewohnheiten wird die Wartung des Projekts immer schwieriger und die Programmleistung wird immer geringer. Dies reduziert die tägliche Arbeitseffizienz erheblich und verbessert die Entwicklungskosten des Unternehmens.

Im Folgenden wird die CSS-Architektur im Vue3-Projekt als Einstiegspunkt zur Verbesserung unserer Programmierfähigkeiten und Projektarchitekturfähigkeiten verwendet, indem die Redundanz des CSS-Codes reduziert und die Wartbarkeit und Skalierbarkeit des CSS-Codes verbessert wird.

Technische Reserven:

• Sass (https://www.sass.hk/docs/)
• Vue3 (https://v3.cn.vuejs.org/)
  

CSS-Entwurfsmuster

Vorher Nachdem wir die CSS-Architektur kennengelernt haben, werfen wir einen kurzen Blick auf die fünf gängigen CSS-Entwurfsmuster. Diese Entwurfsmuster liefern bestimmte Entwicklungsideen für unsere CSS-Architektur.

1.OOCSS-Modus

OOCSS (Object-Oriented CSS) bedeutet wörtlich objektorientiertes CSS. Es werden die folgenden Spezifikationskonventionen entwickelt: Reduzieren Sie die Abhängigkeit von der HTML-Struktur

# 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>

• 2. BEM-Modus

BEM ist eine erweiterte Version von OOCSS, einem Schichtensystem, das unsere Website in drei Schichten unterteilt, die den drei BEM-Abkürzungen entsprechen Blockebene, Elementebene und Modifikatorebene.
Um BEM in Code zu verkörpern, müssen wir drei Prinzipien befolgen:

Verwenden Sie __ zwei Unterstriche, um Blocknamen von Elementnamen zu trennen.

Verwenden Sie zwei Bindestriche, um Elementnamen und ihre Modifikatoren zu trennen.

Alles Stile sind alle a Klasse und kann nicht geschachtelt werden.

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

Aufgrund der beiden Unterstriche __ und zwei Bindestriche ist dies jedoch in der tatsächlichen Entwicklung nicht so reibungslos und beeinträchtigt die Entwicklungseffizienz. Wenn jedoch die CSS-Namenskonvention streng kontrolliert werden muss, ist dies zweifellos eine gute Wahl. Und beim Schreiben von CSS können wir eine BEM.scss-Datei durch die gemischten Anweisungen von Sass kapseln, um die Eingabe von Klassennamen zu reduzieren und die CSS-Struktur zu verbessern Für kleine und mittlere Websites gibt es kein Problem, aber es kann schwierig sein, mit den Stilen komplexer Websites umzugehen. Wir müssen einen besseren Weg finden. Bei
SMACSS (Scalable and Modular Architecture for CSS) geht es darum, modulares, strukturiertes und erweiterbares CSS zu schreiben. Es unterteilt das CSS im Projekt in fünf Kategorien. Basis: Zurücksetzen des Standardattributstils. Die bekannte Bibliothek ist normalize.css. Layout: Layoutstil. Module: Stile wiederverwendbarer Module, z. B. einige Listenanzeigen
• Status: Statusstil, z. B. graue oder hervorgehobene Schaltflächenanzeige
• Thema: Skin-Stil, z. B. haben einige Websites die Funktion, den Skin zu ändern

4.ITCSS-Modus

ITCSS (Inverted Triangle Cascading Style Sheets). ) Es kann als "Inverted Triangle CSS" übersetzt werden, das die Stile in unserem Projekt basierend auf dem Konzept der Ebenenbildung in sieben Ebenen unterteilt.

Einstellungen: Projektstilvariablen, wie z. B. Designfarben, Schriftarten usw.

Tools: Werkzeugstil, z. B. zum Definieren einer Funktion, um anzuzeigen, dass zu viele Wörter mit Ellipsen usw. angezeigt werden.

• Generisch: Stile, Boxgrößendefinitionen usw. zurücksetzen und/oder standardisieren, entsprechend normalize.css
• Basis: Browserelementattribute zurücksetzen Standardwert
• Objekte: OOCSS-Stile beibehalten
• Komponenten: Öffentliche Komponentenstile
• Trumps: Stilgewichtung auf den höchsten Wert festlegen, Dienstprogramm- und Hilfsklassen, die alles vor dem Dreieck abdecken können, der einzig wichtige! Ort
  

5.ACSS-Modus

ACSS (Atomic CSS) wird als "Atomic CSS" übersetzt eine CSS-Architekturmethode. Bevorzugen Sie kleine Einzweckklassen, die nach visuellen Effekten benannt sind. Es handelt sich um eine WYSIWYG-Sprache, die keinen Schwerpunkt auf die Logik legt, sondern sich mehr auf die Leistung konzentriert. Der Hintergrund ihrer Entstehung ist die Ankunft der Ära der Front-End-Komponentisierung. Das CSS jeder Komponente kann unabhängig voneinander sein und sich nicht gegenseitig beeinflussen . Daher erscheint ein solcher Code

• 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视频教程）

Das obige ist der detaillierte Inhalt vonAnalysieren Sie kurz die 5 Entwurfsmuster in CSS und sprechen Sie über die Rolle des CSS-Verzeichniscodes im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!