CSS架构与实践

_无名_
101 阅读6分钟

一、概述

问题：

逐渐膨胀的项目CSS逐渐混乱；

如何保持样式风格统一？

规划

项目初始需要详细规划

二、什么是好的架构？

特点

  • 具备拓展性
  • 层级和全局结构

好处

  • 更少的样式
  • 更少的样式冲突
  • 更长的维护周期
  • 更快的提升新团队成员
  • 团队成员之间更容易交流
  • 更平稳的项目交接

三、CSS的设计模式

CSS常见的设计模式有5种，这些设计模式为我们的CSS架构提供了一定的设计思路。

1、OOCSS设计模式

OOCSS（Object-Oriented CSS）是面向对象的CSS，在开发中有如下的约定：

  • 减少对HTML结构的依赖
# bad
# 1.匹配效率低，影响css性能
# 2.和html耦合度高，维护性和扩展性低
```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 是进阶版的OOCSS，是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 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命名规范的话，这无疑是一个好的选择。可以借助sass封装一个mixins来帮助我们生成BEM结构, SassMagic。

比如：

//SCSS
@include b(block) {
   background: red;
   @include e(header){
       font-size: 14px;

       @include m(css) {
           font-size: 18px;
       }
   };
}
//CSS
.block {
    background: red;
}
.block__header {
   font-size: 14px;
}
.block__header--css {
   font-size: 18px;
}

3、SMACSS设计模式

BEM简单的三层分发，应对中小型项目没问题，但是对复杂项目就比较难了，我们看下SMACSS设计模式。

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

  • Base: 默认属性样式重置，比如normalize.css、Reset CSS
  • Layout：布局样式
  • Modules：可复用模块的样式，比如一些列表展示
  • State：状态样式，比如按钮的置灰或高亮的展示
  • Theme：皮肤样式，比如有些网站具有换肤的功能

4、ITCSS模式

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

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

5、ACCSS模式

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

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>

推荐两个库Tailwind CSS和Windi CSS

ACSS的优点

  • CSS文件停止增长：使用传统方法，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS，一套样式全局通用。
  • 再浪费精力命名，不再添加愚蠢的类名：例如 sidebar-inner-wrapper 只是为了能够设置样式，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。
  • 灵活，易读：CSS 是全球性的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此可以 插拔式改变样式 而不必担心其他问题，CSS 样式很多缩写更加符合大脑的记忆。
  • 永远不用担心命名冲突，永远不用担心样式覆盖。

缺点：

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

四、架构实现

src
  style
    fonts        # 存放boder、margin、padding等基于acss模式的代码
    common       # 全局变量配置、样式重置文件等
    atoms        # 存放项目统一规范的文本颜色、边框颜色等变量，一些原子化的样式
    components   # 组件相关样式
    theme        # 存放项目特定主题下的元素样式
    tools        # 存放封装好的mixin(混合指令)和function(函数)样式
    global.scss  # 需要项目全局引用的CSS
    index.scss   # 需要Vue文件引用的CSS

1、mixin(混合指令)和function(函数)的区别

  • 函数是有计算逻辑，返回计算的结果，不输出css块
  • mixin主要是根据计算结果输出css块

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

  • global.scss中导入的代码不仅在Vue文件中使用，而且在style中scss定义文件里也会被引用到
  • 全局引入style/global.scss, 就可以在vue组件的样式中使用变量、mixins和functions了，不要再额外引入了。
// vue.config.js
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: '@import "@/styles/global.scss";',
      },
    },
  },
});
  • style/index.scss定义的代码只是不被style中其他css文件引用到而已，其他的都和global.scss一致
// main.js
import '@/styles/index.scss';

4、atoms的使用方法

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

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

5、settings

该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量,建议参考使用的项目库，比如Element-ui或者自己公司的组件库配置

/* 该目录是定义全局的、项目统一规范的文本颜色、边框颜色等变量 */
@use "sass:math";

/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: #67C23A !default;
/// color|1|Functional Color|1
$--color-warning: #E6A23C !default;
/// color|1|Functional Color|1
$--color-danger: #F56C6C !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;

$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

6、tools

定义一些全局的公共mixin和function，参考SassMagic。

7、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;;
}

用法：

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

8、components目录

组件样式

avatar
文章
阅读
粉丝