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

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!

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

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>

Nach dem Login kopieren

2. BEM-Modus

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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 &#39;[am-&#39; + $module + &#39;]&#39;;
  } @else {
    @return &#39;[am-&#39; + $module + &#39;~="&#39; + $trait + &#39;"]&#39;;
  }
}

Nach dem Login kopieren

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)};
  }
}

Nach dem Login kopieren

全局引入style/global.scss

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

Nach dem Login kopieren

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

// src/main.js
import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./style/index.scss&#39;

createApp(App).use(router).mount(&#39;#app&#39;)

Nach dem Login kopieren

下面简单分析和演示下各个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;
  }
}

Nach dem Login kopieren

使用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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;

Nach dem Login kopieren

4.theme

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

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

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

Nach dem Login kopieren

我们通过添加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>

Nach dem Login kopieren

5.tools

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

$elementSeparator: &#39;__&#39;;
$modifierSeparator: &#39;--&#39;;

// 判断`$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;
// }

Nach dem Login kopieren

尾声

暂时先讲这么多，更多内容可以关注下这个仓库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!