Mid-Vue 前端

Appearance

概述 ​

CSS 发展至今，一直都没有namespace（命名空间）机制，也没有统一的官方推动标准;
导致项目在多人协同开发的过程，样式很容易被污染，造成页面展示错乱；
当然 各大组织框架，开源机构，针对这种现状也做了很多CSS 规范来解决这些问题；

BEM 组件化的 CSS 标准链接
Atomic 原子性标准 链接
oocss 面向对象的 css 链接


命名规范 ​

TIP

css 命名 和 JS 不一样，JS 是驼峰形式 css 统一使用中划线隔离的方式,特别属性可以使用 -- 隔开

css
.mv-table {
} // tz表格
.mv-table-header {
} // tz表格头部元素
.mv-table-footer {
} // tz表格尾部
.mv-table-body {
} // tz表体部分
.mv-table-body .cell {
} // tz表体 单元格
.mv-table-body--hover {
} // tz表体 hover

BEM 标准 ​

TCS 项目体系主要的技术栈是 vue3+jsx+hooks+scss的组合 在css 模块标准这一块主要就是采用 BEM+SCSS+scoped的形式

BEM

BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范

BlockElementModifier
Block(块,模块),主要场景有组件 nameElement(元素)，主要指标签，自定义标签名Modifier 常用的属性，状态或行为
如 warehouse(仓库),area(区域查询)，customer(客户查询)如： header title, menu item, list item如: disabled, checked, fixed

BEM 优势 ​

  1. BEM 使用广，非常符合现代流行前端互联网框架的特性，比如 react 风格，vue 风格
  2. 性能好： 可以不借助scoped隔离，也不需要穿透处理，也可以跟随模块组件懒加载
  3. 维护方便： CSS 跟随组件，结构清晰，多人协同开发不会样式冲突，不会因项目庞大而难维护，也方便媒体查询

BEM 劣势 ​

  1. BEM 规则太长，命名书写比较麻烦；
  2. 一个 DOM 节点 需要绑很长的样式名，而且前缀重复
  3. 相对 Atomic 规范，重复的 CSS 会比较多，项目整体的样式会比较大

WARNING

BEM 是一种思想，我们可以根据实际情况做些改变，特别是配合sass 的预编译特性，已经scoped 作用域规则 我们可以很大程度上避免书写重复前缀的问题 同时因为 page.scss 使用了oocss 的标准公共样式，组件里面需要自定义的样式很少


实际使用 ​


场景 1

组件外层有统一 div情况， 可以配合scss特性不用手写前缀，虽然不算标准的 BEM,目的是一样的

wareHouseEdit 组件 模块名即为组件名 驼峰转分隔符 wareHouse-edit


场景 2

组件外层是多个组件 to情况 ，可以单独给需要充值 DOM 加 BEM 命名

warehouse 组件 模块名即为组件名 warehouse,元素为mv-table


WARNING

这里为啥不直接用 .mv-table ，因为 mv-table 属于公共 class,属于 oocss 标准 如果多个页面同时修改这个，在没有scoped 隔离的请求就直接污染了


配合 Atomic 原子性标准 ​

tailwindcss是一个 css 框架，它的特点是不写 css，只写class，然后通过class来控制样式，这种方式叫做原子性

Atomic 优势 ​

  1. 使用方便: 一套全局 css 可以多处使用
  2. 体积小： 一套 css 无需多个地方写重复的 css,减少组件里面的重复 css

Atomic 劣势 ​

  1. html 臃肿： 一个 dom 节点需要绑定一堆 class,dev-tools 调试的麻烦

tailwindcss 基础语法 ​

我们使用 tailwindcss 只是为了辅助作用,官网

  • 主要是在于复用hook,共享hook的 css 文件,不方便维护
  • dom节点需要个别的样式的场景,一个属性写class又麻烦,如 margin,padding,border等

1.宽度(Width) ​

  • w-前缀表示宽度，后面跟宽度值，单位可以是px rem em vw vh vmin vmax auto等
  • 不带单位的默认单位是rem(在不明确的情况下,不建议使用)
html
<!-- 默认单位是`rem`,基础是4px,不熟悉的情况下,不推荐 -->
<div class="w-1"></div>

<!-- [px] 在h5,小程序会自动转rem,rpx -->
<div class="w-[1px]"></div>
<div class="w-[2px]"></div>

