今天完成的事情

1. 完成了任务13
2. 学习了CSS架构的相关知识

明天计划的事情

1. 开始任务14
2. 继续学习JavaScript

遇到的问题

任务13中的侧边导航栏问题，利用类似于轮播图的处理方式，将侧边导航栏与主题部分并排成一行，利用负值margin来控制导航栏的隐藏与显示。

收获

什么是SMACSS？

SMACSS —— Scalable and Modular Architechture for CSS(CSS可扩展和模块化结构体系)

参考SMACSS中推荐的规则，推荐使用7种类别的规则集

• Base styles
• Objects
• Components
• State
• Themes
• Utilities
• Javascript hooks

基本样式

基本样式是未默认元素而创建，是跨站点之间的默认样式。一般而言，这些覆盖到字体、盒子大小及其为兼容其他浏览器而规范化的一些等。

示例：

body, form {margin: 0;padding: 0; }

a {color: #039; }

a:hover {color: #03F; }

对象

对象就是专注于结构与布局方面的规则。旨在重新使用常用的结构或布局模式。

组件

组件是各自不相关，自身包含的一块UI。它是原子设计的面包和黄油，将占据大部分的样式。组件可以小到一个按钮，大到一个幻灯片（carousel）。构建强大组件的关键在于须独立于其他组件且自身包含。可以将某个组件放到页面的任何地方，而它将保持原有的设计及其结构。

状态

状态类是一个工具类，用来修改某组件的状态。试想手风琴(Accorditions)被打开或是合并的状态，这反应其启动与禁用的状态，或是元素被隐藏或是显示的状态。通常是用JavaScript来添加/删除状态。与其可用JavaScript来操作状态，你可以更新一个状态类，允许其样式决定每个状态的显示。

主题

主题类只是简单的改变特定颜色、主题或其他进行装饰。主题类可以用于修改整个页面，也可以只是单一的组件。主题并非用于所有项目，但当你需要它是却是非常管用。

公共程序

公共程序类是应用于一个特殊样式规则的单一用途助手。它们可以用于调整间距、增大字体、文字居中、清空调整、隐藏等等。公共类可以帮助你简化布局调整，比如在组件之间增加空间或者清空浮板。它们也可以用来改变已有的组件，而不需要创建一个新的组件实例。

BEM(Block,Element,Modifier) 命名

BEM 相对来说就比较有名了，简单的说，就是通过遵循一套严格但合理的命名规范使得你的 class 保持一个较好的可读性和维护性。 好处也很明显，方便合作开发，别人容易读得懂你的代码，你也容易维护好你的样式。这个就直接上例子了：

格式：

任务13大体的架构：

对于任务13的三个页面，均采用了首尾/首部固定的形式。

采用了类似于BEM命名方式的命名方法

1. 将页面中要使用的颜色和字体大小全部作为变量统一写在less文件的头部中。

2. 对常用的图形，作为一个组件，比如圆形，三角形等，结合less中的Mixin使用。

3. 对于常用的<按钮><文字><按钮>此类布局的页眉，可以作为一个组件来编写。

总的来说，抽取组件就是为了要提高代码的复用性。