如何为某些出色的前端代码选择合适的前端技术

我们为什么要关心？

外面的世界很疯狂。我们早已告别了只需要一个简单的 HTML 文档和几行 CSS 就能完成工作的时代。技术发展的速度比光速还快，很可能在我写完这篇技巧时，它就已经过时了。

过去，如果我们想快速廉价地上线一些东西，选择是很明显的：PHP，几行（有时是内联的！）JavaScript 和 CSS，我们就这样度过了每一天。好吧，那些日子早已一去不复返了。在我们生活的这个竞争激烈的世界里，选择合适的技术栈代表着生存与在没有太多成果的情况下烧光初创公司的初始资金之间的区别。

了解你的技术栈

在这篇技巧中，我将用非常简单的术语来介绍我们日常前端工作中与 **CSS 相关**的软件栈（JavaScript 框架和 JS 单元测试将是我下一篇文章的一部分），并对定义以下概念及其工具进行一般性分析：

• CSS 预处理器
• CSS 编写
• CSS 重置和标准化
• 网格系统
• CSS 框架
• 包管理器

首先：如何以及从哪里开始？

首先，我要说的是我认为软件开发中最重要的一点：不要过度设计。如果工具存在，并不意味着你必须使用它，甚至知道如何使用。有时，最有效的解决方案是最简单的。如果你不想使用框架，那也没关系，如果你决定用非 Ruby on Rails 的语言做一个 Web 应用，那也没关系！

包管理器

说完这些，让我们先来谈谈包管理器。如果你是第一次听说，包管理器是为了处理构建应用程序时使用的资源。这意味着它会安装、升级、删除和管理这些资源的依赖项。实际的例子有 npm 和 bower，它们可以用来管理 JavaScript 模块，如 browserify、grunt、bower、gulp 等，以及前端组件，如网格系统、CSS 框架、JS 框架等。两者都负责处理下载和保持我们所有前端组件的更新，而这些在不久前还是一个手动任务。

对我来说，前端开发的选择很明显：Bower。它从一开始就针对前端需求构建和优化，通过从 equation 中移除 npm 的嵌套依赖树。它为每个包只保留一个版本，让我们来决定安装哪些版本，并帮助将页面加载时间降至最低。

然而，我并不是说 bower 取代 npm，因为理想的设置是两者的结合。npm 在管理 node.js 模块和设置 Grunt、Gulp 和 Bower 本身等开发工具方面做得很好！

CSS 预处理和编写

CSS 预处理器是处理我们指令集并将其转换为浏览器就绪 CSS 的程序。

今天最广泛使用的是 Sass、Less 和 Stylus。我不会详细比较这三者，因为这就像比较不同品牌的啤酒。尽管它们都是啤酒，但味道不同。我个人更喜欢 Sass，原因如下：

• 语法：变量和 mixin 对熟悉脚本语言表示法的人来说更直观。
• 循环：Less 仅允许通过一种非常不直观且效率低下的自我引用递归来模拟循环。
• 条件：Less 在这方面也让你很头疼，例如它强制你编写守卫 mixin 来进行逻辑比较。

最后但同样重要的是，使用 Sass 使我能够受益于 Compass 的强大功能，Compass 是一个扩展 Sass 的编写框架，它提供了许多非常有用的 mixin 和其他工具，可以自动执行并帮助维护我们的 *.scss* 文件。例如，可以生成 border-radius、box-shadow、image urls 等。有关帮助函数的完整列表，请在此处阅读文档 此处。

除了帮助函数，Compass 还允许我们运行一些方便的命令行工具，例如监视 scss 文件的更改、生成雪碧图以及我最喜欢的用于监控前端性能和复杂性的工具：**compass stats**，它通过提供文件大小、css 选择器数量、属性、mixin 等统计信息来提供我们 scss 和 css 文件的统计信息。如果你想进一步深入研究，请以开放的心态看看其余的工具。

预处理器

• Less
• Stylus
• Turbine
• Switch CSS
• CSS Cacheer
• DT CSS
• CSS PP2

CSS 编写

• Hat (Less)
• Nib (Stylus)

