如何优雅的写 CSS —— BEM 规范

前端框架和库一直更新换代非常快,但是 CSS 却是一直没有多大的改变,每次都只是一点点,很难让人不吐槽。看了下别人的文章和代码,感觉自己需要学习的地方还有很多,所以打算做一个系列文章,分别讲一下 BEM 规范,SCSS 和 postCSS,也算是督促自己按照这个套路来写出更优雅的代码。

下面先从 BEM 规范开始讲起。写 CSS 必须要有一个好的规范,否则后续改起来会很麻烦,

继续阅读

webpack 的基本使用方法

webpack 现在几乎是每个前端必会的工具,但是它的一些配置很容易弄晕初学者。经过我不断的学(复制)习(粘贴),终于弄明白了一点,在这里做个总结。

认识

其实以前我是用的 gulp,作为流式构建工具(stream building tools),它仅有几个特定的 API,使用的时候也是很简单,这个以后再写。

刚开始对于 webpack 我也是拒绝的,这么复杂,似乎跟 gulp 没什么区别。后来才发现,其实区别还是很大的。

webpack 是模块化构建系统(module building system),它的作用是把一切资源(js/html/css/jpg)都模块化处理,实现了按需加载。

webpack 也是一个高度可配置的,它有四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。

  • entry: 定义整个编译过程的起点
  • output: 定义整个编译过程的终点
  • module: 定义模块module的处理方式
  • plugin 对编译完成后的内容进行二度加工
  • resolve.alias 定义模块的别名

继续阅读