2.高度(Height) ​

  • h-前缀表示宽度，后面跟宽度值，单位可以是px rem em vw vh vmin vmax auto等
  • 不带单位的默认单位是rem(在不明确的情况下,不建议使用)
html
<!-- 默认单位是`rem`,基础是4px,不熟悉的情况下,不推荐 -->
<div class="h-1"></div>

<!-- [px] 在h5,小程序会自动转rem,rpx -->

<!-- height:1px -->
<div class="h-[1px]"></div>

<div class="h-[2px]"></div>

3.内边距(Padding) ​

  • p-前缀表示宽度，后面跟宽度值，单位可以是px rem em vw vh vmin vmax auto等
  • p + t|b|l|r分别表示padding-top padding-bottom padding-left padding-right
html
<!-- padding: 0px; -->
<div class="p-0"></div>

<!-- [px] 在h5,小程序会自动转rem,rpx -->

<!-- padding-left: 1px;padding-right: 1px; -->
<div class="x-[1px]"></div>

<!-- padding-top: 1px;padding-bottom: 1px; -->
<div class="py-[1px]"></div>

<!-- padding-top: 1px; -->
<div class="pt-[1px]"></div>

<!-- padding-bottom: 1px; -->
<div class="pb-[1px]"></div>

<!-- padding-left: 1px; -->
<div class="pl-[1px]"></div>

<!-- padding-right: 1px; -->
<div class="pr-[1px]"></div>

4.外边距(Margin) ​

  • m-前缀表示宽度，后面跟宽度值，单位可以是px rem em vw vh vmin vmax auto等
  • m + t|b|l|r分别表示margin-top margin-bottom margin-left margin-right
html
<!-- margin: 0px; -->
<div class="m-0"></div>

<!-- [px] 在h5,小程序会自动转rem,rpx -->

<!-- margin-left: 1px;margin-right: 1px; -->
<div class="mx-[1px]"></div>

<!-- margin-top: 1px;margin-bottom: 1px; -->
<div class="my-[1px]"></div>

<!-- margin-top: 1px; -->
<div class="mt-[1px]"></div>

<!-- margin-bottom: 1px; -->
<div class="mb-[1px]"></div>

<!-- margin-left: 1px; -->
<div class="ml-[1px]"></div>

<!-- margin-right: 1px; -->
<div class="mr-[1px]"></div>

5.弹性布局(flex) ​

html
<!-- display:flex  -->
<div class="flex"></div>

<!-- flex-direction: row; -->
<div class="flex-row"></div>

<!-- flex-direction: col; -->
<div class="flex-col"></div>
<!-- flex-direction: column-reverse; -->
<div class="flex-col-reverse"></div>

<!--flex: 1 1 0%; -->
<div class="flex-1"></div>

<!--flex: 1 1 auto; -->
<div class="flex-auto"></div>

<!--flex: none;-->
<div class="flex-none"></div>

<!--flex-wrap: wrap;-->
<div class="flex-wrap"></div>

6.背景(Background) ​

格式: bg-[hex颜色]

html
<!-- 	background-color:#fff  -->
<div class="bg-[#fff]"></div>

格式: bg-颜色名-色号

html
<!-- background-color: rgb(255 255 255);  -->
<div class="bg-white"></div>

<!-- background-color: rgb(248 250 252); -->
<div class="bg-slate-50"></div>

7.文本颜色(color) ​

格式: text-[hex颜色]

html
<!-- 	color:#fff  -->
<div class="text-[#fff]"></div>

格式: text-颜色名-色号

html
<!-- color: rgb(255 255 255);  -->
<div class="text-white"></div>

<!-- color: rgb(248 250 252); -->
<div class="text-slate-50"></div>

8.文本对齐(text-align) ​

html
<!-- 	text-align: left;  -->
<div class="text-left"></div>

<!-- 	text-align: center;  -->
<div class="text-center"></div>

<!-- 	text-align: justify;  -->
<div class="text-justify"></div>

参考 ​

BEM 规范前端规范(ES6\BEM\OOCSS\SMACSS)Atomic CSS 这么丑陋，为什么雅虎还要用它VUE 风格规范

Released under the MIT License.

Copyright © 2022-present Mid-Vue