찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 5가지 디자인 패턴을 간략하게 분석하고 vue 프로젝트에서 CSS 디렉토리 코드의 역할에 대해 이야기해 보세요.

CSS의 5가지 디자인 패턴을 간략하게 분석하고 vue 프로젝트에서 CSS 디렉토리 코드의 역할에 대해 이야기해 보세요.

青灯夜游
青灯夜游앞으로
2022-02-08 10:30:492925검색

이 글은 CSS의 5가지 디자인 패턴에 대해 이야기하고, vue3 프로젝트의 CSS 스타일 디렉토리에 있는 코드 기능을 소개합니다. 모두에게 도움이 되기를 바랍니다!

CSS의 5가지 디자인 패턴을 간략하게 분석하고 vue 프로젝트에서 CSS 디렉토리 코드의 역할에 대해 이야기해 보세요.

몇 년 동안 일하면서 프로젝트에 다음과 같은 문제가 자주 존재한다는 것을 알았습니다.

  • 1. 불합리한 모듈 분할
  • 2. 설명이 부족하거나. 불분명하게 설명된 내용이 잔뜩
  • 4. 중복된 코드가 구석구석 퍼져있습니다.
  • 이러한 나쁜 프로그래밍 습관으로 인해 프로젝트는 점점 유지 관리가 어려워지고 프로그램 성능도 점점 저하됩니다. 이는 일상적인 작업 효율성을 크게 줄이고 회사의 개발 비용을 향상시킵니다.

다음은 Vue3 프로젝트의 CSS 아키텍처를 시작점으로 삼아 CSS 코드의 중복성을 줄이고 CSS 코드의 유지 관리성과 확장성을 향상하여 프로그래밍 기능과 프로젝트 아키텍처 기능을 향상시킵니다.

기술 보유량:

