Web前端框架（JavaScript，CSS）、html组件、CSS规范与第三方库

1、什么是前端框架

前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等），使用前端框架可以帮助快速的网站。

框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，同时前端功能越来越强大而产生的前端框架，所以开发web产品就很必要用前端框架（前端架构）。

2、三大主流框架

React
React是一个开源的JavaScript库，由Facebook和一个大型开发者社区共同维护。此库广泛用于开发web应用程序的用户界面。React框架的主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。使用React框架，可以非常轻松地创建用户交互界面，为应用的每一个状态设计简洁的视图。甚至在数据改变时，React也可以高效地更新渲染界面。
虽然React框架本身比较容易理解，结构很清晰，就是由十几个API组成，然后异步渲染。但是很多人反映上手还是有一定的的难度的。React是单向数据流，代码写起来会较双向数据流的多一些，但是同样的排查问题时思路清晰很多。
Vue
Vue框架的最大优势就是简单易上手，同时它也是目前Web前端开发的最常使用的主流框架。Vue.js是用于构建交互式的Web 界面的库。它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲， Vue.js集中在MVVM模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器。所以相比其它的MVVM框架，Vue.js更容易上手。
而且它还可以用来开发最火的小程序，毕竟用这神器，代码敲的飞快，项目也能快速上线。作为一个开源JavaScript框架，它能够开发单页面应用程序，还可以用作Web应用程序框架。Vue框架最大的优势就是能够在没有任何动作的情况下重新渲染，而且允许我们在需要时随时添加组件。
Angular
诞生于2009年于的Angular可以算得上Web前端三大主流框架中最完整的框架，它包含模板、数据双向绑定、路由、模块化、服务、过滤器、依赖注入等所有功能。虽然出生较早，但是因为其强大的功能，至今使用热度不减。对于刚开始前端初学者来讲，掌握这个框架之后，简直会颠覆之前你对前端开发的认知。更方便的是，AngularJS完全基于HTML和JavaScript，因此无需学习其他语法或语言。使用 TypeScript能够提高代码可维护性，有利于后期重构。
当然，Angular框架也不是完全没有缺点的。虽然双向数据流很方便，但是等业务复杂之后，你可能就搞不清楚数据流了。还有令人不开心的脏值检查，以及directive的封装并没有解决视图与数据关系完全分离，有时候还要用$digist强制触发检测。

3、Web组件

什么是Web组件？
Web 组件是一种与HTML 相关联（HTML-related）的技术，简单来说，它允许开发者创建自定义元素，并如同普通的HTML 一样使用它们。另外，也可以创建经过自定义的标准HTML 元素。
是指对 Web 的数据和方法进行封装实体，可以包含 JavaBean 组件，从而方便地进行业务逻辑的处理。它允许在Web文档和Web应用程序中创建可重用的小部件或组件。这样做的目的是将基于组件的软件工程引入万维网。组件模型将允许单个HTML元素的封装和互操作性。
Web组件由四大部分组成，可单独或组合使用。
HTML模板 html Temple
允许文档包含惰性的DOM块
自定义元素 custom elements
定义新HTML元素的API
影子DOM shadow DOM
封装的DOM和样式，配以组合化
HTML导入
将HTML文档导入其他文档的声明方法

4、CSS体系与规范

什么是CSS体系与规范？
在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的CSS文件很有挑战性。所以我们需要一些体系与规范用来增强可维护性。
OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 这些规范（或称心法、解法）存在的目的都是为了让程式码易懂、可重用，进而有效率地开发和维护。
BEM
BEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。
OOCSS
两个原则
Separation of Structure from Skin：分离结构与样式。结构像是元素的大小，样式像是颜色等。
Separation of Containers and Content：分离HTML 与CSS，意即尽量将可共用的样式提取到单独的class 以供使用。
白话文解释就是「使用class 撰写样式，每个class 有其各自用途」。
SMACSS
具结构分类、命名规则的限制。通则如下：
结构分类：Base、Layout、Module、State、Theme。
命名规则：id 与class 受限制地使用、名称使用dash 分隔

5、第三方库（CSS-in-JS）

什么是CSS-in-JS？
CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css。
这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。
不同的实现方式？
实现了CSS-in-JS的库有很多，据统计现在已经超过了61种。虽然每个库解决的问题都差不多，可是它们的实现方法和语法却大相径庭。从实现方法上区分大体分为两种：唯一CSS选择器和内联样式（Unique Selector VS Inline Styles）。
对应于这两种实现方式的两个比较有代表性的实现：styled-components和radium。
styled-components
通过styled-components，你可以使用ES6的标签模板字符串语法（Tagged Templates）为需要styled的Component定义一系列CSS属性，当该组件的JS代码被解析执行的时候，styled-components会动态生成一个CSS选择器，并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。
官网地址：https://styled-components.com/
Radium
Radium是由FormidableLabs创建的在github上有超过7.2k star的CSS-in-JS库。Radium和styled-components的最大区别是它生成的是标签内联样式（inline styles）。由于标签内联样式在处理诸如media query以及:hover，:focus，:active等和浏览器状态相关的样式的时候非常不方便，所以radium为这些样式封装了一些标准的接口以及抽象。
官网地址：https://github.com/FormidableLabs/radium
CSSModules
所有的class的名称和动画的名称默认属于本地作用域的CSS文件。
所以CSS Modules不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要webpack或者browserify的帮助）。通过构建工具的帮助，可以将class的名字或者选择器的名字作用域化。（类似命名空间化。）
Styled JSX
一个支持jsx方式编写的css-in-js插件
可以使用npm install --save styled-jsx安装。
Emotion
官方文档：https://emotion.sh/docs/introduction
Glamorous
官方地址：https://glamorous.rocks/

