背景介绍：当我们在从事大项目或团队开发工作时，我们经常会发现我们写的代码，凌乱、难以阅读并且难以扩展。尤其是当一段时候后我们回头再看自己的代码，必须回想起当初自己写的时候的思路才能看懂。因此，人们尝试在代码风格上保持统一，然而，最大的困难是：修改一个较小的问题，都可能创建更多丑陋的 hack，也可能 CSS 的小改变会影响 JavaScript 的功能。但是这些问题能在我们的项目开始的时候精心规划，就能很大程度上避免这些问题。今天就来讨论一下如何写一份不错的CSS代码

一个好的css代码是什么样的呢

• 保持样式表可维护
• 保持代码可读性
• 保持样式表的可扩展性

要保持良好的CSS代码，首先需要订立一致的CSS团队规范，这就必须从CSS架构讲起。

CSS架构

目前CSS主要有以下五种设计架构

1. OOCSS

面向对象的CSS，

• 结构和主题分离 – 减少对 HTML 结构的依赖
• 主题和主题分离 – 增加样式的复用性

在OOCSS的基础上，出现了另一种设计模式

2. BEM

也可以被当成一种命名规范，本质上使页面结构清晰

块（Block）、元素（Element__）、修饰符（Modifier–）

有以下几个规则

• Block元素应该以元素本身的属性为主
• Element则以元素位置和形状为主
• Modifier则修饰当前的状态和主题
• Element一定是在Block之中，而不能独立于Block之外
• Modifier则更多的表示当前组件的形状和状态

可以明显发现

• 结构清晰
• 定位迅速
• 功能明确

在面对组件化的场景时，Block 代表逻辑上和功能上独立的页面组件。Element封装了行为(JavaScript)、模板、样式(CSS)和其他实现技术。

举个例子

class="header"