# normalcss

**Repository Path**: siumu/normalcss

## Basic Information

- **Project Name**: normalcss
- **Description**: 面向普通后端程序员的前端通用css代码
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-07-29
- **Last Updated**: 2023-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS

## README

## 2021年11月29日更新

  以下是关于我定义的那些类名：每个随便举两个例子，color和flex我就不再写了

```css
/* 边框，一般常用全边框和底部边框，最常用的就是黑色，灰色，偶尔用用白色 */
.border-black{
    border: 1px solid black;
}
.border-white{
    border: 1px solid white;
}


/* 圆角也常用，经过实验百分号不行，还是得用px单位 */
.bradius-4px{
    border-radius: 4px;
}
.bradius-6px{
    border-radius: 6px;
}
/*
pp表示百分数，height用的倒是比较少，没有width用的多
*/
.h-40pp {
    height: 40%;
}
.h-50pp {
    height: 50%;
}

/*
pp表示百分数，我比较常用百分号和em为单位
*/
.w-10pp {
    width: 10%;
}
.w-20pp {
    width: 20%;
}
.w-2em {
    width: 2em;
}
.w-3em {
    width: 3em;
}
/*字号*/
/*八号*/
.txt8 {
    font-size: 6px;
}

/*七号*/
.txt7 {
    font-size: 7px;
}
/* em为单位 下划线 _ 表示小数点*/
.txt-0_5em {
    font-size: 0.5em;
}
.txt-0_6em {
    font-size: 0.6em;
}
/* 阴影面积 */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) ;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) ;
}
/* 外边距我基本也不怎么用px，调起来着实麻烦，还是em好，1em表示一个字体的长度 */
.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;
}
/* 内边距我基本也不怎么用em，调起来着实麻烦，还是em好，1em表示一个字体的长度 */
.pd-1em {
    padding: 1em 1em;
}
.pr-1em {
    padding-right: 1em;
}
.pb-1em {
    padding-bottom: 1em;
}
.pl-1em {
    padding-left: 1em;
}
```

好了，基本上就是这么点。

我发现，我定义的那么多颜色确实不怎么用，颜色虽然丰富。可惜用不上。颜色我也就用上那么几种：黑、白、灰、蓝、绿、黄、红，其他的就都用不上了。再把这常用的颜色选个深的，浅的，适中的，其实加起来也就十几种。主要还是一种色调，其他都是辅助色，不是很常用。这样一来定义这么多颜色着实有些鸡肋。等我找到合适的颜色再调整吧。

## 2021年11月5日更新

  关于`border-radius`，我发现我错了，不应该用百分号。没有经过验证就用`百分号`，真是有大问题，根本就不是我想要的那种样式，最后还是得改成`px`作为单位。
## 序言
  不知道身为后端程序员的你写不写前端代码，反正我是经常写，写的我很烦，尤其是用vue之类的组件式开发，几乎每个vue页面我都要写一些重复性的css，写了一遍又一遍，而且还都是那种非常简单的，margin，padding，font-size之类的东西。毕竟高深的我也不会写。

  所以，我痛定思痛，决定把常用的那些简单的css写成一个文件,并且放在码云上，之后不管是哪个项目我直接复制粘贴进去，全局引用，之后就不用写css了，直接写class就行。

  **这个文件就起名字叫做**:`xiumu.css`

## 使用
  首先是**命名**，命名简单易懂，基本上遵循**属性+值**的命名方式。~~举个例子来说：mg-left-1-px就是`margin-left: 1px;`而mg-1-1-px就是`margin: 1px 1px;`~~

  所以基本上看到类名就知道它的css代码是啥，给大家展示一下部分代码：

#### 以上方式类名太长不合适

  我发现我有点SB了，用上面那个命名方式生成的类名实在是太长了，放在真正开发中实在是不好使。我决定痛改前非，学习[TailwindCSS](https://www.tailwindcss.cn/)的命名方式来写。用**缩写＋值单位**的方式来写，比如

- **w-10pp**表示`width: 10%;`，**w-8em**表示`width: 8em;`我比较喜欢使用**em**这个单位，因为在我的认知里，1em就是一个文字大小，8em就是8个文字大小

```css
.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;
}

.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](https://ant-design.gitee.io/docs/spec/colors-cn)里面的颜色又多又好看，我就把它的颜色用CSS变量全部定义了一遍，这样就可以直接引用了

```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代码库