我的 BD Conf 研讨会笔记

就在几天前，我在 德克萨斯州达拉斯举行的 BD Conf 上做了一个为期四小时的研讨会。我想把研讨会的笔记整理一下，发给参加者。我也认为公开发布这些笔记可能会对大家有所帮助。如果你没有参加研讨会，其中一些内容可能不太容易理解，但这就是参加这些活动的巨大优势！

我们从一个完全空的文件夹开始。没有框架，没有起始代码，完全从头开始。我们在文件夹内创建了一个简单的结构：index.html 和 css、js 和 images 文件夹。

我们将这个项目文件夹添加到 CodeKit 中，并演示了当您更改 HTML 中的内容时，浏览器会自动刷新以显示该更改。这是 CodeKit 完成的，不需要任何其他特殊操作。我们使用的是普通的 Chrome 浏览器（Safari 也适用），文本编辑器是 Sublime Text 2（可以使用任何文本编辑器）。

---

我们从 Subtle Patterns 中添加了一些纹理。

---

当我们编辑 CSS 时，我们观察到样式更改“注入”自身而无需页面刷新。我们讨论了在状态应用程序中，这尤其有用。想象一个 Web 应用程序，需要点击几次才能进入特定状态（打开对话框、打开下拉菜单）。刷新会关闭这些内容，但使用样式注入，您可以避免这种担忧地为其设置样式。

我们立即让我们的项目使用 Sass。在我们的例子中，使用了 Sass 的 .scss 变体，它看起来非常像带大括号的普通 CSS。除了“css”文件夹之外，我们还创建了一个“scss”文件夹，CodeKit 知道在我们保存文件时将我们的“style.scss”编译成“style.css”。样式注入仍然有效。

---

我们开始为项目构建网格。即使像具有侧边栏的布局这样的东西本质上也是一个网格。我们没有使用花哨的框架，而是 不考虑过度设计 并创建我们自己的网格。

我们立即将网格内容分离到我们 scss 文件夹中名为 _grid.scss 的文件中。这是一个命名约定，表示此文件将包含在其他文件中，并且不会直接编译。

我们的网格“框架”就像将元素以百分比比例向左浮动一样简单。例如，宽度为 66.66% 的元素旁边是宽度为 33.33% 的元素。或者四个宽度为 25% 的元素。我们通过类名（如 grid-2-3 或 grid-1-4）来设置这些元素。

我们使用了 clearfix 类，以便网格不会折叠为零高度。

边距通过向网格本身添加左侧填充，然后向每个列添加右侧填充来处理。最初，这破坏了网格，直到我们添加了 box-sizing border-box 通用属性。这意味着填充将来自我们设置的宽度而不是添加到它，从而立即解决了问题。

---

在列就位后，我们将我们的内容集分成模块。模块的样式来自我们创建的另一个名为 _modules.scss 的样式表，该样式表导入到全局样式表中。趋势是将分组样式分解成单独的样式表，以便于组织。Sublime Text 2 的“Command-T”功能使您在知道需要时轻松跳转到这些文件。

---

当我们添加 border-box 属性时，我们只使用了非供应商前缀版本，但实际上，我们需要使用一些供应商前缀才能获得最佳的浏览器支持。每当我们想到供应商前缀时，我们就会想到“**我们应该创建一个 @mixin！**”，每当我们想到这一点时，我们就会想到“**我的意思是使用 Compass！**”。

我们通过 CodeKit 将 Compass 添加到项目中，指定我们设置的文件夹名称。没有什么真正改变，只是现在我们可以在全局样式表中使用 @import "compass/css3"; 并使用所有 Compass CSS3 @mixin。在我们的例子中，我们使用了 @include box-sizing(border-box);

---

转换方向，我们将徽标添加到网站。这是一个简单的单色徽标，因此我们决定 SVG 是最佳选择。因为：1) SVG 文件将非常小 2) 它在任何屏幕尺寸下都非常清晰 3) 浏览器支持非常好，但并不完美。

使用 SVG 非常非常简单。您可以像使用 .jpg 或 .png 一样使用它：<img src="logo.svg" alt="logo"> 或 background: url(logo.svg);

您可以直接从 Adobe Illustrator 中保存 SVG。就像您将文件保存为 .ai 一样，您可以将其保存为 .svg。

有一些浏览器不支持 SVG。我们查看了 CanIUse.com 以了解支持级别。对于当前浏览器来说，它都是绿色的，但 IE 8 及以下版本不支持它。我们还打开了 BrowserStack 并在运行 Android 的三星 Galaxy Tab 8.9 模拟器中打开该网站，但 SVG 在那里不起作用。

