CSS模块化方案

1.1 CSS 命名方法

通过人工的方式来约定命名规则

BEM是一种典型的 CSS 命名方法论,BEM的命名规矩就是block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名

OOCSS（Object-Oriented CSS）即面向对象的 CSS，它借鉴了 OOP（面向对象编程）的抽象思维，主张将元素的样式抽象成多个独立的小型样式类，来提高样式的灵活性和可重用性。

ITCSS（Inverted Triangle CSS，倒三角 CSS）是一套方便扩展和管理的 CSS 体系架构，它兼容 BEM、OOCSS、SMACSS 等 CSS 命名方法论

SMACSS即可伸缩及模块化的 CSS 结构

.block__element {
    display: none;
}
.block__element--active {
    display: block;
}

1.2 CSS Modules

CSS Modules：一个 CSS 文件就是一个独立的模块,核心思想是 通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外

CSS Modules允许我们像 import 一个 JS Module 一样去 import 一个 CSS Module.每一个 CSS 文件都是一个独立的模块，每一个类名都是该模块所导出对象的一个属性。通过这种方式，便可在使用时明确指定所引用的 CSS 样式。并且，CSS Modules 在打包时会自动将 id 和 class 混淆成全局唯一的 hash 值，从而避免发生命名冲突问题。

使用 CSS Modules 时，推荐配合 CSS 预处理器（Sass/Less/Stylus）一起使用 CSS 预处理器提供了许多有用的功能，如嵌套、变量、mixins、functions 等，同时也让定义本地名称或全局名称变得容易

<template>
  <p :class="$style.red">This should be red</p>
</template>


<style module>
.red {
  color: red;
}
</style>

1.3 CSS-in-JS

React 的出现，打破了以前关注点分离的网页开发原则，因其采用组件结构，而组件又强制要求将 HTML、CSS 和 JS 代码写在一起。表面上看是技术的倒退，实际上并不是

React 是在 JS 中实现了对 HTML 和 CSS 的封装，赋予了 HTML 和 CSS 全新的编程能力。对于 HTML，衍生了 JSX 这种 JS 的语法扩展，你可以将其理解为 HTML-in-JS；对于 CSS，衍生出一系列的第三方库，用来加强在 JS 中操作 CSS 的能力，它们被称为 CSS-in-JS

随着 React 的流行以及组件化开发模式的深入人心，这种关注点混合的新写法逐渐成为主流

注意此功能并不是 React 的一部分，而是由第三方库提供。比如：Rstyled-components、emotion 等等。

import React from 'react';


import styled from 'styled-components';


// 创建一个 <Title> 组件渲染为 <h1> 标签
// 然后给 <h1> 标签加样式
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;


// 创建一个 <Wrapper> 组件渲染为 <section> 标签
// 然后给 <section> 标签加样式
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


// 然后使用带样式的组件即可
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>