前端工程化

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风格规范