这篇文章跟你聊聊个大头事——前端开发中的CSS，就是那个让网页美美的东西，它在项目里真是太重要了！为了更好地管理和拓展我们的项目，咱们得搞清楚CSS里面那五花八门的设计模式。这次咱们就来仔细研究下这些模式，然后再结合实际的项目经验，来说说如何搞定那些经常遇到的维护性和性能问题。这样子不仅能提升开发速度，还可以节省不少预算！
OOCSS模式
OOCSS（Object-Oriented CSS）就是一个能把CSS写得更聪明的方法，通过制定规则，让你的CSS代码更好用、更好修。BEM（Block Element Modifier），它是OOCSS的升级版，让整个网页分成三个部分：大块头、小按钮、特效牌，这样以后查看代码就容易多了。你可以用Sass混入指令弄出一个”BEM.scss”文件，这样就能少敲很多字，CSS也变得更有条理了。
SMACSS模式
# bad
# 1.匹配效率低，影响css性能
# 2.和html耦合度高，维护性和扩展性低
.container-list ul li a {}
# good
.container-list .list-item {}
.label {
# 公共代码
}
.label-danger {
# 特定代码
}
.label-info {
# 特定代码
}
MACSS（模块化可扩展CSS架构）是个能让你搞定大型网站样式的好帮手。这家伙把CSS分成五大块，写代码也要有条理、可扩充！还有另一招叫ITCSS（倒三角样式表），把样式分切成七层，更方便管理网站样式。
ACSS模式
ACSS（原子级别的CSS）就是把CSS取了个炫酷的名字，这个名字告诉我们，这种方法很小很简单，只用于特定功能，所以不用太在意什么逻辑！既然身处前端组件化的时代，这东西还是挺有用滴。现在市面上有两个主流ACSS库，叫Tailwind CSS和Windi CSS，用它们的话，干活可就快多
Vue3项目中CSS架构
毕竟，在我们Vue3的工程里，怎么搞个好使的CSS架构可是大事儿！所以，用上BEM、ITCSS和ACSS这几招儿，然后在style文件夹里面这么分吧：
在下想知道，mixin跟function究竟有啥区别？具体可以用在哪儿？
设置点border，颜色，字体大小这些的目录就是用来编点儿简单样式代码滴，这样可以多搞几次使用。
清除默认值：把一些设置清零，让整个项目的视觉效果更整齐。
变量文件夹：存些全局的东西，比如文字的颜色，边框的色儿啊之类的。
src
style
acss # 存放boder、margin、padding等基于acss模式的代码
base # 存放元素(input、p、h1等)的重置样式
settings # 存放项目统一规范的文本颜色、边框颜色等变量
theme # 存放项目特定主题下的元素样式
tools # 存放封装好的mixin(混合指令)和function(函数)样式
global.scss # 需要项目全局引用的CSS
index.scss # 需要Vue文件引用的CSS
主题目录：给每个主题都有个单独的文件夹，设置好了对应的模版，还能用data-theme属性换肤！
/* 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 + '"]';
}
}
混搭功能所在的文件夹：放满了一些公用的混合元素和函数啥的，比如那个SassMagic就是其中之一~
# 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 3项目中的CSS代码，让开发轻松有趣，维护费用也降下来了！运用好BEM、ITCSS和ACSS模式，日常开发都会变得得心应手！
结语
// 根目录下：vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
// @/ 是 src/ 的别名
// 注意：在 sass-loader v8 中，这个选项名是 "prependData"
prependData: `@import "@/style/global.scss";`
},
}
}
}
学多点CSS模式，再搞个好使的 CSS 架构在 Vue3 里头，这样就能搞定项目搞不好的那些破事儿，比如维护困难，速度慢啊啥的。希望这篇文章能帮到你们！记得随时关注我们的仓库vue3-css-architecture，有最新更新，还有让你提升前端实力的秘籍。
// 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')
。
评论0