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

这篇文章主要讲解了“vue项目中CSS目录代码的作用是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目中CSS目录代码的作用是什么”吧！工作了几年，发现在项目中经常存在如下问题：1.模块拆分不合理2.变量和函数命名不知所云3.缺少注释或者是写了一堆描述不清的内容4.重复的代码遍布各个角落等因为这些不良的编程习惯，导致了项目越来越难免费云主机、域名以维护，程序性能越来越低，大大降低了日常的工作效率以及提高了公司的开发成本。下面就以CSS在Vue3项目中的架构为切入点，通过减少CSS代码的冗余度和增强CSS代码的维护性、扩展性来提高我们的编程能力和项目架构能力。技术储备：SassVue3
在学习CSS架构之前，我们先简单看一下常见的5种CSS设计模式，这些设计模式都为我们的CSS架构提供了一定的开发思路。
OOCSS(Object-Oriented CSS)字面意思是面向对象的CSS，在开发中它有如下的规范约定减少对 HTML 结构的依赖增加样式的复用性BEM 是进阶版的OOCSS，是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 block, element, modifier，分为为 块层、元素层、修饰符层。把 BEM 体现到代码上，我们需要遵循三个原则：使用__两个下划线将块名称与元素名称分开使用–两个破折号分隔元素名称及其修饰符一切样式都是一个类，不能嵌套。但是，由于两个下划线__和两个破折号–在实际开发中不是那么的顺手，影响开发效率，不过要严格控制CSS命名规范的话，这无疑是一个好的选择。并且在写CSS的时候我们可以通过Sass的混合指令封装一个BEM.scss文件来减少类名的输入以及增强CSS结构
BEM 简单的三层分法，在应对小中型网站没有问题，但是去应对复杂网站的样式可能就比较困难了，我们需要寻求一个更好的办法。SMACSS(Scalable and Modular Architecture for CSS)是要编写模块化、结构化和可扩展的 CSS。它对项目中的CSS分为五大类Base: 默认属性样式重置，知名库为normalize.cssLayout：布局样式Modules：可复用模块的样式，比如一些列表展示State：状态样式，比如按钮的置灰或高亮的展示Theme：皮肤样式，比如有些网站具有换肤的功能
ITCSS(Inverted Triangle Cascading Style Sheets)可以翻译为"倒三角CSS"，它基于分层的概念把我们项目中的样式分为七层Settings: 项目样式变量，如主题色、字体等Tools：工具类样式，比如定义一个函数，表示字数过多出现省略号等Generic：重置和/或标准化样式、框大小定义等，对应的是normalize.cssBase：重置浏览器元素属性默认值Objects：维护OOCSS的样式Components：公共组件样式Trumps：让样式权重变得最高，实用程序和辅助类，能够覆盖三角形中前面的任何内容，唯一 important! 的地方
ACSS(Atomic CSS)翻译为"原子化CSS"，是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。是一个不强调逻辑，而更侧重表现的一门所见即所得的语言，它出现的背景是——前端组件化时代的到来，各个组件的CSS可以做到互相独立，互不影响。因此就有这样的代码出现目前市场上比较成熟的ACSS库有：Tailwind CSS和Windi CSSACSS的优点CSS文件停止增长：使用传统方法，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS，一套样式全局通用。不再浪费精力命名，不再添加愚蠢的类名：例如 sidebar-inner-wrapper 只是为了能够设置样式，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。灵活，易读：CSS 是全球性的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此可以 插拔式改变样式 而不必担心其他问题，CSS 样式很多缩写更加符合大脑的记忆。永远不用担心命名冲突，永远不用担心样式覆盖。ACSS的缺点会增加HTML 的体积破坏了CSS命名的语义化熟悉命名 ACSS 命名会有一定成本综上，我们可以看出ACSS 劣处是非常小的，而好处有非常大，没有理由在项目中不适用。下面我们通过使用BEM、ITCSS和ACSS模式打造一套CSS架构方案。
1.创建vue3项目2.安装：npm i sass@1.26.5 sass-loader@8.0.2 --save
1.关于mixin(混合指令)和function(函数)的区别函数是有计算逻辑，返回计算的结果，不输出css块mixin主要是根据计算结果输出css块2.关于style/global.scss和style/index.scssglobal.scss中导入的代码不仅在Vue文件中使用，而且在style中scss定义文件里也会被引用到全局引入style/global.scssstyle/index.scss定义的代码只是不被style中其他css文件引用到而已，其他的都和global.scss一致引入style/index.scss下面简单分析和演示下各个style目录中的代码作用。
该目录主要是定义一些简单的border、color、font-size、margin和padding等代码使用acss代码该目录主要是重置项目中一些元素的默认样式，比如input、hn、p、a等元素该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量该目录定义项目各个主题下相关模块的样式我们通过添加html元素上的data-theme属性和值，即可达到项目主题的变换该目录是定义一些全局的公共mixin和function，目前这块内容比较完善就是SassMagic，感兴趣的可以点进来看一下。下面简单看一下BEM模式的应用感谢各位的阅读，以上就是“vue项目中CSS目录代码的作用是什么”的内容了，经过本文的学习后，相信大家对vue项目中CSS目录代码的作用是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: DIV CSS宽度计算的方法

这篇文章主要介绍“DIV CSS宽度计算的方法”，在日常操作中，相信很多人在DIV CSS宽度计算的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”DIV CSS宽度计算的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！…