重置还是标准化？

为了消除浏览器默认样式，使我们的用户界面在所有浏览器中看起来尽可能相似，我们可以从以下工具中选择：

• Eric Meyer 的“Reset CSS” 2.0
• HTML5 Doctor CSS Reset
• Yahoo! (YUI 3) Reset CSS
• 通用选择器 ‘*’ 重置
• Normalize.css 1.0

重置样式已经存在很长时间了，它们的主要目标是删除所有内置的浏览器样式，让开发人员能够从头开始设置所有样式，包括标题和段落等。另一方面，标准化追求跨浏览器的兼容性。它旨在保留默认值，同时使它们在不同浏览器之间看起来尽可能接近。然后，我们应该在浏览器已提供的基础上仅添加我们需要的附加样式。

在这两种方法之间，我个人更喜欢 Normalize，因为它比重置样式具有更广泛的范围，尤其是在 HTML5 和移动浏览器方面，它不会剥离 HTML 元素的全部视觉默认样式，并且比任何重置样式都更加文档化。

看待这个问题的另一种方式是问自己：我有一个设计团队会为我提供所有网页设计规范吗？我能做到吗？如果答案是肯定的，那么您可能只应考虑重置方法或根本不使用任何东西，因为无论如何您最终都会更改所有内容。没有设计？没有规范？那么您可能应该接受浏览器的帮助，并在网站的最终外观方面留一些未处理的细节。无论您的选择是什么，请确保您

• 删除 Normalize 和重置样式中包含的所有注释
• 缩小整个文件
• 将其包含在您的主样式表中

这样就可以避免不必要且会造成转换损失的额外网络时间，我们可以从此过上幸福的生活！

框架和网格系统

这可能是近年来前端开发社区编写代码最多的领域。我上次统计所有可在 Google 上搜索到的前端框架时，得到了 53 个不同的结果，以及 30 个独立的网格系统。可以选择的组合数量非常庞大，因此我们必须确保做出正确的选择以扩展我们的项目。

在谈论前端框架时，我采取的方法与 CSS 重置相反。要么我使用一个非常精简的框架，它确实可以节省开发时间并易于扩展，要么我采取 DIY 方法，从一个小的网格系统开始来构建我自己的样式集。

像 Twitter Bootstrap 和 Zurb Foundation 这样最大、最著名的框架非常适合快速原型或不需要特别关注用户界面的后端工具，或者即使在您有一个非常小/经验不足的团队，他们主要会在这些框架之上添加现有的模块和插件的情况下。

小型工具相对于这些大型框架的最大优势在于模块化和对抽象的关注。它不是强制元素应该是什么样的，而是给我们灵活性来加快开发速度，并允许更快地测试新功能。

对我来说有效的方法

• Inuit：提供一套强大的工具，让您能够控制网站/应用程序的所有设计元素，而不会丢失基本助手和模块。
• 960 Grid System：尽管这个网格系统已经存在很久了，但它仍然适用于简单小型网站，主要是通过其流体版本。
• Unsemantic：可以看作是 960gs 的后继者，主要优点是完全基于百分比。
• Susy：由 Compass 的核心开发者之一 Eric M Suzanne 提供，它是一个非常易于使用且敏捷的工具，它不会碍事，并提供了一个非常简短直观的语法，以及大量的 SASS 助手，使我们能够自由灵活地设置自己的框架。

对我来说无效的方法

• Foundation：我密切关注 Foundation 的发展，因为我是 Zurb 作品的忠实粉丝，但在将它用于几个项目后，一旦我需要脱离框架提供的功能，JavaScript 冲突就开始出现。从更个人的设计品味来看，我从未使用过框架默认提供的任何 UI 元素，而没有进行一些严重的定制。另一个原因是，总的来说，Foundation 的样式比 Twitter Bootstrap 要冗长得多，这使得页面看起来有点混乱。
• Bootstrap：虽然它有一个很棒的工具集，并且在这方面明显优于 Foundation，但 Bootstrap 使用 LESS 预处理器，这对于我上面指出的所有原因来说都是一个大禁忌。

天哪，我累了！