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

  • 相关阅读:
    centos服务器上线第二个django项目方法。
    centos7服务器部署django项目。
    C# 修饰符
    PLSQL 12 安装、连接Oracle
    GAC 解释&路径
    WebService 创建、发布、调用
    区域性名称和标识符
    关键字
    运算符 &(与运算)、|(或运算)、^(异或运算)
    ASCII,Unicode,UTF-8,GBK 区别
  • 原文地址:https://www.cnblogs.com/jianghao233/p/9080323.html
Copyright © 2020-2023  润新知