编程不仅要考虑电脑，还要考虑团队里的其他成员。掌握好浏览器如何渲染CSS是很重要的，了解如何在项目中编写和组织CSS也很重要。本部分（第9章和第10章）将会展示如何组织CSS代码，使其容易理解和维护。
本章内容
- 项目规模持续增长时暴露出来的问题
- 使用模块组织CSS代码
- 避免提升选择器的优先级
- 调研流行的CSS方法论
在第一部分和第二部分，我们明白了CSS的一些晦涩难懂的概念，掌握了元素在页面中编排的方式。我们也了解了盒模型、外边距叠加、层叠上下文、浮动和弹性布局。这些技术对于新建项目尤其重要。然而，在实际的软件开发过程中，我们的时间和精力不仅用在写新代码上，还要用于持续更新和维护现有代码。对于CSS来说，这就带来了一堆新问题。
修改旧样式的时候，受影响的页面和元素有可能是不确定的。有个老笑话是这么说的：两个CSS属性走进了一间酒吧，结果另一间酒吧里的高脚凳摔倒了。问题就来了：要怎么确保修改后的影响范围和预期一致呢？怎样才能不影响我们不想修改的那些元素？
本部分将讨论这些问题。我们会谈到CSS架构，不会涉及太多具体样式的书写，而是更多地关注CSS选择器和匹配到的HTML元素。如何组织代码结构，决定了后续能否安全地修改代码，不会有一些多余的副作用。我们从理解模块化CSS开始，这是本章的重点。
模块化CSS是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文环境中重复使用，并且互相之间没有依赖关系。最终目的是，当我们修改其中一部分的CSS时，不会对其他部分产生不可预知的影响。
这跟组合家具的原理类似。举个例子，宜家厨房不是建造一个大型的橱柜单元，而是设计成各种独立的小件，让顾客可以任选购买。这些小件看上去风格一致，组合起来也会很和谐。这样一来，顾客就可以在布置的时候把这些小件随意摆放到自己喜欢的位置。模块化CSS也是这样，不是直接编写一个大型网页，而是以特殊的方式编写页面的每个组成部分，然后按你需要的效果组合在一起。
在计算机科学中，编写模块化代码并不是什么新潮的做法，但开发人员近几年才开始将其引入到CSS。随着现代网站和Web应用体量越来越大、越来越复杂，我们不得不探寻一些方法来管理日益庞大繁杂的样式表。
之前的样式表可以使用选择器在页面上随意修改，模块化的样式则允许开发人员添加一些限制。我们把样式表的每个组成部分称为模块，每个模块独立负责自己的样式，不可以影响其他模块内的样式，即在CSS里引入了软件封装的原则。
封装——相关的函数和数据集合在一起组成对象，通常用来隐藏结构化对象内部的状态或值，从而使外部因素不能操作内部。
CSS中没有数据和传统函数的概念，但是有选择器和被选择器规则命中的页面元素。为了达到封装的目的，选择器和那些选中的元素将会成为模块的组成部分，并且每个模块都只负责很少数量的DOM元素的样式。
有了封装的思想，我们就可以为页面上那些彼此分立的组件来定义模块了，像导航菜单、对话框、进度条、缩略图，等等。每个模块可以通过为DOM元素设置一个独一无二的的类名来识别。同时，每个模块包含一系列子元素构建成页面上的组件。模块内部可以嵌套其他模块，最终构成完整的页面。
开始写模块化样式之前，需要先配置好环境。每个样式表的开头都要写一些给整个页面使用的通用规则，模块化CSS也不例外。这些规则样式通常被称为基础样式，其他的样式都是构建在这些基础样式之上的。基础样式本身并不是模块化的，但它会为后面编写模块化样式打好基础。
新建一个网页和一个样式表，把下列清单中的基础样式粘贴到CSS中。这里的清单只是列举了你可能用到的一些基础样式。
清单9.1 添加基础样式
[P235 代码清单一]
Box sizing reset(chapter 3) 重置盒模型计算规则（详见第3章）
Default font size for the page 设置页面默认使用的字体 [To编辑：原文是font size，但是这句CSS里的font-family并不是用来设置字体大小的，只是用来设置字体，故翻译时忽略了size]
其他常用的基础样式还包括链接的颜色、标题的样式、外间距等。<body>标签默认有很小的外间距，你可能会考虑将它的外间距去掉。根据项目的实际情况，你也可能想为表单字段、表格和列表等添加一些样式。
小技巧
这里推荐一个叫normalize.css的库，这个小样式表可以协助消除不同的客户端浏览器渲染上的不一致。可以从https://necolas.github.io/normalize.css/下载，然后添加到自己的样式表前面作为基础样式的一部分。
基础样式应该确保是通用的，只添加那些影响到页面上大部分或者全部内容的样式。选择器不应该使用类名或者ID来匹配元素，只用标签类型或者偶尔用用伪类选择器。核心思想是这些基础样式提供了一些默认的渲染效果，但是后续又可以很方便地根据实际需要去覆盖样式。
基础样式配置完成以后，一般不会再修改。我们会在基础样式的稳定表现之上，去构建模块化CSS。样式表中，基础样式后面的内容将主要由各种模块组成。
下面我们来创建一个短消息通知的模块。因为每个模块都需要取一个独一无二的名字，所以我们把这个模块叫作message。为了更好地吸引用户的注意，可以加上一些颜色和边框效果（如图9.1）。
[p235 图一]
图9.1 消息通知模块
这个模块使用一个类名为message的div作为标签。添加下面的代码到网页中：
清单9.2 为消息通知模块添加标记
[p236 代码清单一]
后续待翻译...