Analysez brièvement les 5 modèles de conception en CSS et parlez du rôle du code de répertoire CSS dans le projet vue

Cet article parlera des 5 modèles de conception en CSS et présentera les fonctions de code dans le répertoire de style CSS du projet vue3. J'espère qu'il sera utile à tout le monde !

Après avoir travaillé pendant plusieurs années, j'ai constaté que les problèmes suivants existent souvent dans les projets :

• 1. Division déraisonnable des modules
• 2. La dénomination des variables et des fonctions n'est pas claire
• 3. écrit Un tas de contenu peu clairement décrit
• 4. Des codes en double sont répandus dans tous les coins, etc.

En raison de ces mauvaises habitudes de programmation, le projet devient de plus en plus difficile à maintenir et les performances du programme deviennent de plus en plus faibles, ce qui réduit considérablement l'efficacité du travail quotidien et améliore les coûts de développement de l'entreprise.

Ce qui suit prendra l'architecture CSS du projet Vue3 comme point d'entrée pour améliorer nos capacités de programmation et nos capacités d'architecture de projet en réduisant la redondance du code CSS et en améliorant la maintenabilité et l'évolutivité du code CSS.

Réserves techniques :

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

Modèles de conception CSS

Avant Pour en savoir plus sur l'architecture CSS, examinons brièvement les cinq modèles de conception CSS courants. Ces modèles de conception fournissent certaines idées de développement pour notre architecture CSS.

1.OOCSS mode

OOCSS (Object-Oriented CSS) signifie littéralement CSS orienté objet. Il a les conventions de spécification suivantes en développement

• Réduire la dépendance à la structure 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>

• Augmenter la réutilisabilité du style
.

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

2. Mode BEM

BEM est une version avancée d'OOCSS, un système en couches qui divise notre site Web en trois couches, qui correspondent aux trois BEM. Les abréviations des mots anglais block, element et modificateur sont divisées en calque de bloc, calque d’élément et calque de modificateur.

Pour intégrer BEM dans le code, nous devons suivre trois principes :

• Utilisez __ deux traits de soulignement pour séparer les noms de blocs des noms d'éléments
• Utilisez -- deux tirets pour séparer les noms d'éléments et leurs modificateurs
• Tout Les styles sont tous un classe et ne peut pas être imbriqué.

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

Cependant, en raison des deux traits de soulignement __ et des deux tirets, ce n'est pas si fluide dans le développement réel et affecte l'efficacité du développement. Cependant, si vous souhaitez contrôler strictement la convention de dénomination CSS, c'est sans aucun doute un bon choix. Et lors de l'écriture de CSS, nous pouvons encapsuler un fichier BEM.scss via les instructions mixtes de Sass pour réduire la saisie des noms de classe et améliorer la structure CSS

3 Mode SMACSS

Méthode de division simple en trois couches de BEM, en réponse. Il n'y a aucun problème pour les sites Web de petite et moyenne taille, mais il peut être difficile de gérer les styles de sites Web complexes. Nous devons trouver une meilleure solution.

SMACSS (Scalable and Modular Architecture for CSS) consiste à écrire du CSS modulaire, structuré et extensible. Il divise le CSS du projet en cinq catégories

• Base : réinitialisation du style d'attribut par défaut, la bibliothèque bien connue est normalize.css
• Layout : style de mise en page
• Modules : styles de modules réutilisables, tels que certains affichages de liste
• État : style d'état, tel que l'affichage des boutons gris ou en surbrillance
• Thème : style de peau, par exemple, certains sites Web ont la fonction de changement de peau
  

4.Mode ITCSS

ITCSS (feuilles de style en cascade à triangle inversé ) Il peut être traduit par "Inverted Triangle CSS", qui divise les styles de notre projet en sept couches basées sur le concept de superposition"倒三角CSS"，它基于分层的概念把我们项目中的样式分为七层

• Settings: 项目样式变量，如主题色、字体等
• Tools：工具类样式，比如定义一个函数，表示字数过多出现省略号等
• Generic：重置和/或标准化样式、框大小定义等，对应的是normalize.css
• Base：重置浏览器元素属性默认值
• Objects：维护OOCSS的样式
• Components：公共组件样式
• Trumps：让样式权重变得最高，实用程序和辅助类，能够覆盖三角形中前面的任何内容，唯一 important! 的地方
  

5.ACSS模式

ACSS(Atomic CSS)翻译为"原子化CSS"

Paramètres : variables de style du projet, telles que les couleurs du thème, les polices , etc.Outils : Style d'outil, comme définir une fonction, indiquant que trop de mots apparaissent avec des points de suspension, etc. Générique : Réinitialiser et/ou normaliser les styles, les définitions de taille de boîte, etc., correspondant à normalize.css

Base : réinitialiser les attributs des éléments du navigateur Valeur par défaut Objets : conserver les styles OOCSS

🎜Composants : styles de composants publics 🎜🎜Atouts : donner au style le poids le plus élevé, les classes utilitaires et auxiliaires, capables de couvrir tout ce qui se trouve devant le triangle, le seul endroit important ! 🎜🎜 🎜

🎜5.Le mode ACSS🎜🎜🎜ACSS (Atomic CSS) se traduit par "Atomic CSS", qui est une méthode d'architecture CSS Préférez les petites classes à usage unique qui portent le nom d'effets visuels. Il s'agit d'un langage WYSIWYG qui ne met pas l'accent sur la logique mais se concentre davantage sur les performances. Le contexte de son émergence est l'arrivée de l'ère de la composantisation frontale. Les CSS de chaque composant peuvent être indépendants les uns des autres et ne s'influencent pas les uns les autres. . Par conséquent, un tel code apparaît🎜

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

🎜Les bibliothèques ACSS les plus matures actuellement sur le marché sont : 🎜Tailwind CSS🎜 et 🎜Windi CSS🎜🎜🎜🎜Avantages d'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视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!