我们能够在 BrowserStack 上打开我们的本地网站，因为我们通过 MAMP 为其创建了一个真正的本地域名，然后使用其本地隧道功能。

我们决定想要支持这些旧版浏览器，因此我们制作了徽标的 .png 版本。然后我们需要测试 SVG 在任何给定浏览器中的支持情况，因此我们构建了 Modernizr 的自定义版本来运行该文本。现在我们可以只执行 if (Modernizr.svg) { } else { } 来处理支持或不支持的情况。

我们通过 ScriptSrc 快速获取脚本标签，从而将 jQuery 插入页面。

对于我们的不支持 SVG 的情况，我们只需使用 jQuery 针对徽标，并使用 .css() 方法将 background-image 更改为指向 .png 文件而不是 .svg 文件。我们在 BrowserStack 中对其进行了测试，效果很好。

---

再次转换方向，我们在网格布局中的主要内容区域中添加了一些媒体。我们添加了一个 YouTube 视频和一张 Flickr 照片，两者都使用了这些服务提供的复制粘贴代码（就像内容创建者可能会做的那样）。它们在我们的流体布局中都存在立即问题（是的，我们的布局完全是流体的，到目前为止我们只使用了百分比。请记住，Web 始终是流体的，直到您通过设置非百分比宽度来专门破坏此功能）。

为了使媒体流体化，我们基本上将 max-width 设置为 100%，并使用 auto 覆盖任何设置的高度。这对图像效果很好，但对视频无效。YouTube 视频以 iframe 形式出现，它们不像图像那样具有纵横比的概念。我们编写了一些额外的标记和 CSS 来处理这种情况，基本上遵循 视频的内在比率模型。

这个概念很好，但所需的额外标记使得它对大多数网站（包括我自己的网站）来说都不实用，因此我们在网站上实现了 FitVids.js。FitVids 所做的只是自动化我们刚刚学习的 CSS 方法。FitVids 需要 jQuery 才能工作，但由于我们之前进行了 SVG 交换，因此我们已经有了它。

我们开始遇到加载了太多脚本的问题。我们讨论了性能应该成为工作流程的一部分。减少加载的资源数量是性能的重要组成部分，因此我们采取了一些措施来缩小和连接脚本。我们实际上已经通过 @import 对 CSS 进行了此操作。我们通过 CodeKit 的功能（在缩小脚本的同时将脚本附加/预先附加到彼此）对 JavaScript 进行了此操作。

---

转换方向，我们为网站构建了一些导航。一行链接在宽屏幕上效果很好，但在小屏幕上开始分成多行并变得笨拙。我们稍微研究了一些 屏幕外导航模式，并决定采用这种方法。不过我们的导航会很简单。只需点击一个链接即可显示菜单，整个屏幕都会显示导航。点击另一个链接将其隐藏。

我们决定采用 “状态” CSS 方法。我们将使用 jQuery 来监视我们隐藏/显示菜单按钮上的点击，但它将只在 body 元素上切换一个类名。该类名将控制页面所处的视觉状态。当存在类名且屏幕宽度较窄（通过 @media 查询确定）时，导航菜单将获得全屏处理。

我们尝试了一些可访问的隐藏技巧，在这些技巧中，我们将元素移出屏幕 而不是使用 display: none; 使其再次显示变得有点棘手，但最终使用了 position: static;，这意味着 top/left 值变得毫无意义。

---

转换方向，我们开始研究条件加载的想法。更改不同屏幕尺寸的布局是响应式设计的一部分，但有时也需要具有更适合当前情况的不同内容。我们以 Google 地图为例。在小屏幕上，我们不仅不想加载嵌入式交互式 iframe 的开销，而且这种体验也比大多数手机具有的原生体验更糟糕（例如，真正的地图应用程序或 maps.google.com）。

计划是“移动优先”，嵌入地图的静态图像，该图像链接到 maps.google.com，然后在大型屏幕上将其替换为 iframe。我们使用库 Enquire.js 来监听某些媒体查询何时匹配并触发回调函数。在这些回调函数中，我们使用 $.load（jQuery Ajax）加载相应的内容。

---

这几乎是我们结束的地方。我们以一些随机内容结束，例如 Sass 中的循环以及 Compass 除了我们在项目中使用的一些简单内容之外的其他功能。

如果您参加了研讨会，我会向您发送项目清理后的最终版本。