css架构

CSS架构

css写的一团混乱，很难追踪到是什么样式影响了HTML：一次小小的修复解决了一个问题，但又带来了三个或更多其他的问题，并且小规模的CSS改变都会打破JavaScript的功能。因此，需要精密规划的css架构

按种类模块化

Base styles（基本样式）

Objects（对象）

Components（组件）

State（状态）

Themes（主题）

Utilities（实用程序）

Javascript hooks（JS挂钩）

类选择器命名

当给类选择器命名时，要确定命名足够长，以便于辨别（.pullquote 不等于 .pq），但是没必要过长（.nav 而不需要 .navigation）。类名的可读性会影响整个团队成员，能有效帮助他们理解你所要表达的思想。

BEM命名规范

一个非常流行并且超级有用的CSS命名约定是Yandex(俄罗斯最流行的搜索引擎)开发的BEM（块元素修饰符）.
该命名约定非常简单，如下：

[块]_[元素]-[修饰符]

你也许会纠结于是否使用冗长的类名，在你的项目中使用BEM的价值就是快速消除这种担忧。
例子：

<div class="alert alert--warning">
  <h1 class="alert__title">
    <span class="alert__icon"></span>
    Alert Title
  </h1>
  <p class="alert__description">The password you entered is invalid.</p>
</div>

CSS IN JS

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。根据不完全统计，各种 CSS in JS 的库至少有47种。他不像预处理器一样有多一道编译过程。在React组件化中的例子尤其突出。

const style = {
  'color': 'red',
  'fontSize': '46px'
};

const clickHandler = () => alert('hi'); 

ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById('example')
);

CSS预处理器

SASS

sass文件被赋予了能够运用逻辑编写css的能力并能被编译成正常的css文件

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

详细文档
官网大大

POST CSS

post css 不是 预处理器 而是一个用 JavaScript 工具和插件转换 CSS 代码的工具，其功能比较广泛，而且重要的一点是，post css可以和less/sass结合使用
官网

功能：
1 . 使用下一代css语法（即允许使用最新的css语法，就像支持ES6之类的）

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成rem（rem不熟悉的，点这）

4 . css 代码压缩等等

如何使用

1 . 安装

npm install postcss-loader –save-dev

2 . webpack配置

3 . postcss配置

项目根目录新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

postcss 只是一个工具，本身不会对css操作，它通过插件实现功能

常用的postcss插件

1 . Autoprefixer

前缀补全，全自动的，无需多说

安装：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下个版本的css语法

安装：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px转换成rem

安装：

cnpm install postcss-pxtorem --save-dev

配置项：

特殊技巧:不转换成rem

px检测区分大小写，也就是说Px/PX/pX不会被转换，可以用这个方式避免转换成rem