面向后端程序员常用的通用CSS代码库

小时候我们都很快乐，因为那个时候我们，丑和穷都还不是那么明显。

序言

  不知道身为后端程序员的你写不写前端代码，反正我是经常写，写的我很烦，尤其是用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代码库

代码仓库在 https://gitee.com/siumu/normalcss.git