vue項目中CSS目錄代碼的作用是什么

這篇文章主要講解了“vue項目中CSS目錄代碼的作用是什么”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue項目中CSS目錄代碼的作用是什么”吧！

工作了幾年，發(fā)現(xiàn)在項目中經(jīng)常存在如下問題：

• 1.模塊拆分不合理

• 2.變量和函數(shù)命名不知所云

• 3.缺少注釋或者是寫了一堆描述不清的內(nèi)容

• 4.重復(fù)的代碼遍布各個角落等

因為這些不良的編程習慣，導(dǎo)致了項目越來越難以維護，程序性能越來越低，大大降低了日常的工作效率以及提高了公司的開發(fā)成本。

下面就以CSS在Vue3項目中的架構(gòu)為切入點，通過減少CSS代碼的冗余度和增強CSS代碼的維護性、擴展性來提高我們的編程能力和項目架構(gòu)能力。

技術(shù)儲備：

• Sass

• Vue3
  

CSS的設(shè)計模式

在學習CSS架構(gòu)之前，我們先簡單看一下常見的5種CSS設(shè)計模式，這些設(shè)計模式都為我們的CSS架構(gòu)提供了一定的開發(fā)思路。

1.OOCSS模式

OOCSS(Object-Oriented CSS)字面意思是面向?qū)ο蟮腃SS，在開發(fā)中它有如下的規(guī)范約定

• 減少對 HTML 結(jié)構(gòu)的依賴

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

• 增加樣式的復(fù)用性

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

2.BEM模式

BEM 是進階版的OOCSS，是一個分層系統(tǒng)，它把我們的網(wǎng)站分為三層，這三層正好對應(yīng)著 BEM 三個英文單詞的簡寫 block, element, modifier，分為為 塊層、元素層、修飾符層。

把 BEM 體現(xiàn)到代碼上，我們需要遵循三個原則：

• 使用__兩個下劃線將塊名稱與元素名稱分開

• 使用--兩個破折號分隔元素名稱及其修飾符

• 一切樣式都是一個類，不能嵌套。

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

但是，由于兩個下劃線__和兩個破折號--在實際開發(fā)中不是那么的順手，影響開發(fā)效率，不過要嚴格控制CSS命名規(guī)范的話，這無疑是一個好的選擇。并且在寫CSS的時候我們可以通過Sass的混合指令封裝一個BEM.scss文件來減少類名的輸入以及增強CSS結(jié)構(gòu)

3.SMACSS模式

BEM 簡單的三層分法，在應(yīng)對小中型網(wǎng)站沒有問題，但是去應(yīng)對復(fù)雜網(wǎng)站的樣式可能就比較困難了，我們需要尋求一個更好的辦法。

SMACSS(Scalable and Modular Architecture for CSS)是要編寫模塊化、結(jié)構(gòu)化和可擴展的 CSS。它對項目中的CSS分為五大類

• Base: 默認屬性樣式重置，知名庫為normalize.css

• Layout：布局樣式

• Modules：可復(fù)用模塊的樣式，比如一些列表展示

• State：狀態(tài)樣式，比如按鈕的置灰或高亮的展示

• Theme：皮膚樣式，比如有些網(wǎng)站具有換膚的功能
  

4.ITCSS模式

ITCSS(Inverted Triangle Cascading Style Sheets)可以翻譯為"倒三角CSS"，它基于分層的概念把我們項目中的樣式分為七層

• Settings: 項目樣式變量，如主題色、字體等

• Tools：工具類樣式，比如定義一個函數(shù)，表示字數(shù)過多出現(xiàn)省略號等

• Generic：重置和/或標準化樣式、框大小定義等，對應(yīng)的是normalize.css

• Base：重置瀏覽器元素屬性默認值

• Objects：維護OOCSS的樣式

• Components：公共組件樣式

• Trumps：讓樣式權(quán)重變得最高，實用程序和輔助類，能夠覆蓋三角形中前面的任何內(nèi)容，唯一 important! 的地方
  

5.ACSS模式

