写 SCSS 代码应该遵循的原则


KISS – Keep It Simple Stupid

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
– Martin Golding

keep sass simple,不要写过度抽象,不要用复杂的语法实现简单的功能。实际上 css 文件不需要很复杂。有了预编译以后,稍不注意就产生过多的层级、巨复杂的选择器了。还有滥用函数,一点点重复都抽象出来。

正确的做法是有逻辑关联的样式才合并到一起。语义上有继承关系的样式,才使用继承。相关的代码不要分散到几百行之外。

DRY – Don’t Repeat Yourself

scss 的变量,extend,mixin 就是为了做这个的。mixin 会生成重复的代码,但是符合 Single source of truth 原则。DRY 不是不让重复(don’t repeat)而是为了保证源头只有一个,源代码只出现在一处,一次修改自动同步到所有的CSS文件。CSS中,机器自动复制出来的的重复,不破坏 DRY 原则。

参考资料:

Single source of truth https://en.wikipedia.org/wiki/Single_source_of_truth
DRY Don’t repeat yourself https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
KISS https://en.wikipedia.org/wiki/KISS_principle
Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live

学这些名词有什么用?这些简洁的词,有公认的含义。跟别人交流的时候,提到这个词就明白对方在说什么。就像是成语一样,方便交流。