今天完成的事情：

（1）在师兄的指导下完成任务13

（2）学习css模块化：传统的开发为了页面上比较好的性能，减少创建http请求的消耗，我们一般会选择尽量减少link的css文件数量，页面上所有的样式都写在一个style.css里面。可想而知对于一个大型网站来讲，这个文件会有多长。如果出现bug或者想改个东西，需要的成本会比较大，很多时候，前端为了加快进度，可能会把某一个功能的代码放在css不同的地方，如果想去掉某个功能，肯定不敢轻易删除页面css代码。

这时候，CSS模块化的优势就体现出来了！

1、模块化开发：我们把style.css中混乱的样式划分成了一个一个的子文件，作为模块

2、浏览器原生支持

3、方便删除某个模块

4、便于管理各种日常需求

5、方便合作开发，方便多人协作

6、SASS 的文件结构

由于 SASS 的预处理特性，我们可以把模块单独放到一个文件里面，使用文件夹来分类，更加方便管理，以下是一份比较完整的 SASS 文件结构组织：

sass/ 

| 

|– base/ 

|   |– _reset.scss       # Reset/normalize 

|   |– _typography.scss  # Typography rules 

|   ...                  # Etc… 

| 

|– components/ 

|   |– _buttons.scss     # Buttons 

|   |– _carousel.scss    # Carousel 

|   |– _cover.scss       # Cover 

|   |– _dropdown.scss    # Dropdown 

|   |– _navigation.scss  # Navigation 

|   ...                  # Etc… 

| 

|– helpers/ 

|   |– _variables.scss   # Sass Variables 

|   |– _functions.scss   # Sass Functions 

|   |– _mixins.scss      # Sass Mixins 

|   |– _helpers.scss     # Class & placeholders helpers 

|   ...                  # Etc… 

| 

|– layout/ 

|   |– _grid.scss        # Grid system 

|   |– _header.scss      # Header 

|   |– _footer.scss      # Footer 

|   |– _sidebar.scss     # Sidebar 

|   |– _forms.scss       # Forms 

|   ...                  # Etc… 

| 

|– pages/ 

|   |– _home.scss        # Home specific styles 

|   |– _contact.scss     # Contact specific styles 

|   ...                  # Etc… 

| 

|– themes/ 

|   |– _theme.scss       # Default theme 

|   |– _admin.scss       # Admin theme 

|   ...                  # Etc… 

| 

|– vendors/ 

|   |– _bootstrap.scss   # Bootstrap 

|   |– _jquery-ui.scss   # jQuery UI 

|   ...                  # Etc… 

| 

| 

`– main.scss             # primary Sass file

明天计划的事情：

编写任务14

遇到的问题：

收获：

了解什么是css模块化和模块化的优势。