CSS模块化方案

CSS模块化

模块化概念

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 ---- 就是把一个大的功能拆解成小功能

为什么需要模块化

• 相对独立性 – 避免作用域污染
• 通用性 – 可复用
• 互换性 – 可按需加载，从而优化性能

• 关注分离概念、不同的技术做不同的事情

现有的 CSS 方案

// app.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

// app.js
import('app.css');
function App() {
  return 
红色按钮
}

直接使用 CSS 有什么问题

1. CSS 全局作用域问题

// app.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

// app.js
import('app.css');
function App() {
  return 
红色按钮
}

// app2.css
.button {
  width: 100px;
  height: 20px;
  background: 'green';
}

// app2.js
import('app2.css');
function App2() {
   return 绿色按钮
}

// bundle.css
.button {
  width: 100px;
  height: 20px;
  background: 'red';
}

.button {
  width: 100px;
  height: 20px;
  background: 'green';
}

2. JS 与 CSS 之间无法共享变量

// app.scss
$color: 'red';

.button {
  width: 100px;
  height: 20px;
  background: $color;
}

// config.js
export default {
  ButtonColor: 'red'
}

// app.js
import('app.scss');
import config from './config';
function App(props) {
  return (
  	

    	{ config.ButtonColor === 'red' ? 红色按钮 : null }
    
  )
}

3. 现代框架可以将 UI 进行组件化，但是并没有一个 CSS 模块化方案能够匹配上

CSS 模块化的解决方案：

CSS Modules 既不是官方标准，也不是浏览器的特性，
而是在构建阶段对 CSS 类名选择器限定作用域的一种方式。

1. CSS Modules 方案

• 所有样式都是局部作用域的，解决了全局污染问题
• class 名生成规则配置灵活，可以此来压缩 class 名
• 依然是 CSS，几乎 0 学习成本

使用 CSS Module

create-react-app 中内置了使用 CSS Modules 的配置，
当前方式就是使用 create-react-app 内置的用法

方式: 将所有的 .css/.lee/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等。
即可使用 CSS Modules 的方式进行引入使用了。

JS 和 CSS 之间共享变量

$bg-color: yellow;
//导出变量、实现js与css的变量共享
:export{
 bgColor:$bg-color,
}

全局与局部的写法

/* 定义全局样式 */
:global{
    .hr {
        height: 10px;
        background-color: red; 
  }
}
注意：global作用域的样式 cssmodules 会自动忽略、并且不会导出(不会通过对象拿到)

依赖关系管理

 @mixin important_text{
        margin: 40px 0;
        height: 10px;
        border: 0;
        background-color: aliceblue
       }
.HRSS{
    @include important_text;
    background-color: pink;
}

总结

CSS Modules 是很好的 CSS 模块化解决方案，优势很明显，几乎没有学习成本，也不依赖任何的第三方库，并且对代码的侵入性也非常的小。

2. CSS-In-JS 方案

CSS-In-JS 是一种把 CSS 直接写在 JS 里的一种模式，

安装 npm install --save styled-components

基本使用

import styled from 'styled-components'
const Button=styled.button`
 display: inline-block;
  border: 1px solid transparent;
  height: 32px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  `

 提交

高级用法

定义变量 & 逻辑推算

const color = '#1890ff';

export const Button = styled.button`
  display: inline-block;
  border: 1px solid transparent;
  height: 32px;
  color: #fff;
  background-color: ${props => props.red ? 'red' : color};
  border-color: ${color};
`;

继承

//获取button后通过模版字符串扩展其他样式
export const GreenButton = styled(Button)`
  background-color: green;
  border-color: green;
`;

总结

背后的思想：分离逻辑组件和展示组件

使用 Styled components，可将组件分为逻辑组件和展示组件**，逻辑组件只关注逻辑相关的部分，展示组件只关注样式**。

Styled-components 最基本的理念就是通过移除样式与组件之间的对应关系来强制执行最佳实践。