6、CSS预处理器

什么是CSS预处理器？
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器
Sass
Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。
PostCSS
PostCSS是一款使用插件去转换CSS的工具，有许多非常好用的插件，例如autoprefixer,cssnext以及CSS Modules。而上面列举出的这些特性，都是由对应的postcss插件去实现的。它提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。
cssnext
cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS，所以不需要等待各种浏览器的支持。
LESS
LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。
Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法（2）Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。
Stylus
是一种动态样式表预处理器语言，已编译到层叠样式表中。它的设计受到Sass和LESS的影响。它被认为是CSS预处理程序语法中使用最多的第四种。
它是由TJ Holowaychuk，对Node.js的前程序员和月神语言的创建者创建。它是用JADE和Node.js编写的。

7、CSS框架

什么是CSS框架？

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。

没有JavaScript组件的CSS框架

bootstrap（用过）
Bootstrap 是全球最流行的 CSS 框架，并因其响应式设计而一炮而红。它也是第一个优先考虑移动设备的框架。使用 Bootstrap，无需为移动端查看单独设计——添加必要的类，网站将根据设备适应屏幕尺寸。网格是在 Bootstrap 中引入的，这导致开发人员必须编写的代码急剧减少。
最流行的 CSS 框架之一。他们提供了大量的文档、示例和演示，可以帮你快速进行响应式 Web 开发。该框架的当前版本是 Bootstrap 5。
官网链接： https://github.com/twbs/bootstrap
materialize CSS
Materialize 于 2014 年由 Google 创建。它是一个用于网站和 Android 应用程序的响应式 UI 框架。它提供了许多现成的组件、类和入门模板。它与 Sass 兼容，并具有基于 Bootstrap 的 12 列网格格式的响应式布局。因此，如果你想使用 Material Design（Google 的设计语言）并在你的网站上创建类似 Google 的效果，Materialize CSS 将是你的绝佳选择。
官网链接：https://github.com/Dogfalo/materialize
Bulma
最佳CSS框架合集：尽管是新的，但 Bulma 已经迅速登上了前 10 名 CSS 框架的名单。Bulma 拥有超过 20 万用户，并且还在增长。它没有 JavaScript 组件（没有 .js）和最易读的 CSS 类。为了创建网格，Bulma 有一个强大的系统称为瓷砖，使页面优雅整洁。它高度模块化且易于学习。虽然规模很小，但 Bulma 拥有一个充满热情的社区，他们希望改变 CSS 用于网站的方式。
官网链接： https://github.com/jgthms/bulma

基于JS的CSS框架

Tailwind
Tailwind 可以加快前端的开发速度。你将获得预先设计的小部件菜单和实用程序类来构建你的网站，而不是默认主题或内置 UI 组件。Tailwind 具有模块化组件，如果你在一处进行更改，则代码的其他部分不会受到影响。Tailwind 需要最少的学习并且易于使用。你可以使用 CSS 助手类自定义你的网站。
官网地址： https://github.com/tailwindlabs/tailwindcss
Material-UI
一组实现了谷歌Material Design设计原则的React组件集合，江湖传言使用Material-UI可以使我们的页面颜色更鲜艳，动画效果更突出
reactstrap
是个简单的React Bootstrap 4组件库，包含React Bootstrap 4组件，这些组件有利于组成和控制。
Chakra UI
Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件.
官网地址：https://chakra-ui.com/docs/getting-started

Web前端框架（JavaScript，CSS）、html组件、CSS规范与第三方库相关推荐

转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端知识总结一（HTMl+CSS）
web前端知识总结一(HTML+CSS) 文章目录 web前端知识总结一(HTML+CSS) 浏览器 HTML基础换行标签水平线标签图片标签绝对路径相对路径视频标签链接标签锚点无序列 ...
Web 前端框架分类解读
Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...
几款常用的高质量web前端框架
Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析.都是个人意见,仁者见仁智者见智. QUICK UI Q ...
几款常用的高质量Web前端框架！
近年来,Web前端技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造.各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现. 那么今天就给大家介绍几个在 ...
Web 前端框架 Angular
Angular 详细介绍 Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护.这个条目收录的是 Angular 2 及其后面的版本.由于官方已将 Angular 2 ...
WEB前端框架jQuery、VueJS、React.JS、Node.JS、Bootstrap解读
Web前端框架可以分为两类: 1)JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM) ...
Web前端：JavaScript最强总结附详细代码（带常用案例！）
Web前端基础: Web前端:HTML最强总结附详细代码 Web前端:CSS最强总结附详细代码 Web前端:JavaScript最强总结附详细代码 Web前端工具: Web前端: JQuery最 ...
Web 前端框架 Layui
Web 前端框架 Layui 1. 模块化前端框架 Layui 2. 在 Web 项目中引入 Layui 框架 3. 网页轮播特效 4. 表格模块和分页模块的使用 1. 模块化前端框架 Layui L ...
web前端框架Hui使用
最近在写SSM项目,没有太多时间去设计web前端,就想要学习使用web前端框架,在这里选择了Hui前端框架,以下是学习记录和心得. 1.下载前端框架网址:http://www.h-ui.net/ 2 ...