Analisis secara ringkas 5 corak reka bentuk dalam CSS dan bincangkan tentang peranan kod direktori CSS dalam projek vue

Artikel ini akan membincangkan 5 corak reka bentuk dalam CSS dan memperkenalkan fungsi kod dalam direktori gaya CSS dalam projek vue3. Saya harap ia akan membantu semua orang.

Selepas bekerja selama beberapa tahun, saya mendapati bahawa masalah berikut sering wujud dalam projek:

• 1 Pembahagian modul yang tidak munasabah
• 2. Penamaan pembolehubah dan fungsi tidak jelas
• 3. Terdapat kekurangan ulasan atau sekumpulan penerangan yang tidak jelas
• 4 >
Disebabkan tabiat pengaturcaraan yang buruk ini, projek menjadi semakin sukar untuk dikekalkan dan prestasi program menjadi lebih rendah dan lebih rendah, sekali gus mengurangkan kecekapan kerja harian dan meningkatkan kos pembangunan syarikat.

Yang berikut akan mengambil seni bina CSS dalam projek Vue3 sebagai titik masuk untuk meningkatkan keupayaan pengaturcaraan dan keupayaan seni bina projek kami dengan mengurangkan lebihan kod CSS dan meningkatkan kebolehselenggaraan dan kebolehskalaan kod CSS.

Rizab teknikal:

Sass (https://www.sass.hk/docs/)

• Vue3 (https://v3.cn.vuejs .org/)
• 
  
Corak reka bentuk CSS

Sebelum mempelajari seni bina CSS, mari kita lihat secara ringkas 5 corak reka bentuk CSS yang biasa ini ialah CSS Kami seni bina menyediakan idea pembangunan tertentu.

1.Mod OOCSS

OOCSS (CSS Berorientasikan Objek) secara literal bermaksud CSS berorientasikan objek Dalam pembangunan, ia mempunyai konvensyen spesifikasi berikut

Kurangkan pergantungan pada struktur 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>

Tingkatkan kebolehgunaan semula gaya

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

2. Model BEM

BEM adalah versi OOCSS yang maju, sistem berlapis yang membahagikan laman web kami ke dalam tiga lapisan ini. lapisan, lapisan elemen dan lapisan pengubah suai.

Untuk memasukkan BEM ke dalam kod, kita perlu mengikut tiga prinsip:

Gunakan __ dua garis bawah untuk memisahkan nama blok daripada nama elemen

• Gunakan - - Dua sempang memisahkan nama elemen dan pengubahnya
• Semua gaya ialah kelas dan tidak boleh disarangkan.

Walau bagaimanapun, disebabkan oleh dua garis bawah __ dan dua sempang - ia tidak begitu lancar dalam pembangunan sebenar dan menjejaskan kecekapan pembangunan Walau bagaimanapun, jika konvensyen penamaan CSS mesti dikawal dengan ketat, ini adalah sudah pasti adalah pilihan yang baik. Dan apabila menulis CSS, kami boleh merangkum fail BEM.scss melalui arahan bercampur Sass untuk mengurangkan input nama kelas dan meningkatkan struktur CSS

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

mod SMACSS

Kaedah pembahagian tiga lapisan mudah BEM tidak mempunyai masalah dalam menangani tapak web bersaiz kecil dan sederhana, tetapi mungkin lebih sukar untuk menangani gaya laman web yang kompleks. Kita perlu mencari cara yang lebih baik.

SMACSS (Seni Bina Berskala dan Modular untuk CSS) ialah tentang menulis CSS modular, berstruktur dan boleh diperluaskan. Ia membahagikan CSS dalam projek kepada lima kategori

Asas: Tetapan semula gaya atribut lalai, perpustakaan terkenal ialah normalize.css

• Reka letak: Gaya reka letak
• Modul : Gaya modul boleh guna semula, seperti beberapa paparan senarai
• Nyatakan: Gaya nyata, seperti paparan butang kelabu atau diserlahkan
• Tema: Gaya kulit, seperti beberapa tapak web dengan perubahan kulit Fungsi
• 
  

4.Mod ITCSS

ITCSS (Helaian Gaya Cascading Triangle Terbalik) boleh diterjemahkan sebagai

, yang berasaskan berlapis Konsep membahagikan gaya dalam projek kami kepada tujuh lapisan

"倒三角CSS"

Tetapan: Pembolehubah gaya projek, seperti warna tema, fon, dll.

• Alat: Gaya alat, seperti mentakrifkan fungsi untuk mewakili Terlalu banyak perkataan dan elipsis, dsb.
• Generik: Tetapkan semula dan/atau standardkan gaya, takrifan saiz kotak, dsb., sepadan dengan normalize.css
• Asas: Tetapkan semula penyemak imbas nilai lalai atribut elemen
• Objek: Kekalkan gaya OOCSS
• Komponen: Gaya komponen awam
• Trumps: Jadikan berat gaya sebagai kelas tertinggi, utiliti dan tambahan, mampu menampung apa sahaja di hadapan segi tiga Kandungan, satu-satunya tempat yang penting
• 
  

5.Mod ACSS

ACSS (Atomic CSS) diterjemahkan sebagai

, yang merupakan sejenis pendekatan Senibina CSS, ia cenderung kepada kelas kecil dan satu guna, dan akan dinamakan dengan kesan visual. Ia adalah bahasa WYSIWYG yang tidak menekankan logik tetapi lebih memfokuskan kepada prestasi Latar belakang kemunculannya ialah kedatangan era komponen bahagian hadapan (front-end componentization) boleh bebas antara satu sama lain dan tidak mempengaruhi satu sama lain . Oleh itu, kod sedemikian muncul

"原子化CSS"

Pustaka ACSS yang lebih matang pada masa ini di pasaran termasuk:

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

Tailwind CSS

dan Windi CSS

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

Atas ialah kandungan terperinci Analisis secara ringkas 5 corak reka bentuk dalam CSS dan bincangkan tentang peranan kod direktori CSS dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!