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 组件是⼀种与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是⼀种技术（technique），⽽不是⼀个具体的库实现（library）。简单来说CSS-in-JS就是将应⽤的CSS样式写在JavaScript⽂件⾥⾯，⽽不是独⽴为⼀些.css。
这样你就可以在CSS中使⽤⼀些属于JS的诸如模块声明，变量定义，函数调⽤和条件判断等语⾔特性来提供灵活的可扩展的样式定义。
不同的实现⽅式？
实现了CSS-in-JS的库有很多，据统计现在已经超过了61种。虽然每个库解决的问题都差不多，可是它们的实现⽅法和语法却⼤相径庭。从实现⽅法上区分⼤体分为两种：唯⼀CSS选择器和内联样式（Unique Selector VS Inline Styles）。
对应于这两种实现⽅式的两个⽐较有代表性的实现：styled-components和radium。
CSSModules
所有的class的名称和动画的名称默认属于本地作⽤域的CSS⽂件。
所以CSS Modules不是⼀个官⽅的规范，也不是浏览器的⼀种机制，它是⼀种构建步骤中的⼀个进程。（构建通常需要webpack或者browserify的帮助）。通过构建⼯具的帮助，可以将class的名字或者选择器的名字作⽤域化。（类似命名空间化。）
Styled JSX
⼀个⽀持jsx⽅式编写的css-in-js插件
可以使⽤npm install --save styled-jsx安装。
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。
官⽹链接： github/twbs/bootstrap
materialize CSS
Materialize 于 2014 年由 Google 创建。它是⼀个⽤于⽹站和 Android 应⽤程序的响应式 UI 框架。它提供了许多现成的组件、类和⼊门模板。它与 Sass 兼容，并具有基于 Bootstrap 的 12 列⽹格格式的响应式布局。因此，如果你想使⽤ Material
Design（Google 的设计语⾔）并在你的⽹站上创建类似 Google 的效果，Materialize CSS 将是你的绝佳选择。
官⽹链接：github/Dogfalo/materialize
Bulma
最佳CSS框架合集：尽管是新的，但 Bulma 已经迅速登上了前 10 名 CSS 框架的名单。Bulma 拥有超过 20 万⽤户，并且还在增长。它没有 JavaScript 组件（没有 .js）和最易读的 CSS 类。为了创建⽹格，Bulma 有⼀个强⼤的系统称为瓷砖，使页⾯优雅整洁。
它⾼度模块化且易于学习。虽然规模很⼩，但 Bulma 拥有⼀个充满热情的社区，他们希望改变 CSS ⽤于⽹站的⽅式。
官⽹链接： github/jgthms/bulma
基于JS的CSS框架jquery是什么功能组件
Material-UI
⼀组实现了⾕歌Material Design设计原则的React组件集合，江湖传⾔使⽤Material-UI可以使我们的页⾯颜⾊更鲜艳，动画效果更突出
reactstrap
是个简单的React Bootstrap 4组件库，包含React Bootstrap 4组件，这些组件有利于组成和控制。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。