我佛山人
JavaScript, ESNext, CSS, HTML, Lint, Hint, check, format, fix, beautify, Less
All code in any code-base should look like a single person typed it, no matter how many people contributed. — idiomatic.js
fecs 是以百度前端代码规范为目标的前端代码风格套件,套件包括 htmlcs、csshint、lesslint 和 jformatter,此外还有社区的相关开源模块 cssbeautify、csscomb、fixmyjs 和 esformatter:
Linter |
htmlcs |
csshint |
lesslint |
eslint+ |
Fixer |
htmlcs |
cssbeautify csscomb |
cssbeautify csscomb |
fixmyjs jformatter esformatter |
显而易见,fecs
不仅能检查 HTML/CSS/LESS/JavaScript 代码的规范问题,而且还能修复代码的规范问题。
代码检查
代码的检查,目前主要是以百度前端代码规范(JS/CSS/HTML) 的检查为首要目标,同时根据 EFE 的技术规划,为 Less 代码规范 的检查带来了 lesslint。
阅读全部
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:
- 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。
网上已经有不少对比目前最主流的三个预处理器 Less、Sass 和 Stylus(按字母顺序排名)的文章了,但是似乎都不是很详细,或者内容有些过时。下面我会更详细地探讨一下这三种预处理器的特性和它们的差异。
下面主要会分为如下几方面来讨论:
- 基本语法
- 嵌套语法
- 变量
- @import
- 混入
- 继承
- 函数
- 逻辑控制
事先声明一下,平时我在开发中主要使用的是 Less,所以可能对 Sass 和 Stylus 的熟悉程度稍差一些,比较时主要参考三者官网的语言特性说明,有一些正在开发的功能可能会遗漏。
本文中对 CSS 语法的话术与 MDN 的 CSS 语法介绍一致。
阅读全部