快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

vue项目中CSS目录代码的作用是什么

这篇文章主要讲解了“vue项目中CSS目录代码的作用是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目中CSS目录代码的作用是什么”吧！

站在用户的角度思考问题，与客户深入沟通，找到商河网站设计与商河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、雅安服务器托管、企业邮箱。业务覆盖商河地区。

vue项目中CSS目录代码的作用是什么

工作了几年，发现在项目中经常存在如下问题：

  • 1.模块拆分不合理

  • 2.变量和函数命名不知所云

  • 3.缺少注释或者是写了一堆描述不清的内容

  • 4.重复的代码遍布各个角落等

因为这些不良的编程习惯，导致了项目越来越难以维护，程序性能越来越低，大大降低了日常的工作效率以及提高了公司的开发成本。

下面就以CSS在Vue3项目中的架构为切入点，通过减少CSS代码的冗余度和增强CSS代码的维护性、扩展性来提高我们的编程能力和项目架构能力。

技术储备：

  • Sass

  • Vue3

CSS的设计模式

在学习CSS架构之前，我们先简单看一下常见的5种CSS设计模式，这些设计模式都为我们的CSS架构提供了一定的开发思路。

1.OOCSS模式

OOCSS(Object-Oriented CSS)字面意思是面向对象的CSS，在开发中它有如下的规范约定

  • 减少对 HTML 结构的依赖

# bad
# 1.匹配效率低，影响css性能
# 2.和html耦合度高，维护性和扩展性低
.container-list ul li a {}


  
    
    
  • 
      ...
    
    • 
  
# good .container-list .list-item {}   
        
  •       ...     
    •   
.label {
  # 公共代码
}
.label-danger {
  # 特定代码
}
.label-info {
  # 特定代码
}


  

  

2.BEM模式

BEM 是进阶版的OOCSS，是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 block, element, modifier，分为为 块层、元素层、修饰符层。

把 BEM 体现到代码上，我们需要遵循三个原则：


  tab1
  tab2

但是，由于两个下划线__和两个破折号--在实际开发中不是那么的顺手，影响开发效率，不过要严格控制CSS命名规范的话，这无疑是一个好的选择。并且在写CSS的时候我们可以通过Sass的混合指令封装一个BEM.scss文件来减少类名的输入以及增强CSS结构

3.SMACSS模式

BEM 简单的三层分法，在应对小中型网站没有问题，但是去应对复杂网站的样式可能就比较困难了，我们需要寻求一个更好的办法。

SMACSS(Scalable and Modular Architecture for CSS)是要编写模块化、结构化和可扩展的 CSS。它对项目中的CSS分为五大类

4.ITCSS模式

ITCSS(Inverted Triangle Cascading Style Sheets)可以翻译为"倒三角CSS"，它基于分层的概念把我们项目中的样式分为七层

5.ACSS模式

ACSS(Atomic CSS)翻译为"原子化CSS"，是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。是一个不强调逻辑，而更侧重表现的一门所见即所得的语言，它出现的背景是——前端组件化时代的到来，各个组件的CSS可以做到互相独立，互不影响。因此就有这样的代码出现

按钮

目前市场上比较成熟的ACSS库有：Tailwind CSS和Windi CSS

ACSS的优点

ACSS的缺点

综上，我们可以看出ACSS 劣处是非常小的，而好处有非常大，没有理由在项目中不适用。下面我们通过使用BEM、ITCSS和ACSS模式打造一套CSS架构方案。

项目搭建

创建vue3项目和安装依赖

CSS目录结构展示与说明

src
  style
    acss         # 存放boder、margin、padding等基于acss模式的代码
    base         # 存放元素(input、p、h2等)的重置样式
    settings     # 存放项目统一规范的文本颜色、边框颜色等变量
    theme        # 存放项目特定主题下的元素样式
    tools        # 存放封装好的mixin(混合指令)和function(函数)样式
    global.scss  # 需要项目全局引用的CSS
    index.scss   # 需要Vue文件引用的CSS

1.关于mixin(混合指令)和function(函数)的区别

/* 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

# 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)};
  }
}
// 根目录下：vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // @/ 是 src/ 的别名
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        prependData: `@import "@/style/global.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代码


  border-radius: 20px;


  border-radius: 50%;


  font-size: 30px;

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属性和值，即可达到项目主题的变换

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

//  @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目录代码的作用是什么”的内容了，经过本文的学习后，相信大家对vue项目中CSS目录代码的作用是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


网站名称：vue项目中CSS目录代码的作用是什么
网站URL：http://6mz.cn/article/jgogps.html

其他资讯