1 min read

Adobe Brackets 与 CSS DRY 原则

在后端程序里,随处可见强调 DRY(don’t repeat youself) 原则,我想前端开发中也不应该例外。

一个样式类,在 CSS 文件中多处出现,就会造成后期修改的困难。谁也不能保证,我多处都做好修改。但如果我们只定义一次,就很容易确信,我们已经修改好了。

那么,我们又如何确定自己只定义了一次?

快速编辑

Adobe Brackets 的 Quick Edit(快速编辑样式) 工具可以很好地帮助解决这个问题。

在 Brackets 中,打开 HTML 文件,光标定位到类名位置,然后按 Ctrl-E 快捷键,就会在当前 HTML 编辑窗口内调出快速样式编辑面板:

adobe brackets 快速编辑

面板分左右两列,左列显示样式规则,右列显示所有定义有该样式的 CSS 文件名称、代码位置。

比如上图中,我定义了一个 .rom-comment-num 的类,该类出现在 main.css 样式文件中,并且出现了两次。当类出现在许多样式文件中,或者在一个样式文件中出现多处,我们就要认真考虑一下,我们是否正在违背 DRY 原则,正在给我们的后期维护制造困难。

妙用

上面我们已经知道快速编辑样式怎么用,这样,从中就能延展出一个不错的用处。

当我们给 CSS 类命名时,即便有一定的规范在,我们也会担心,这个命名是不是已经被定义过了?毕竟,页面一多,参与开发的人一多,谁也不好保证这种问题。这时按快捷键 Ctrl-E,如果没能调出快速编辑面板,则该类名还没有被用过,我们可以放心使用。当然,Firebug 之类的网页调试工具也可以达到这种功能,但毕竟不如在编辑器中确认来得方便。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo