CSS架构学习

2024-01-15 11:57:52

CSS 架构

为什么要学习 CSS 架构？

统一 CSS 命名规范
写出易维护，易复用，易扩展的 CSS
提升布局能力

稍微大点的项目 CSS 代码极其臃肿，倘若没有一定的 CSS 架构能力将会让人头大，写到后面越写越乱，特别是重构的时候，会让人无从下手。倘若是掌握了 CSS 的架构能力可以是的代码 CSS 代码易于维护。

CSS 设计模式

OOCSS（面向对象的 CSS）

例子： 在不改变原有 css 的基础上更改其中的某个元素

<style>
  .menu {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    background-color: red;
  }
  .axtive {
    background-color: green;
  }
</style>

<body>
  <div class="menu"></div>
  <div class="menu axtive"></div>
  <div class="menu"></div>
</body>

实现： 在原有的基础上增加一个新的样式，类似 js 的子类继承父类，可以在不改变父类的基础上对父类的属性进行拓展和修改

BEM（ block ， element 和 modifier ）

参考：：https://www.w3cplus.com/css/css-architecture-1.html
作用： 统一团队命名规范，提高易读性
语法：
block：块级元素直接声明
element：块级元素中的元素块级元素之后使用 __ 进行连接
modifier：修饰样式使用 – 进行连接
Tips: 语法也可以自己团队协商，不是说一定要用特定的语法

<style>
  .tab {
    display: flex;
    width: 800px;
    justify-content: space-between;
  }

  .tab__item {
    width: 200px;
    height: 200px;
    background-color: red;
  }

  .tab__item--green {
    background-color: green;
  }
</style>

<body>
  <div class="tab">
    <div class="tab__item">选项1</div>
    <div class="tab__item tab__item--green">选项1</div>
    <div class="tab__item">选项1</div>
  </div>
</body>

SCMACSS（样式分类）

参考： 将整个项目的样式分类五大类
Base： 存放默认样式，例如设置全局 a 标签的样式
Layout： 布局组件，比如 l-header
Modules： 公共模块的样式
State： 设置某个状态，比如 is-hidden{ display: none }
Theme： 存放主题

Tips：使用 vue 开发不需要 layout 和 modules，component 代替了他俩

ITCSS（样式分层，类似 SCMACSS，但是分了七层）

ACSS（一个类一个功能）

优点： 拥有极强的复用性，易于维护
缺点： 没有语义化
例子

.z-0 {
  z-index: 0;
}
.l-50 {
  left: 50px;
}

码农公寓