CSS 工程化小结

CSS 工程化

组成：1.组织（代码目录）2.优化（那种实现方式更好） 3.构建（代码完成后需要经过哪些处理步骤） 4.维护

常见问题

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

1.Less Sass 等CSS 预处理器

2.PostCSS 插件（postcss-import / precss 等）

3.webpack 处理 CSS (css-loader + style-loader)

2.PostCSS 可以做什么

1.取决于插件可以做什么

2.autoprefixer cssnext precss 等兼容性处理

3.import 模块合并

4.CSS 语法检查兼容性检查

5.压缩文件

3.CSS modules 是做什么的

1.解决类名冲突的问题

使用：使用 PsostCSS 或者 webpack 等构建工具进行编译；在 HTML 模板中使用编译过程产生的类名

4.为什么使用 JS 来引用、加载 css

1.JS 作为入口，管理资源有天然优势

2.将组件的结构、样式、行为封装到一起，增强内聚

3.可以做更多处理（webpack）

知识点：

PostCSS

1.PostCSS 本身只有解析能力 2.特性全部靠插件实现

常用插件（学习点击这篇博客，下图为部分内容）

1.import (模块合并）

2.autoprefixier (自动加前缀）

3.cssnano (压缩代码）

4.cssnext 使用 CSS 新特性

5.precss 变量、mixin、循环等（跟预处理器很相似）

webpack （中文文档）

核心思想：1.JS 是整个应用的核心入口 2.一切资源均由 JS 管理依赖 3.一切资源均由 webpack 打包

入门 webpack ，看这篇博客写的非常详细

webpack 和 css

1.css-loader 将 CSS 变成 JS

2.style-loader 将 JS 样式插入 head

3.EXtractTextPlugin 将 CSS 从 JS 中提取出来

4.CSS modules 解决 CSS 命名冲突的问题

5.less-loader sass-loader 各类预处理器

CSS 工程化小结相关推荐

css工程化和浏览器兼容性问题
CSS工程化 CSS编译器 CSS编译器,也叫做CSS预编译器,是指开发者使用某种类似CSS(但实际不是)的语言编写代码,然后通过编译器,将其编译成浏览器真正能执行的CSS代码. 目前常见的CSS编 ...
css定位小结 1216
css定位小结 1216 定位的分类 static relative absolute fixed static 标准的默认的默认的定位,没有偏移效果除了它外的所有其它定位,都会具有偏移的能力 ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
2021 年你需要知道的 CSS 工程化技术
大家好,我是皮汤.最近业务调整,组内开启了前端工程化方面的基建,我主要负责 CSS 技术选型这一块,针对目前业界主流的几套方案进行了比较完善的调研与比较,分享给大家. 目前整个 CSS 工具链.工程化 ...
css属性小结之文本
css属性小结之文本 (1)用text-decoration设置文本修饰线要对文本增加一些装饰性的效果,可以使用元素的text-decoration属性,该属性的值有:underline. over ...
CSS属性小结之--半透明处理
项目中经常有遇到需求半透明的情况,如图片.文字.容器.背景等等,每次都要去翻以前的项目,不甚其烦.现在一次性做个小结,方便自己查阅,也同时分享给大家: 一. 元素容器透明 1 .div{ 2 opac ...
【web前端】CSS笔记小结盒子模型+PS基操+样例（Day 3+部分Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 盒子模型 Box Model ①网页布局的本质 ②组成部分 ❀图解 ❀边框 border ※ 组成 ※※ 样式 ※ 简写 ※练习 ※细线边框 ...
html和css学习,HTML与CSS学习小结
Headfirst系列书,照相留念,用了很多便签记录知识点 Headfirst系列编程书有个特点是节奏很慢,每章包含的知识点不多就那么几个,但是比较全面,把篇幅多用在多种实际情况的演练和讲解原因上了( ...
css30主要作用,30个你不可不知的CSS选择器小结
一.全浏览器支持的css选择器(由于很好理解,demo省略) 1.* *通配符选择器,经常用于css reset,即样式重置,清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签, ...

CSS 工程化小结

CSS 工程化小结相关推荐

最新文章

热门文章

CSS 工程化 小结

CSS 工程化 小结相关推荐

最新文章

热门文章

CSS 工程化小结

CSS 工程化小结相关推荐