今天完成的事：

完成了第一个页面，学习如何做默认样式重置？

明天计划的事：

插入侧边栏，完成第二个页面。

遇到的问题：

暂无

收获：

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

总是类名优先 

组件代码放在一起

使用一致的类命名空间 

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

避免组件外的样式泄露 

避免组件内的样式泄露 

遵守组件边界 

松散地整合外部样式

怎样才能被称为健壮且可扩展呢？

• 面向组件 - 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件。如果你正在使用一个合理的框架，JavaScript 方面就将原生支持（组件化）。举个例子，React 就鼓励高度组件化和分割。我们希望有一个 CSS 架构去匹配。
• 
  
• 沙箱化（Sandboxed） - 如果一个组件的样式会对其他组件产生不必要以及意想不到的影响，那么将 UI 分割成组件并不会对我们的认知负荷起到帮助作用。就这方面而言，CSS的基本功能，如层叠（cascade）以及一个针对标识符的独立全局命名空间，都会给你造成负担。如果你熟悉 Web 组件规范的话，那么就可以认为它（此架构）有着 Shadow DOM 的样式隔离好处 ，而无需关心浏览器支持（或者规范是否经过严格的推敲）。
• 
  
• 方便 - 我们想要所有好的东西，并且还不想因它们而产生更多的工作。也就是说，我们不想因为采用这个架构而让我们的开发者体验变得更糟。可能的话，我们想（开发者体验）变得更好。
• 
  
• 安全性错误 - 结合之前的一点，我们想要所有东西都可以默认局部化，并且全局化只是一个特例。