聊聊 web 现代 ui 组件库

月藤
697 阅读5分钟

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

今天结合我学习前端的历史来聊聊 web 的 ui 开发的技术演进，本文按以下结构展开：

  • 初学 css 暴露的问题
  • 现代流行的前端 ui 库介绍
  • 以某库源码为例分析此库设计的优点

初学 css 暴露的问题

一般初学者熟悉了布局（display）、定位（position）、基本样式（box-shadow、border等）、动画(transition、animation)、媒体查询(@media) 等 css 的基础知识和 html的常见标签就可以按照自己的想法写出一些静态网页了。而初学者第一次写网页，遇到的第一个问题就是——命名真难。

当你没有接触过任何一个css框架的时候，自己写出来的样式表很容易遇到命名混乱、难以维护的问题。这次翻出我第一次写出来的网页的 css 代码来鞭鞭尸。 源码见 github。

放其中一个页面的效果图

image.png

暂不评价 ui 设计得如何，我们批判一下css

body {
    background-image: url(../images/bg1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0;
    width: 100%;
    height: 100%;
    font: 16px Arial, sans-serif;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
......
#wrapper {
    min-height: 650px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#list {
    position: fixed;
    left: 0;
    background-color: rgba(10, 10, 10, 0.6);
    width: 300px;
    height: 100%;
    padding: 10px;
}

#list>* {
    font-size: 20px;
    padding: 10px 30px;
}

form {
    padding: 30px 50px;
    text-align: center;
}
  1. 滥用 id 选择器，一个页面的元素的 id 不能是重复的，使用了id选择器意味着失去了复用性，一个合理的设计是让css规则尽可能多地被复用，我们应该遵循优先使用 class 选择器，最好永远不用 id 选择器;
  2. 另一个问题是语义的问题，#list在该项目里是用在侧边导航栏的，最好名字可以体现出侧边栏的概念,如.nav-aside，而不是用 list这样泛泛的名字；
  3. 还有一件事是滥用fixed定位，我在这里使用fixed定位的原因是为了使右边的内容发生滚动时，不会影响到左边的侧边栏。fixed定位会创建堆叠上下文，脱离文档流，为了不让侧边栏和右面的内容重叠，一般你需要控制右边的内容的左边距，我这里用了flex 布局让右面的内容居中，刚好和侧边栏错开了。但显然，这样的写法是很 cheap 的，更好的设计是通过flex布局让侧边栏和右面的内容并排显示，固定好宽高，右边的内容设置overflow: auto。

现代流行的前端 ui 库介绍

那么，为了尽量少写出cheap的样式来，我们应该向业界流行的写法看齐，最好的方法就是学习成熟组件库的源码，现在来介绍一下前端的几个 ui 库。

bootstrap

bootstrap 是我学习的第一个样式框架，它是响应式的、移动优先的 ui 框架，它的命名系统很优秀，如.py-2表示设置 padding-top、padding-bottom 为级别2的大小，现在tailwind流行的原子化 css 概念早在bootstrap身上就能看到了。从 bootstrap 的源码你可以学习到怎么定义一个高可复用的class选择器，怎么通过 @media 查询实现在不同视口大小应用不同样式，如何借助 dataset和js实现展开/隐藏导航栏多级菜单、打开、关闭模态框······

tailwind

tailwind将原子化css的概念发扬光大，它定义的class选择器的粒度很细，期望你不需要写额外的 css 规则，仅靠组合tailwind提供的选择器就能适应大部分的使用场景，它是高度可定制的，与 vue、react等流行的组件化框架配合，可以提高编写自定义组件的效率。

element ui

这是一个适用于vue的ui组件库。组件视觉效果清爽，集成了表单验证、日期选择、时间线等实用功能。因为是基于vue构建的组件库，所以你可以从element ui的源码中学习到一个成熟框架使用 vue 开发组件的良好实践。

iview

和element ui一样都是适用于vue技术栈的组件库，其中iview还提供了专业版iView Admin Pro，这是一套企业级的中后台前端解决方案，需要购买授权使用。

naive ui

仍然是一个基于vue的组件库，这个是vue官方推荐的， 它的技术文档挺有意思的。

antd

如果说 element-ui、ivew、naive-ui是vue开发的利器，那 antd 就是使用 react技术栈开发者的福音。官网对其定位如下：

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

csslayout

csslayout严格来说不能算是一个库，而是一个收录了很多流行通用的css布局与模式的demo 收藏集，你不需要在你的项目里添加新的库，只需要访问 csslayout主页，我们可以从预览图找到自己想要的效果，点进去就能看到用css实现这个效果的范式，立马就知道自己应该怎样实现这个效果，另外 csslayout 的选择器命名使用了 BEM规范，通过 模块名__元素名--修饰符的格式定义一个组件相关的一系列 class，这个命名规范也值得我们借鉴，可以良好的解决命名真难的问题。

avatar
文章
阅读
粉丝