ACSS(Atomic CSS)翻譯為"原子化CSS"，是一種 CSS 的架構(gòu)方式，它傾向于小巧且用途單一的 class，并且會以視覺效果進行命名。是一個不強調(diào)邏輯，而更側(cè)重表現(xiàn)的一門所見即所得的語言，它出現(xiàn)的背景是——前端組件化時代的到來，各個組件的CSS可以做到互相獨立，互不影響。因此就有這樣的代碼出現(xiàn)

<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的優(yōu)點

• CSS文件停止增長：使用傳統(tǒng)方法，每次添加新功能時，您的 CSS 文件都會變大。使用實用程序，一切都是可重用的，因此您很少需要編寫新的 CSS，一套樣式全局通用。

• 不再浪費精力命名，不再添加愚蠢的類名：例如 sidebar-inner-wrapper 只是為了能夠設(shè)置樣式，也不再為真正只是一個 flex 容器的東西的完美抽象名稱而苦惱。

• 靈活，易讀：CSS 是全球性的，當你做出改變時，你永遠不知道你破壞了什么。HTML 中的類是本地的，因此可以 插拔式改變樣式 而不必擔心其他問題，CSS 樣式很多縮寫更加符合大腦的記憶。

• 永遠不用擔心命名沖突，永遠不用擔心樣式覆蓋。

ACSS的缺點

• 會增加HTML 的體積

• 破壞了CSS命名的語義化

• 熟悉命名 ACSS 命名會有一定成本

綜上，我們可以看出ACSS 劣處是非常小的，而好處有非常大，沒有理由在項目中不適用。下面我們通過使用BEM、ITCSS和ACSS模式打造一套CSS架構(gòu)方案。

項目搭建

創(chuàng)建vue3項目和安裝依賴

• 1.創(chuàng)建vue3項目

• 2.安裝：npm i sass@1.26.5 sass-loader@8.0.2 --save
  

CSS目錄結(jié)構(gòu)展示與說明

src
  style
    acss         # 存放boder、margin、padding等基于acss模式的代碼
    base         # 存放元素(input、p、h2等)的重置樣式
    settings     # 存放項目統(tǒng)一規(guī)范的文本顏色、邊框顏色等變量
    theme        # 存放項目特定主題下的元素樣式
    tools        # 存放封裝好的mixin(混合指令)和function(函數(shù))樣式
    global.scss  # 需要項目全局引用的CSS
    index.scss   # 需要Vue文件引用的CSS

1.關(guān)于mixin(混合指令)和function(函數(shù))的區(qū)別

• 函數(shù)是有計算邏輯，返回計算的結(jié)果，不輸出css塊

• mixin主要是根據(jù)計算結(jié)果輸出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.關(guān)于style/global.scss和style/index.scss

• global.scss中導(dǎo)入的代碼不僅在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

該目錄是定義全局的、項目統(tǒng)一規(guī)范的文本顏色、邊框顏色等變量

/* style/settings/var.scss */
/* 主題色調(diào) */
$color-primary: #FF5777;
$color-white: #FFFFFF;

/* 文本色調(diào) */
$color-text-primary: green;
$color-text-secondary: #FF4533;
$color-text-tertiary: $color-white;
$color-text-quaternary: $color-primary;

/* 盒子邊框色調(diào) */
$border-color-base: #E5E5E5;

/* 盒子背景色色調(diào) */
$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

該目錄定義項目各個主題下相關(guān)模塊的樣式

/* 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('default')"></div>
      <div class="set set--cool" @click="changeTheme('cool')"></div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "Theme",
  setup() {
    const changeTheme = (theme = 'default') => {
      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，目前這塊內(nèi)容比較完善就是SassMagic，感興趣的可以點進來看一下。下面簡單看一下BEM模式的應(yīng)用

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

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

// 將`$selector`轉(zhuǎn)換成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;
// }

感謝各位的閱讀，以上就是“vue項目中CSS目錄代碼的作用是什么”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對vue項目中CSS目錄代碼的作用是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！