이 글은 CSS의 5가지 디자인 패턴에 대해 이야기하고, vue3 프로젝트의 CSS 스타일 디렉토리에 있는 코드 기능을 소개합니다. 모두에게 도움이 되기를 바랍니다!
몇 년 동안 일하면서 프로젝트에 다음과 같은 문제가 자주 존재한다는 것을 알았습니다.
다음은 Vue3 프로젝트의 CSS 아키텍처를 시작점으로 삼아 CSS 코드의 중복성을 줄이고 CSS 코드의 유지 관리성과 확장성을 향상하여 프로그래밍 기능과 프로젝트 아키텍처 기능을 향상시킵니다.
기술 보유량:
Sass (https://www.sass.hk/docs/)
# 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>.label {
# 公共代码
}
.label-danger {
# 特定代码
}
.label-info {
# 特定代码
}
<div>
<p class="label label-danger"></p>
<p class="label label-info"></p>
</div>BEM을 코드로 구현하려면 다음 세 가지 원칙을 따라야 합니다.
요소 이름과 블록 이름을 구분하려면 __ 두 개의 밑줄을 사용하세요.<div class="menu"> <div class="menu__tab menu__tab--style1">tab1</div> <div class="menu__tab menu__tab--style1">tab2</div> </div>
SMACSS(Scalable and Modular Architecture for CSS)는 구조화되고 확장 가능한 모듈식 CSS 작성에 관한 것입니다. 프로젝트의 CSS를 다섯 가지 범주로 나눕니다
기본: 기본 속성 스타일 재설정, 잘 알려진 라이브러리는 Normalize.css입니다"역삼각형 CSS"로 번역하면 우리 프로젝트의 스타일을 레이어링 개념을 기반으로 7개의 레이어로 나눕니다"倒三角CSS"，它基于分层的概念把我们项目中的样式分为七层
ACSS(Atomic CSS)翻译为"原子化CSS"설정: 테마 색상, 글꼴 등 프로젝트 스타일 변수 , etc.
Tools: 도구 스타일(예: 함수 정의, 너무 많은 단어가 생략 부호로 표시됨을 나타냄) 일반: Normalize.css에 해당하는 스타일, 상자 크기 정의 등을 재설정 및/또는 표준화합니다. Base: 브라우저 요소 속성 재설정 기본값
Objects: OOCSS 스타일 유지 Components: 공용 구성 요소 스타일
🎜Trumps: 스타일 가중치를 가장 높게 만들고 유틸리티 및 보조 클래스를 만들어 삼각형 앞의 모든 것을 덮을 수 있습니다. 유일하게 중요한 곳 🎜🎜 🎜"Atomic CSS"로 번역됩니다. CSS 아키텍처 방법은 시각 효과의 이름을 따서 명명된 작은 단일 목적 클래스를 선호합니다. 논리를 강조하지 않고 성능에 더 중점을 둔 WYSIWYG 언어입니다. 각 구성 요소의 CSS는 서로 독립적일 수 있으며 서로 영향을 미치지 않는 프런트 엔드 구성 요소화 시대의 도래를 배경으로 합니다. . 따라서 이러한 코드가 나타납니다🎜<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>
ACSS的缺点
综上，我们可以看出ACSS 劣处是非常小的，而好处有非常大，没有理由在项目中不适用。下面我们通过使用BEM、ITCSS和ACSS模式打造一套CSS架构方案。
npm i sass@1.26.5 sass-loader@8.0.2 --savesrc
style
acss # 存放boder、margin、padding等基于acss模式的代码
base # 存放元素(input、p、h1等)的重置样式
settings # 存放项目统一规范的文本颜色、边框颜色等变量
theme # 存放项目特定主题下的元素样式
tools # 存放封装好的mixin(混合指令)和function(函数)样式
global.scss # 需要项目全局引用的CSS
index.scss # 需要Vue文件引用的CSS1.关于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目录中的代码作用。
该目录主要是定义一些简单的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>
该目录主要是重置项目中一些元素的默认样式，比如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;
}该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量
/* 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;
该目录定义项目各个主题下相关模块的样式
/* 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>该目录是定义一些全局的公共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视频教程）
위 내용은 CSS의 5가지 디자인 패턴을 간략하게 분석하고 vue 프로젝트에서 CSS 디렉토리 코드의 역할에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
