制作自己的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 / 12p