阅读 1486

《大前端 基础组件》系列 CSS也有架构?

前言

Coding 应当是一生的事业,而不仅仅是 30 岁的青春饭
本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新

前端问后端:为啥做后端不是前端?

后端:你们前端简直是玄学,CSS 简直玄学,有一次我调个样式,死活调不好!!

一些重复常用的CSS,确实没有必要重复写,封装成公共的CSS 文件,放到 CDN,用的时候,直接引入用就行。

其次,如果同样的样式,每个人都去自己写一套,不同的团队都各自去写一套,那么长远来看,是很不好的一件事情。对新人后面看代码,也不友好~

架构图

其实 CSS 也是有架构可言滴,比如reset.css,不过本文主要说下一lib.css。

简单说一下:

  • reset.css,css 重置嘛,但是要注意的是,没必要的就不要写到里面去了
  • lib.css,常用、公用的一些 css 样式
图片

这里先稍微提一嘴,后续专门出一篇讲企业中图片处理的问题,比如头部大 banner 怎么搞?图片太大了怎么搞?

首先,UI 提供给前端的同学尽量规范,其次公司应该有图片 CDN 上传平台,上传的时候,CDN 这边会进行一次压缩,具体怎么压,压到什么程度,下次汇总一起讲。

今天主要是简单说一下 lib.css 应该包含哪些最基本的部分。

分类

按照平常使用频率最高的CSS,进行分类处理

display

.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; } 
复制代码

height

根据自己公司日常设计稿,使用最多的尺寸处理,我司12 到 20 用的较多,且一般是以 2 为间隔。

height
.h12 { height12px; }
.h14 { height14px; }
......
.h20 { height20px; }
复制代码
line-height
.lh12 { line-height12px; }
.lh14 { line-height14px; }
......
.lh20 { line-height20px; }
复制代码

width

这里规则,同上 height。

数值
.w10 { width10px; }
.w20 { width20px; }
......
.w200 { width200px; }
复制代码
百分比
.pct10 { width10%; }
.pct20 { width20%; }
......
.pct100 { width100%; }
复制代码

margin

.m0 { margin0; }

.ml1 { margin-left1px; }
.ml5 { margin-left5px; }
.ml10 { margin-left10px; }
......
.ml30margin-left30px; }

......
// margin-right
// margin-top
// margin-bottom
复制代码

padding

padding 同上 margin即可。

border

我司用的最多的颜色要属于 #F46 蘑菇红了~

来,感受一下,还是挺好看滴。

.bdm { border1px solid #F46; }
.bde { border1px solid #eee; }
......
复制代码

color

background-color
.bgm { background-color#F46; }
......
.bge0 { background-color#e0e0e0; }
复制代码
color
c0 { color#000; }
......
c9 { color#999; }
复制代码

font

font-size
.f0 { font-size:0; }
.f10 { font-size:10px; }
......
复制代码
font-style
.fs-n { font-weight: normal; font-style: normal; }
.fs-b { font-weight: bold; }
.fs-i { font-style: italic; }
......
复制代码

常用

/* 块状元素水平居中 */
.auto { margin-left: auto; margin-right: auto; }

/* 清除浮动 */
.fix { *zoom:1; }
.fix:after { display: table; content:''; clear: both; }

/* 单行文字溢出虚点显示 */
.ell { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }

/* 绝对定位隐藏 */
.abs-out { position: absolute; left: -999em; top: -999em; }

......
复制代码

flex

能用 flex 的地方,都用 flex 吧~

.flex { display: flex; }
.inflex { display: inline-flex; }
.f-fd-r { flex-direction: row; }
.f-fd-rr { flex-direction: row-reverse; }
......

.f-ac-sb { align-content: space-between; }
.f-ac-fs { align-content: flex-start; }
......
.f-as-fealign-self:flex-end; }
复制代码

总结

本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新

本文只是抛砖引玉,提供一个简单的思路。

如果你的公司还没有公共的CSS库(应该80%以上的公司都有了吧),那可以搞起来了~

PS:具体的细节,比如文章开头提到的图片压缩、显示的问题,放到前端优化系列来讲~

近期原创传送门,biubiubiu~


喜欢的小伙伴加个关注,点个赞哦,感恩💕😊

联系我 / 公众号

微信搜索【接水怪】或扫描下面二维码回复”加群“,我会拉你进技术交流群。讲真的,在这个群,哪怕您不说话,光看聊天记录也是一种成长。(阿里技术专家、敖丙作者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在)。

接水怪也会定期原创,定期跟小伙伴进行经验交流或帮忙看简历。加关注,不迷路,有机会一起跑个步🏃 ↓↓↓