1.如何解决CSS的模块化问题?

  1. 使用Less,Sass等CSS预处理器
  2. 使用PostCSS插件(postcss-import/precss)
  3. 使用webpack处理CSS(css-loader + style-loader)

2.PostCSS是什么?

  1. PostCSS是一个平台,具体要取决于这个平台上面的插件可以做什么
  2. 常用的插件如下
        //  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是什么?如何使用?

  1. 解决类名冲突的问题
  2. 使用PostCSS或者Webpack等构建工具进行编译
  3. 在HTML模板中使用编译过程产生的类名(对象.类名的方式来获取)

4.为什么使用JS来引用,加载CSS?

  1. JS作为入口,管理资源具有天然优势(HTML,CSS本身是无法管理模块和资源的)
  2. 将组件的结果、样式、行为封装到一起,增强组件内聚(减少代码耦合)
  3. 可以做更多的处理(webpack,使用CSS Modules 解决了命名的冲突问题)

5. PostCSS的实现原理说一下?

[!NOTE]

PostCSS是一个通过JS插件转换样式表的工具,它本身并不是一门新的CSS语言,而是一个平台或者是生态心态,提供插件扩展服务即JS API,开发者可以根据这些接口,定制开发插件,

目前比较流行的插件工具如:Autoprefixer 、Stylelint 、CSSnano。

5.1 解析步骤

  1. 将CSS解析成抽象语法树(AST树)
  2. 将AST树”传递”给任意数量的插件处理
  3. 将处理完毕的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工程化方案的更多相关文章

  1. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  2. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  3. 【前端知识体系-HTML相关】HTML基础知识强化总结

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  4. 【前端知识体系-NodeJS相关】对NodeJS模块机制的理解

    1. CommonJS模块规范 1.1 模块引用 var math = require('math'); 1.2 模块定义 [!NOTE] 上下文提供exports对象用于导出当前模块的方法和变量,并 ...

  5. 【前端知识体系-JS相关】ES6专题系列总结

    1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...

  6. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  7. 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点

    1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...

  8. 前端知识体系-NodeJS相关】NodeJS基础知识全面总结

    NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...

  9. 【前端知识体系-JS相关】深入理解JavaScript异步和单线程

    1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...

  10. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

随机推荐

  1. 简单使用OpenSSL生成密钥

    一.生成自签名证书 1.1.创建root CA私钥 openssl req -newkey rsa:4096 -nodes -sha256 -keyout ca.key -x509 -days 365 ...

  2. 一次看懂 Https 证书认证

    TLS 传输层安全性协定 TLS(Transport Layer Security),及其前身安全套接层 SSL(Secure Sockets Layer)是一种安全协议,目的是为网际网路通信,提供安 ...

  3. Spring Boot项目中如何定制HTTP消息转换器

    在构建RESTful数据服务过程中,我们定义了controller.repositories,并用一些注解修饰它们,但是到现在为止我们还没执行过对象的转换--将java实体对象转换成HTTP的数据输出 ...

  4. 如何在项目中使用Spring异步调用注解@Async

    本文主要介绍如何使用Spring框架提供的异步调用注解@Async,异步线程池配置.异常捕获处理. 开启@Async注解支持 使用@Async注解的之前,必须在项目中启动时调用@EnableAsync ...

  5. python 2.x中的中文

    先不管一大堆的中文显示的原理,在这里记录下正确显示中文的方式,便于以后的查阅和深入学习. 方法1 a = {} a["哈哈哈"] = "啦啦啦啦啦啦啦" s1 ...

  6. spring boot 中通过CORS实现跨域

    一.跨域问题出现的原因 出现跨域问题的原因是同源策略. 同源策略 主要是三同:同协议.同域名.同端口, 同源策略目的 保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则cookie可以共享 ...

  7. 百万年薪python之路 -- RBAC角色权限设计

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...

  8. 远程控制服务(SSH)之Linux环境下客户端与服务端的远程连接

    本篇blog将讲述sshd服务提供的两种安全验证的方法,并且通过这两种方法进行两台Linux虚拟机之间的远程登陆. 准备工作: (1)     准备两台安装有Linux系统的虚拟机,虚拟机软件采用VM ...

  9. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  10. 说说babel

    一.什么是babel 二.如何配置 三.配置babel-polyfill 一.什么是babel The compiler for writing next generation JavaScript. ...