CSS模块化思想 更加有效的管理CSS样式

Css模块化演变图：   4-2   如果分为四个模块：    4-3     如果分成六个模块：         如果分成八个模块：    

模块化的基本概念1.什么是模块模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。 模块化用来分割，组织和打包软件。每个模块完成一个特定的子功能，所有的模块按某种方式组装起来，成为一个整体，完成整个系统所要求的功能。 模块具有以下几种基本属性：接口，功能，逻辑，状态。功能，状态于接口等反映模块的外部特性，逻辑反映它的内部特性。2.HTML页面构建很多页面构建工程师都经历了这样几个

前言 前端模块化是个非常大的话题了，我们可以简单的分为html模块化、javascript模块化、css模块化；那么我们先从css模块化开始，css模块化基础却必不可少。希望能通过理解css的模块化，窥探出模块化的意义与思想。 提纲 当项目稍微复杂点的时候，项目迭代时，css的编写会让人痛苦不已，css模块化可以让项目中的样式,管理起来优...

CSS模块化 CSS发展 手写原生CSS：行内样式、内嵌样式、link引入外部样式、@import导入样式 使用预处理器Sass/Less：支持变量、支持嵌套 使用后处理器PostCSS：使用PostCss可以接受CSS文件并校验css语法或自动添加浏览器前缀 使用 css modules 使用css in js 什么是CSS模块化？ 在系统结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。那么css模块化的思想，就是在css 编写的环境中，用上模块化的思想

随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。为了解决这个问题，产生出了 CSS 模块化的概念。

CSS 模块化的三种解决方案： CSS 命名约定 BEM规范（很早以前） BEM — Block Element Modifier 依旧使用 CSS，使用 JS 编译原生的 CSS 文件，使其具备模块化的能力 CSS-Modules 彻底抛弃 CSS，使用 JS 写 CSS 规则，并内联样式 CSS-IN-JS 1. CSS Modules 方案 CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建阶段对 CSS 类名选择器限定作用域的一种方式。 1.1 CSS Modu.

CSS模块化 模块化概念 模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 ---- 就是把一个大的功能拆解成小功能 为什么需要模块化 相对独立性 – 避免作用域污染 通用性 – 可复用 互换性 – 可按需加载，从而优化性能 关注分离概念、不同的技术做不同的事情 现有的 CSS 方案 // app.css .button { width: 100px; height: 20px; background: 'red'; } //

模块化CSS是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且相互之间没有依赖关系，当修改其中一部分CSS时，不会对其他部分产生意料之外的影响。

前言：

javascript模块化 AMD (Async Module Define) 依赖尽可能提前执行 CMD (common Module Define) 依赖尽可能懒加载 UMD (Universe Module Define) 判断是否AMD或者CMD,如果两者都不是则赋值给window暴露出去 ESM (EcmaScript Module) import export ex...