这篇笔记的来源是和一个正在学习前端的人聊天衍生出来的。他说他并没有将太多时间花在 CSS 的学习上，理由是有 bootstrap 就够了。

但是我个人看法却很不一样，也不能说对错，只是一个看法而已。

首先要了解 bootstrap 适合在什么场景使用。

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

这是 bootstrap 的官网对 bootstrap 的描述。“所有开发者”意味着包括非前端，既然非前端都能够快速上手，那前端开发者使用 bootstrap 的优势在哪里？答案是 bootstrap 并不是给前端开发者使用的，或者说，打开方式错误。

在平常学习的时候，会需要写一些 demo，想要用到 gulp 来方便开发、调试，但是每次都复制一份gulpfile.js很麻烦，所以先写好一个符合自己技术栈的脚手架，放在 github 上，借助 vue-cli 来简化初始化项目的操作。

“Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

现在写样式，基本都会用到预处理器，将页面样式按照模块/组件进行划分，比如header.scss、footer.scss，或者像 bootstrap 每一个组件单独写一个文件，比如forms.less、navs.less、navbar.less等，在一个主文件bootstrap.less中将所有的文件引入，最后编译。这应该是大多数人对 CSS 组件化开发的理解，一开始我也是这么想，直到在复习 sass 时看到有“默认变量”这样一个东西存在。