CSS 工程化 小结

简介: CSS 工程化 组成:1.组织 (代码目录)2.优化(那种实现方式更好) 3.构建(代码完成后需要经过哪些处理步骤) 4.

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 各类预处理器

目录
相关文章
|
6天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
23小时前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
9天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
10 0
|
25天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
20 2
使用html+css制作一个发光立方体特效
|
1月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
13 3
超简单的html+css魔幻霓虹灯文字特效
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
24 0