写 SCSS 代码应该遵循的原则_html/css_WEB-ITnose
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学这些名词有什么用?这些简洁的词,有公认的含义。跟别人交流的时候,提到这个词就明白对方在说什么。就像是成语一样,方便交流。
推荐阅读
-
【江湖百晓生】我写的js代码,在火狐下不兼容,跪求兼容方法很简单的问题_html/css_WEB-ITnose
-
【江湖百晓生】我写的js代码,在火狐下不兼容,跪求兼容方法很简单的问题_html/css_WEB-ITnose
-
为什么我照着w3school上的代码写的,结果却不同?_html/css_WEB-ITnose
-
为什么我照着w3school上的代码写的,结果却不同?_html/css_WEB-ITnose
-
webapp的favicon应该怎样组织代码_html/css_WEB-ITnose
-
在html 4中写的代码,在html 5中能用吗?_html/css_WEB-ITnose
-
html5遵循的6个设计原则_html/css_WEB-ITnose
-
高手求教请问下做一个4行3列的表格不用TABLE如何用ul li代码写_html/css_WEB-ITnose
-
写 SCSS 代码应该遵循的原则_html/css_WEB-ITnose
-
一段div css代码, 让页面中的两个div左右排列。 如果不使用float应该怎么实现?_html/css_WEB-ITnose