ReactJS 中的 CSS 架构
我们生活在一个新的时代，每一天都充满了各种各样的新工具和范式。我们总是试图将旧有的架构应用在新技术上，而那样极可能以失败告终。 其中的一个例子便是 BEM—— 一个 CSS 命名约定，它解决的是那些可能不会再次出现的问题。
先来讲一讲重要的背景知识。
BEM**** 是什么？
BEM 是 CSS 的一个命名约定，遵从简单而直接的哲学：代码的一致性、伸缩性和可重用性。这个方法论正是源于它的名字： B lock- E lement- M odifier。这意味着所有的类会被拆分成三个实体，每一个实体在架构和代码组织上都具有不同的目的和角色。
- 块（ Block ）****: 具备独立逻辑和功能的组件。
- 元素（ Element ）****: 块中没有独立意义的部分。
- 修改器（ Modifier ）****: 定义块或元素的行为和外观。
当讨论遵从 BEM 规范的选择器时，有以下三条规则:
- 只使用 CSS 类选择器。
- 类名可以包含数字但不应该包含特殊字符。
- 使用连字符来分隔单词。
BEM 实体应该是这样的：
/* 块的名字，也是块中元素和修改器的命名空间 */ .block /* 块的命名空间后面紧跟下划线和元素名字 */ .block__element /* 块或者元素的命名空间后紧跟连字符和修改器的名字 */ .block--modifier, .block__element--modifier
为什么要使用 BEM ？
BEM 哲学的提出基于以下几个前提：代码的一致性、代码的伸缩性、代码的可重用性、生产力和团队协作。从 BEM 的哲学出发，不得不说 BEM 是非常好的范例，并且已经在全球范围内被来自大公司（如 Google 和 Twitter）的许多开发者所采用。
如果想要了解关于这个方法论更多的信息，可以阅读这篇文章： CSS Architectures 。
让我们开始吧
当谈到代码的命名规范和代码结构时，不得不提到 BEM。BEM 很简单并且功能完善。然而，当谈论到 CSS 架构时还有另外一点必须考虑，那就是目录结构。于是我们不得不提到另一种架构： ITCSS 。
ITCSS 是由 Harry Roberts 提出的一个方法论，用于创建、管理和衡量大型的 CSS 项目。他曾说：
ITCSS__ 是一种方法论，旨在将整个 __CSS__ 项目可视化为一个分层的倒置三角形。这种分层架构代表了一个模型，可以帮助你以最有效、最节省资源的方式使用 __CSS _。_
本文不会深入探讨这个方法论，不过我们推荐阅读 Harry 的 文章 以掌握其背后蕴含的概念。简而言之，ITCSS 主张以分层的方式组织代码，以 倒三角 的方式组织结构，这样我们就可以在顶层定义通用元素，在底部定义特定元素。
这里的关键在于我们可以使用分层的方式作为一种有效的目录结构来组织代码。在我之前的经验中，我所使用的方法与其提出的原始目的有一点不同，我会用以下的方式对代码进行分层：
- Settings: 基本配置和变量。
- Tools: 函数和 mixins。
- Base: 应用到每一个页面的基本样式。在这里放置 reset/normalize 的代码最好不过了。
- Components: 组成界面的 UI 组件。
- Utilities: 非常具体的规则，这是唯一可以使用!important 的层。