制作自己的UI组件库(纯CSS)

前言

很多人在学习前端的时候都会去学习去如何使用别人的UI框架 ,但是很少回去研究他们的实现方式以及底层的原理,就会仅仅局限于会使用,今天来具体的学习一下如何制作属于自己的UI组件库。

阅读指引：

第一步首先得去有属于自己的编程思想，不能拘泥于别人的框架，比如如何通过给父元素加上一个类名就可以让下面的子元素有不同的样式（nth-child()子元素选择器），或者说给div>input实现一个开关的效果（伪类的使用），思想首先要活跃起来不能停滞在某一种的实现方式，想要实现一个效果，要想出多种实现方案然后选择最优方案，而不是仅仅是憋老半天憋出一个方案。(本文适合css即将学习结束跨入js的同学观看)。

第一点

web前端也要去了解后端的一些基本编写方式，比如面向对象编程，或者说分类编写，学会引入或者导入外部文件。
所谓分类编写，也属于面向对象的内容之一简而言之就是将代码模块化，正常零基础在学习的时候通常所有的css样式全部都几种在html文件里面，而不是去外部编写（当然也有例外）。
这里介绍一个css方法

@import './button.css';
@import './table.css';
@import './text.css';
/*import直系翻译就是进口，引入的意思
可将其他css文件的所有内容引入到该文件内
*/

将不同的样式拆开编写 比如按钮组件所有样式都写入单独的css样式里面，或者表单表格组件单独拆开编写，这样写的好处是代码维护方便，某个地方出现样式冲突或者奇怪的bug，都可以精确查找排除bug。

确定要写的样式以及注意事项

1.命名规范：

如果说你你很想规范化写出属于你的组件库并且发布开源到网上，一定要去遵循一定的命名规范，对于初学者来说，通常会犯的错误是命名随意，比如
A B C或者说txt ，div-sousuo，Lunbotu这些类名，如果说你的组件库要发布到网上，这些是绝对不会被允许的，（因为开源意味着你的组件库是要被别人使用的，不规范化会让使用者感到蛋疼）。

当然，你可以选择使用翻译工具辅助（对于英语不好的人来说）
这里打个比方 比如表格的标题 可以起名
table-title subject
等等等的类名 遇到多级类名的时候也可使用多级起名用“-”隔开即可。

2.每一个组件的制作分析

如果你是一个想法很丰富的人，那来实现组件库应该很容易 ，
首先，你需要去清空所有的css默认样式（任意百度皆可）这里引用大佬的清空css清空所有默认样式
刚二代博客清空css默认样式

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

下一步基本上就可以开始着手创建属于你的css样式了。

注意事项

首先元素尽可能不要给固定的值 比如width hight
元素的宽高尽可能去通过padding去实现大小扩展
而不是去写一个定值 ，除非该组件确实是特殊组件需要去写成定值

并且别忘了经常写注释，好好写注释有助于bug排错以及后续的组件功能总结

创建自己的第一个UI组件

这里创建我们第一个组件，我们先从最简单的固定按钮来实现，（如果实在没创意，可以自行百度主流框架的样式参考实现（参考的不推荐开源发布））。

首先可以从几个大致的方向去划分和起类名，先起好自己需要起的类名，想出自己组件库使用客户的使用场景，按钮有多种应用场景。
大致划分可以划分为：
颜色
大小
场合
小字体按钮

比如颜色这里参考element组件库

element将按钮划分为6个应用场景 默认的普通按钮
主要按钮：比如网页登录只有一个按钮，蓝色突出登录
成功按钮：用户提交订单 显示订单提交成功 下方一个绿色按钮显示成功
信息按钮：用于提示信息
警告按钮：您接下来的操作会属于开发者工具书否继续
危险按钮：删除此文件将引起系统不稳定是否继续

大小也可以划分为：超大 ，超小 中等等等供自己使用者自行选择

如果确定之后就要去绘制属于自己的基础类了

所谓基础类就是一个组件的总体样式 里面通常会写一些通用的样式，比如：边框 padding值 边框颜色 过渡动画 margin值 ，不同样式的组件通过其他的类名来覆盖基础样式来实现。

.btn {
    display: inline-block; /*转化成行内块元素*/
    white-space: nowrap;  /*让文字不换行*/
    background: #fff;  /*背景颜色*/
    border: 1px solid #dcdfe6;  /*设置默认边框*/
    color: #606266;  /*文字颜色*/
    -webkit-appearance: none;  /*清空默认样式*/
    text-align: center;  /*文字居中*/
    box-sizing: border-box;  /*边框盒子*/
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-info {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .btn-primary {
    color: #fff;
    background-color: #909399;
    border-color: #909399;
  }
  .btn-danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #909399;
  }
  .btn-success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
  .btn-warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }
  .btn-plain-success {
    color: #67c23a;
    background: #ecf5ff;
    border-color: #c2e7b0;
  }
  .btn-plain-info {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
  .btn-plain-primary {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .btn-plain-danger {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
  .btn-plain-warning {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;
  }
  
  .btn-radio {
    border-radius: 50px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .btn-sm {
    font-size: 12px;
    padding: 6px 10px;
  }
  .btn-lg {
    font-size: 16px;
    padding: 14px 26px;
    border-radius: 10px;
  }
  

/写注释真的懒的写，但是还是补全/

以上是我自己写的样式，放到浏览器

直接给予button btn类名即可实现

感谢收看，后续会继续更新UI组件库。