【前端知识体系-CSS相关】CSS工程化方案
1.如何解决CSS的模块化问题?
- 使用Less,Sass等CSS预处理器
- 使用PostCSS插件(postcss-import/precss)
- 使用webpack处理CSS(css-loader + style-loader)
2.PostCSS是什么?
- PostCSS是一个平台,具体要取决于这个平台上面的插件可以做什么
- 常用的插件如下
// 1. 可以添加属性前缀,适应所有的浏览器
const autoprefixer = require('autoprefixer');
// 2. 将所有的import 导入进来的模块全部合并为一个文件
const atImport = require('postcss-import');
// 3. 实现代码的压缩优化
const cssnano = require('postcss-cssnano');
// 4. cssnext提前使用CSS的高级语法
const cssnext = require('postcss-cssnext');
// 5. precss 类似于sass的语法处理
const precss = require('precss')
3.import实现模块的合并(模块分开,提前合并)
4.CSS语法检查,兼容性检查
5.压缩文件
3.CSS modules是什么?如何使用?
- 解决类名冲突的问题
- 使用PostCSS或者Webpack等构建工具进行编译
- 在HTML模板中使用编译过程产生的类名(对象.类名的方式来获取)
4.为什么使用JS来引用,加载CSS?
- JS作为入口,管理资源具有天然优势(HTML,CSS本身是无法管理模块和资源的)
- 将组件的结果、样式、行为封装到一起,增强组件内聚(减少代码耦合)
- 可以做更多的处理(webpack,使用CSS Modules 解决了命名的冲突问题)
5. PostCSS的实现原理说一下?
[!NOTE]
PostCSS是一个通过JS插件转换样式表的工具,它本身并不是一门新的CSS语言,而是一个平台或者是生态心态,提供插件扩展服务即JS API,开发者可以根据这些接口,定制开发插件,
目前比较流行的插件工具如:Autoprefixer 、Stylelint 、CSSnano。
5.1 解析步骤
- 将CSS解析成抽象语法树(AST树)
- 将AST树”传递”给任意数量的插件处理
- 将处理完毕的AST树重新转换成字符串
5.2 处理机制
Source string → Tokenizer → Parser → AST → Processor → Stringifier
5.2.1 Tokenizer
[!NOTE]
将源css字符串进行分词
举个例子:
.className { color: #FFF; }
通过Tokenizer后结果如下:
[
["word", ".className", 1, 1, 1, 10]
["space", " "]
["{", "{", 1, 12]
["space", " "]
["word", "color", 1, 14, 1, 18]
[":", ":", 1, 19]
["space", " "]
["word", "#FFF" , 1, 21, 1, 23]
[";", ";", 1, 24]
["space", " "]
["}", "}", 1, 26]
]
以word类型为例,参数如下:
const token = [
// token 的类型,如word、space、comment
'word',
// 匹配到的词名称
'.className',
// 代表该词开始位置的row以及column,但像 type为`space`的属性没有该值
1, 1,
// 代表该词结束位置的row以及column,
1, 10
]
5.2.2 Parser
[!NOTE]
经过Tokenizer之后,需要Parser将结果初始化为AST
this.root = {
type: 'root',
source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
start: { line: 1, column: 1 } ,
end: { line: 1, column: 27 }
},
raws:{after: "", semicolon: false}
nodes // 子元素
}
5.2.3 Processor
经过AST之后,PostCSS提供了大量JS API给插件用
5.2.4 Stringifier
插件处理后,比如加浏览器前缀,会被重新Stringifier.stringify为一般CSS。
6.谈一下你对前端工程化的理解?
参考博客:
【前端知识体系-CSS相关】CSS工程化方案的更多相关文章
- 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?
1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...
- 【前端知识体系-JS相关】组件化和React
1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...
- 【前端知识体系-HTML相关】HTML基础知识强化总结
1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...
- 【前端知识体系-NodeJS相关】对NodeJS模块机制的理解
1. CommonJS模块规范 1.1 模块引用 var math = require('math'); 1.2 模块定义 [!NOTE] 上下文提供exports对象用于导出当前模块的方法和变量,并 ...
- 【前端知识体系-JS相关】ES6专题系列总结
1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...
- 【前端知识体系-JS相关】JS基础知识总结
1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 前端知识体系-NodeJS相关】NodeJS基础知识全面总结
NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
随机推荐
- 简单使用OpenSSL生成密钥
一.生成自签名证书 1.1.创建root CA私钥 openssl req -newkey rsa:4096 -nodes -sha256 -keyout ca.key -x509 -days 365 ...
- 一次看懂 Https 证书认证
TLS 传输层安全性协定 TLS(Transport Layer Security),及其前身安全套接层 SSL(Secure Sockets Layer)是一种安全协议,目的是为网际网路通信,提供安 ...
- Spring Boot项目中如何定制HTTP消息转换器
在构建RESTful数据服务过程中,我们定义了controller.repositories,并用一些注解修饰它们,但是到现在为止我们还没执行过对象的转换--将java实体对象转换成HTTP的数据输出 ...
- 如何在项目中使用Spring异步调用注解@Async
本文主要介绍如何使用Spring框架提供的异步调用注解@Async,异步线程池配置.异常捕获处理. 开启@Async注解支持 使用@Async注解的之前,必须在项目中启动时调用@EnableAsync ...
- python 2.x中的中文
先不管一大堆的中文显示的原理,在这里记录下正确显示中文的方式,便于以后的查阅和深入学习. 方法1 a = {} a["哈哈哈"] = "啦啦啦啦啦啦啦" s1 ...
- spring boot 中通过CORS实现跨域
一.跨域问题出现的原因 出现跨域问题的原因是同源策略. 同源策略 主要是三同:同协议.同域名.同端口, 同源策略目的 保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则cookie可以共享 ...
- 百万年薪python之路 -- RBAC角色权限设计
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...
- 远程控制服务(SSH)之Linux环境下客户端与服务端的远程连接
本篇blog将讲述sshd服务提供的两种安全验证的方法,并且通过这两种方法进行两台Linux虚拟机之间的远程登陆. 准备工作: (1) 准备两台安装有Linux系统的虚拟机,虚拟机软件采用VM ...
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- 说说babel
一.什么是babel 二.如何配置 三.配置babel-polyfill 一.什么是babel The compiler for writing next generation JavaScript. ...