与现代 MVC 项目一起使用的五种必备前端工具
VS 2012 的 Web 模板预装了标准的**前端库**。本文旨在补充更多适用于现代面向公众的 MVC 和 Webform 项目的必备且高效的库。
微软在 Visual Studio 2012 的“ASP.NET MVC 4 Web Application”和“ASP.NET Web Forms Application”模板中预装标准**前端库**方面做得很好，这提高了 .NET Web 开发人员的门槛。
VS 模板是一个很好的起点，但我一直在为每个新的 Web 项目添加本文中提到的库，它们是对 VS 自带库的补充，我想与大家分享。
1 – CSS 标准化器
我们过去面临的一个常见问题是每个浏览器都有不同的默认设置。如果您不明确设置元素的样式（标签），它在不同浏览器中的显示可能不同。
上图显示了重置前后代码的对比
<abbr title="Title text">abbr</abbr> has an underline in FF.
今天，事实上的 CSS 重置工具是 Normalize.css，它比我上面的演示更能解决跨浏览器差异。引用作者的话：“Normalize.css 使浏览器能够更一致地渲染所有元素，并符合现代标准。它精确地只针对需要标准化的样式。”
注意 Normalize 是用来替代“CSS Reset”的，所以，永远不要称它为“Reset”，否则你会被指责不酷！
网站：http://necolas.github.io/normalize.css/
Nuget：PM> Install-Package normalize.css
CDN：http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css
2 – 旧版 IE 浏览器的 HTML5 支持
令人遗憾的是，IE 9 及更早版本无法识别 <nav> 等新的 HTML5 元素。但是，别担心，html5shiv 来拯救你了。你可以像这样将其放在文档的 <head> 部分：
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
如果您正在使用 Modernizr，那么它已经包含了 html5shiv，您不需要单独引用它，除非您下载了一个自定义版本的 Modernizr。VS 2012 Web 模板自带的 Modernizr 已经包含了 html5shiv。
网站：https://code.google.com/p/html5shiv/
Nuget：PM> Install-Package html5shiv
CDN：http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js
3 – CSS 生成器
CSS 必须维护向后兼容性，它不能破坏 Web。CSS 是冗余的，不符合 DRY（Don't Repeat Yourself）原则。
LESS 和 SASS 是两个流行的 CSS 生成器，它们使用更现代的语言，编译后会生成纯 CSS。
关于 LESS、SASS 哪个更好，或者是否应该使用生成器，网络上存在分歧。我个人倾向于 LESS 生成器，因为它易于学习，并且弥补了 CSS 的不足，例如缺乏变量，而不是用全新的语法来替代它。这是一个简单的例子，可以让您领略 LESS 的风格：
// LESS
@baseColor: #4D926F;
#header {
color: @baseColor;
background-color: lighten(@baseColor, 20%);
}
h2 {
color: @baseColor;
background-color: darken(@baseColor, 20%);
}
这会编译成以下 CSS：
/* Compiled CSS */
#header {
color: #4d926f;
background-color: #86bfa2;
}
h2 {
color: #4d926f;
background-color: #2a4f3c;
}
我使用这个出色的 Visual Studio 2012 插件，在我保存的时候就会将 LESS 编译成 CSS：Web Essentials 2012。您也可以用它来编译 SASS，但我从未尝试过用它编译 SASS。
网站：http://lesscss.org/ & https://sass-lang.cn/。这些网站包含很好的教程，可以帮助您快速上手。
在线 LESS 编译器（用于学习目的）：http://winless.org/online-less-compiler。
4 – 图标字体
Web 开发领域最近开始了一个新趋势，那就是使用字体来表示图标（好吧，我说开始，但 Webdings 早在 1997 年就出现了）。图标是矢量图形，这意味着它们可以很好地缩放到任何尺寸，并在任何平台上（理论上）显示，例如移动平台。它们对于菜单、按钮、表单以及任何您想用小图标打破文本沉闷感的地方都非常有用。它们可以加快您的网站和设计过程。
有很多图标字体，随便谷歌一下即可，我最喜欢的是 Font Awesome，这里有一个使用它的例子：
网站：http://fortawesome.github.io/Font-Awesome/
Nuget：PM> Install-Package FontAwesome
5 – CSS 框架
如果您读到这里，那么恭喜您，这里是能为您节省时间并让您更快交付的终极库。
CSS 框架旨在帮助您快速完成新网站启动时经常需要做的基础工作。例如 CSS 标准化（参见本文第 1 点）、设置内边距和外边距、表单设计、使您的网站响应式（在调整到移动设备和平板设备时能够良好地响应）、动画、酷炫的按钮、模态对话框、图标字体（参见本文第 4 点），它们依赖于 CSS 生成器（参见本文第 3 点）、现代警报等等！
有数百种 CSS 框架，有些是通用的，有些则专注于特定领域（例如更具响应性或具有移动设备的特殊功能），排名前两位的竞争者是 Twitter Bootstrap 和 Zurb Foundation。两者之间的全面比较超出了本文的范围（谷歌搜索“Bootstrap vs Foundation”尽情享用），以下是一些要点：
- Twitter Bootstrap 因其品牌和插件数量而更受欢迎。
- Zurb Foundation 拥有更好的布局网格，但是，在撰写本文时，Bootstrap 正在为 3.0 版本准备新的网格，目前该版本处于 Beta 测试阶段。
- Bootstrap 使用 LESS（参见第 3 点）。
- Foundation 使用 SASS。
- 两者都使用 CSS3 和 jQuery。
- 虽然您不能对它们进行一一对比，但使用其中一个将无需使用 jQuery UI（我指的是 jQuery UI 而不是 jQuery）。
您甚至可以找到基于这两个框架的免费和商业模板，它们绝对可以为您节省更多时间，特别是当项目预算较低和/或用于内部网时。这是一个流行的 Bootstrap 模板网站 {wrap}bootstrap。
关于 CSS 框架还有很多话要说，但本文的重点是引起您的兴趣，而不是作为教程或参考。
网站：http://twitter.github.io/bootstrap/ & http://foundation.zurb.com/
Nuget：PM> Install-Package Twitter.Bootstrap.Less & PM> Install-Package Foundation4.MVC4
结论
DRY“不要重复造轮子”是我通过本文想要传达的要点。我希望我至少介绍了一个您不知道的库，并且希望这能让您开心，请随时在评论中提及您认为缺失的其他库。