小时候我们都很快乐,因为那个时候我们,丑和穷都还不是那么明显。
序言
不知道身为后端程序员的你写不写前端代码,反正我是经常写,写的我很烦,尤其是用vue之类的组件式开发,几乎每个vue页面我都要写一些重复性的css,写了一遍又一遍,而且还都是那种非常简单的,margin,padding,font-size之类的东西。毕竟高深的我也不会写。
所以,我痛定思痛,决定把常用的那些简单的css写成一个文件,并且放在码云上,之后不管是哪个项目我直接复制粘贴进去,全局引用,之后就不用写css了,直接写class就行。
这个文件就起名字叫做:xiumu.css
代码仓库在 https://gitee.com/siumu/normalcss.git
使用
首先是命名,命名简单易懂,基本上遵循属性+值的命名方式。举个例子来说:mg-left-1-px就是~~margin-left: 1px;
而mg-1-1-px就是margin: 1px 1px;
所以基本上看到类名就知道它的css代码是啥,给大家展示一下部分代码:
以上方式类名太长不合适
我发现我有点SB了,用上面那个命名方式生成的类名实在是太长了,放在真正开发中非常不好使。我决定痛改前非,学习TailwindCSS的命名方式来写。用缩写+值单位的方式来写,比如
- w-10pp表示
width: 10%;
,w-8em表示width: 8em;
我比较喜欢使用em这个单位,因为在我的认知里,1em就是一个文字大小,8em就是8个文字大小
.w-10pp {
width: 10%;
}
.w-8em {
width: 8em;
}
.h-90pp {
height: 90%;
}
.h-100pp {
height: 100%;
}
.border-black{
border: 1px solid black;
}
.border-white{
border: 1px solid white;
}
/* 圆角也常用,只不过数字大小不固定,全看div大小,所以用百分号比较好 */
.bradius-8pp{
border-radius: 8%;
}
.bradius-10pp{
border-radius: 10%;
}
.mg-1em {
margin: 1em 1em;
}
.mr-1em {
margin-right: 1em;
}
.mb-1em {
margin-bottom: 1em;
}
.ml-1em {
margin-left: 1em;
}
.mt-1em {
margin-top: 1em;
}
.pd-1em {
padding: 1em 1em;
}
.pr-1em {
padding-right: 1em;
}
.pb-1em {
padding-bottom: 1em;
}
.pl-1em {
padding-left: 1em;
}
.pt-1em {
padding-top: 1em;
}
/* 下划线 _ 表示小数点*/
.txt-0_5em {
font-size: 0.5em;
}
.txt-0_6em {
font-size: 0.6em;
}
这里面有margin,有padding,有font-size,后续会慢慢添加更多的东西。根据我写代码的情况来看,距离单位基本都是在两位数以下,用得最多的甚至是10px以下,所以我生成的margin距离都在64px以下,1-64px每个都可以用。padding距离更短在16px以下。
后来我发现,px完全没有em用的频繁,反正我喜欢用em,所以我把单位基本上能改成em的全改成em了
本来我用Java代码生成的文件,想着一口气给生成到500px。但是最后生成的文件太大了,不可能用在生产环境的。我就思考了一下结合实际情况,生成到64px。至于更大的距离单位应该会很少用,到时候再定义就行了,估计没几个。
或许有人问,怎么不用别人写好的css库呢?我也确实找了很多css库,但是人家是专业的,写的又高级,又全,又多,我学起来有点费劲,哪有这复制粘贴来得快。而且很多样式UI库都有,我写的css都是非常简单的那种。用高级css库感觉就像是高射炮打蚊子——我举不动。
我本来还担心最后生成的1000+行的css文件会很大,没想到才20KB,这太有意思了。起开!!我要再加1000行!!!
颜色
我发现ant-design里面的颜色又多又好看,我就把它的颜色用CSS变量全部定义了一遍,这样就可以直接引用了
/* 参考ant-design里的颜色,它的颜色挺全的,我很喜欢。每个颜色都由浅到深 */
:root {
--red-1: #fff1f0;
--red-2: #ffccc7;
--red-3: #ffa39e;
--red-4: #ff7875;
--red-5: #ff4d4f;
--red-6: #f5222d;
--red-7: #cf1322;
--red-8: #a8071a;
--red-9: #820014;
--red-10: #5c0011;
--volcano-1: #fff2e8;
--volcano-2: #ffd8bf;
--volcano-3: #ffbb96;
--volcano-4: #ff9c6e;
--volcano-5: #ff7a45;
--volcano-6: #fa541c;
--volcano-7: #d4380d;
--volcano-8: #ad2102;
--volcano-9: #871400;
--volcano-10: #610b00;
--orange-1: #fff7e6;
--orange-2: #ffe7ba;
--orange-3: #ffd591;
--orange-4: #ffc069;
--orange-5: #ffa940;
--orange-6: #fa8c16;
--orange-7: #d46b08;
--orange-8: #ad4e00;
--orange-9: #873800;
--orange-10: #612500;
--gold-1: #fffbe6;
--gold-2: #fff1b8;
--gold-3: #ffe58f;
--gold-4: #ffd666;
--gold-5: #ffc53d;
--gold-6: #faad14;
--gold-7: #d48806;
--gold-8: #ad6800;
--gold-9: #874d00;
--gold-10: #613400;
--yellow-1: #feffe6;
--yellow-2: #ffffb8;
--yellow-3: #fffb8f;
--yellow-4: #fff566;
--yellow-5: #ffec3d;
--yellow-6: #fadb14;
--yellow-7: #d4b106;
--yellow-8: #ad8b00;
--yellow-9: #876800;
--yellow-10: #614700;
--lime-1: #fcffe6;
--lime-2: #f4ffb8;
--lime-3: #eaff8f;
--lime-4: #d3f261;
--lime-5: #bae637;
--lime-6: #a0d911;
--lime-7: #7cb305;
--lime-8: #5b8c00;
--lime-9: #3f6600;
--lime-10: #254000;
--green-1: #f6ffed;
--green-2: #d9f7be;
--green-3: #b7eb8f;
--green-4: #95de64;
--green-5: #73d13d;
--green-6: #52c41a;
--green-7: #389e0d;
--green-8: #237804;
--green-9: #135200;
--green-10: #092b00;
--cyan-1: #e6fffb;
--cyan-2: #b5f5ec;
--cyan-3: #87e8de;
--cyan-4: #5cdbd3;
--cyan-5: #36cfc9;
--cyan-6: #13c2c2;
--cyan-7: #08979c;
--cyan-8: #006d75;
--cyan-9: #00474f;
--cyan-10: #002329;
--blue-1: #e6f7ff;
--blue-2: #bae7ff;
--blue-3: #91d5ff;
--blue-4: #69c0ff;
--blue-5: #40a9ff;
--blue-6: #1890ff;
--blue-7: #096dd9;
--blue-8: #0050b3;
--blue-9: #003a8c;
--blue-10: #002766;
--geekblue-1: #f0f5ff;
--geekblue-2: #d6e4ff;
--geekblue-3: #adc6ff;
--geekblue-4: #85a5ff;
--geekblue-5: #597ef7;
--geekblue-6: #2f54eb;
--geekblue-7: #1d39c4;
--geekblue-8: #10239e;
--geekblue-9: #061178;
--geekblue-10: #030852;
--purple-1: #f9f0ff;
--purple-2: #efdbff;
--purple-3: #d3adf7;
--purple-4: #b37feb;
--purple-5: #9254de;
--purple-6: #722ed1;
--purple-7: #531dab;
--purple-8: #391085;
--purple-9: #22075e;
--purple-10: #120338;
--magenta-1: #fff0f6;
--magenta-2: #ffd6e7;
--magenta-3: #ffadd2;
--magenta-4: #ff85c0;
--magenta-5: #f759ab;
--magenta-6: #eb2f96;
--magenta-7: #c41d7f;
--magenta-8: #9e1068;
--magenta-9: #780650;
--magenta-10: #520339;
--gray-1: #ffffff;
--gray-2: #fafafa;
--gray-3: #f5f5f5;
--gray-4: #f0f0f0;
--gray-5: #d9d9d9;
--gray-6: #bfbfbf;
--gray-7: #8c8c8c;
--gray-8: #595959;
--gray-9: #434343;
--gray-10: #262626;
--gray-11: #1f1f1f;
--gray-12: #141414;
--gray-13: #000000;
}
最后
这个css库希望能时常更新,终有一天把它真的变成面向普通后端程序员的前端通用css代码库