今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

看了一下css的架构的相关规则，做了一下参考，因为是做css的重构，很多知识都是重复的，所以看了些新的东西，理解的不深。

一个健壮且可扩展的 CSS 架构所需的8个简单规则

面向组件 - 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件。如果你正在使用一个合理的框架，

JavaScript 方面就将原生支持（组件化）。举个例子，React 就鼓励高度组件化和分割。我们希望有一个 CSS 架构去匹配。

具体规则：

1.类名优先

不要去使用 ID 选择器

2. 组件代码放在一起

当使用一个组件的时候，如果所有和组件相关的资源（其 JavaScript 代码，样式，测试用例，文档等等）都可以非常紧密地放在一起，那就更好了：

3. 使用一致的类命名空间

CSS 对类名及其他标识符（如 ID、动画名称等）都有一个独立扁平的命名空间。

myapp-Header-link 来当做一个类名，组成它的三个部分都有着特定的功能：

• myapp 首先用来将我们的应用和其他可能运行在同一个 DOM 上的应用隔离开来
• Header 用来将组件和应用里其他的组件隔离开来
• link 用来为局部样式效果保存一个局部名称（在组件的命名空间内）

不管我们选择怎样的命名空间规范，我们都想要通过它保持一致性。那三个类名组成部分除了有着特定功能，也同样有着特定的含义。只需要看一下类名，就可以知道它属于哪里了。这样的命名空间将成为我们浏览项目样式的地图。

命名规则：

目前为止我都假设命名空间的方案为 app-Component-class

4. 维护命名空间和文件名之间的严格映射

这只是对之前两条规则的逻辑组合（组件代码放在一起以及类命名空间）：

所有影响一个特定组件的样式都应该放到一个文件里，并以组件命名，没有例外。

5. 避免组件外的样式泄露

我们已经建立了自己的命名空间规范，并且现在想使用它们去沙箱化我们的 UI 组件。

如果每个组件都只使用加上它们唯一的命名空间前缀的类名，那我们就可以确定它们的样式不会泄露到其他组件中去。

这是非常高效的（看后面的注意事项），但是不得不反复输入命名空间也会变得越来越冗长乏味。

BEM命名：

BEM代表块（Block），元素（Element），修饰符（Modifier）。

除了我们自己创建的一些块之外 ，我们还需要一种途径来描述页面上那些纯文本的布局。为此，每一个块和元素都应该有一个可以识别的关键字。

用来标识一个具体块的关键字其实就是这个块的名字（block name）。

例如，menu可以作为Menu块的关键字，head可以作为Head块的关键字。

用来标识一个元素的关键字也是这个元素的名字。

例如，菜单中的每个菜单项就是menu块的item元素。

一个项目中的块名必须是唯一的，明确指出它所描述的是哪个块。相同块的实例可以有相同的名字。在这种情况下一个块在一个页面上可以出现2（3，4，……）次。

一个块范围内的一种元素的名字也必须是唯一的。一种元素可以重复出现多次。

块的独立性

随着一个项目的发展，我们常常会在页面中添加，删除，或者是移动一些块。例如，你可能想要互换Logo和Auth块，或者把Menu放到Search块下面。

为了让这个过程更加简化，块必须是独立的。

从CSS的角度来看：

一个块（或者一个元素）必须有一个唯一的“名字”（一个CSS类）这样才能被CSS规则所作用。

HTML元素不能用作CSS选择器（如.menu td）因为这样的选择器并非是完全上下文无关的。

•  避免使用级联（cascading）选择器（译注：如.menu .item）。

为独立的CSS类命名

明天计划的事情：（一定要写非常细致的内容） 
进行任务13

遇到的问题：（遇到什么困难，怎么解决的）

 暂无
收获：（通过今天的学习，学到了什么知识）

知道了如何命名，感觉命名挺麻烦的