Sass (https://www.sass.hk/docs/)
  • Vue3 (https://v3.cn.vuejs.org/)

    • CSS 디자인 패턴

이전 CSS 아키텍처를 배우면서 5가지 일반적인 CSS 디자인 패턴을 간략하게 살펴보겠습니다. 이러한 디자인 패턴은 CSS 아키텍처에 대한 특정 개발 아이디어를 제공합니다.


1.OOCSS 모드

OOCSS(Object-Oriented CSS)는 문자 그대로 객체 지향 CSS를 의미합니다. 개발 시 다음과 같은 사양 규칙을 따릅니다.

HTML 구조에 대한 의존성을 줄입니다
  • # 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>
2.BEM 모드

BEM은 웹사이트를 3개의 BEM에 해당하는 3개의 레이어로 나누는 레이어 시스템인 OOCSS의 고급 버전입니다. 영어 단어의 약어인 block, element, modifier로 구분됩니다. 블록 레이어, 요소 레이어 및 수정자 레이어.

BEM을 코드로 구현하려면 다음 세 가지 원칙을 따라야 합니다.

요소 이름과 블록 이름을 구분하려면 __ 두 개의 밑줄을 사용하세요.
  • 요소 이름과 해당 수정자를 구분하려면 -- 두 개의 대시를 사용하세요.
  • 모든 스타일은 모두 클래스이며 중첩될 수 없습니다. 
  • <div class="menu">
  <div class="menu__tab menu__tab--style1">tab1</div>
  <div class="menu__tab menu__tab--style1">tab2</div>
</div>
    • 그러나 두 개의 밑줄 __과 두 개의 대시로 인해 실제 개발이 원활하지 않고 개발 효율성에 영향을 줍니다. 그러나 CSS 명명 규칙을 엄격하게 제어해야 하는 경우에는 의심할 여지 없이 좋은 선택입니다. 그리고 CSS를 작성할 때 Sass의 혼합 명령을 통해 BEM.scss 파일을 캡슐화하여 클래스 이름 입력을 줄이고 CSS 구조를 향상할 수 있습니다


3. SMACSS 모드

BEM의 간단한 3계층 분할 방법에 대한 응답입니다. 중소 규모의 웹사이트에는 문제가 없지만, 복잡한 웹사이트의 스타일에는 대처하기 어려울 수 있습니다.

SMACSS(Scalable and Modular Architecture for CSS)는 구조화되고 확장 가능한 모듈식 CSS 작성에 관한 것입니다. 프로젝트의 CSS를 다섯 가지 범주로 나눕니다

기본: 기본 속성 스타일 재설정, 잘 알려진 라이브러리는 Normalize.css입니다
  • 레이아웃: 레이아웃 스타일
  • 모듈: 일부 목록 표시와 같은 재사용 가능한 모듈 스타일
  • 상태: 회색 또는 강조 표시된 버튼 표시와 같은 상태 스타일
  • 테마: 스킨 스타일, 예를 들어 일부 웹사이트에는 스킨 변경 기능이 있습니다

4.ITCSS 모드

ITCSS(Inverted Triangle Cascading Style Sheets) ) "역삼각형 CSS"로 번역하면 우리 프로젝트의 스타일을 레이어링 개념을 기반으로 7개의 레이어로 나눕니다

"倒三角CSS"，它基于分层的概念把我们项目中的样式分为七层

  • Settings: 项目样式变量，如主题色、字体等
  • Tools：工具类样式，比如定义一个函数，表示字数过多出现省略号等
  • Generic：重置和/或标准化样式、框大小定义等，对应的是normalize.css
  • Base：重置浏览器元素属性默认值
  • Objects：维护OOCSS的样式
  • Components：公共组件样式
  • Trumps：让样式权重变得最高，实用程序和辅助类，能够覆盖三角形中前面的任何内容，唯一 important! 的地方

5.ACSS模式

ACSS(Atomic CSS)翻译为"原子化CSS"설정: 테마 색상, 글꼴 등 프로젝트 스타일 변수 , etc.

Tools: 도구 스타일(예: 함수 정의, 너무 많은 단어가 생략 부호로 표시됨을 나타냄) 일반: Normalize.css에 해당하는 스타일, 상자 크기 정의 등을 재설정 및/또는 표준화합니다. Base: 브라우저 요소 속성 재설정 기본값

Objects: OOCSS 스타일 유지 Components: 공용 구성 요소 스타일

🎜Trumps: 스타일 가중치를 가장 높게 만들고 유틸리티 및 보조 클래스를 만들어 삼각형 앞의 모든 것을 덮을 수 있습니다. 유일하게 중요한 곳 🎜🎜 🎜

🎜5.ACSS 모드🎜🎜🎜ACSS(Atomic CSS)는 "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 라이브러리는 다음과 같습니다: 🎜Tailwind CSS🎜 및 🎜Windi CSS🎜🎜🎜🎜ACSS의 장점🎜🎜
  • CSS文件停止增长：使用传统方法，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS，一套样式全局通用。
  • 不再浪费精力命名，不再添加愚蠢的类名：例如 sidebar-inner-wrapper 只是为了能够设置样式，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。
  • 灵活，易读：CSS 是全球性的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此可以 插拔式改变样式 而不必担心其他问题，CSS 样式很多缩写更加符合大脑的记忆。
  • 永远不用担心命名冲突，永远不用担心样式覆盖。

ACSS的缺点

  • 会增加HTML 的体积
  • 破坏了CSS命名的语义化
  • 熟悉命名 ACSS 命名会有一定成本

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

项目搭建

创建vue3项目和安装依赖

  • 1.创建vue3项目
  • 2.安装：npm i sass@1.26.5 sass-loader@8.0.2 --save

CSS目录结构展示与说明

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

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

  • 函数是有计算逻辑，返回计算的结果，不输出css块
  • mixin主要是根据计算结果输出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 &#39;[am-&#39; + $module + &#39;]&#39;;
  } @else {
    @return &#39;[am-&#39; + $module + &#39;~="&#39; + $trait + &#39;"]&#39;;
  }
}

2.关于style/global.scss和style/index.scss

  • global.scss中导入的代码不仅在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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./style/index.scss&#39;

createApp(App).use(router).mount(&#39;#app&#39;)

下面简单分析和演示下各个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

该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量

/* 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=&#39;default&#39;] .header {
  background: #FF5777;
}
[data-theme=&#39;default&#39;] .footer {
  color: #FF5777;
  border: 2px solid #FF5777;;
}

/* style/theme/cool.scss */
[data-theme=&#39;cool&#39;] .header {
  background: #409EFF;
}
[data-theme=&#39;cool&#39;] .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(&#39;default&#39;)"></div>
      <div class="set set--cool" @click="changeTheme(&#39;cool&#39;)"></div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "Theme",
  setup() {
    const changeTheme = (theme = &#39;default&#39;) => {
      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，目前这块内容比较完善就是SassMagic，感兴趣的可以点进来看一下。下面简单看一下BEM模式的应用

$elementSeparator: &#39;__&#39;;
$modifierSeparator: &#39;--&#39;;

// 判断`$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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

架构 css scss html npm sass Object for 面向对象 封装 堆 class Generic function 对象 margin padding border flex input https
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS의 계단식 컨텍스트에 대한 심층 분석다음 기사：CSS의 계단식 컨텍스트에 대한 심층 분석

관련 기사

더보기