上个月，在《HTML5对电子商务商家的意义》一文中，我介绍了超文本标记语言的目的以及HTML5为何优于之前的版本。在本文中，我将回顾层叠样式表的作用。
HTML 用于结构；CSS 用于外观
理解 CSS 的一种方法是将其与 HTML 进行比较。
HTML 将网站的内容组织成逻辑结构。它可能包含带有图片的页眉、标题以及描述产品的段落等元素。
CSS 定义了所有这些单独元素的设计、外观和位置。该页眉可能高 200 像素，颜色为浅蓝色。标题可能是大号 Museo 衬线字体，而产品描述可能在左侧包含一张图片。
CSS 的实际应用
通过示例来展示 CSS 的效果最佳。以下是我 HTML5 文章中简单菜单的 HTML 代码。
<nav> <a href="/">Home</a> | <a href="/new">New Products</a> | <a href="/all">All Products</a> | <a href="/cart">Cart</a> </nav>
以下是同一菜单的前端视觉外观截图。
一个仅使用 HTML5 的示例网站菜单。
现在，我将为该菜单应用一些简单的 CSS。
nav a { color: #FFFFFF; background: #008000; border-radius: 5px; text-decoration: none; padding: 5px; } nav a:hover { color: #008000; background: #ffffc2; text-decoration: underline; }
注意 CSS 如何改变菜单的外观。
将 CSS 应用于 HTML5 菜单会改变其外观。
仅用两条 CSS 样式规则，一个简单的平面导航菜单就变成了带有绿色圆角按钮的菜单，按钮之间留有间距。当鼠标悬停在按钮上时，它们还会变成黄色。
这个示例是基础 CSS。其中大部分内容即使在 2000 年左右的老式网页浏览器和老式计算机上也能正常工作。
早期的非 CSS 样式设计
说到 2000 年，了解一些网络历史有助于解释为什么 CSS 已成为如此主导的技术。
过去，设计规则被应用于 HTML 文档中的每个单独元素。以上述示例为例，导航菜单中的每个链接都需要在 HTML 内部为其添加规则。对于四个链接来说这不算什么大问题。但如果单个页面上有数百个元素，整个网站有成千上万页，那就成了大问题。
事实上，这里有一个示例菜单，其中每个 HTML 元素都应用了一条规则。
<nav> <a style="color: #ffffff; background: #008000; border-radius: 5px; text-decoration: none; padding: 5px;" href="/">Home</a> | <a style="color: #ffffff; background: #008000; border-radius: 5px; text-decoration: none; padding: 5px;" href="/new">New Products</a> | <a style="color: #ffffff; background: #008000; border-radius: 5px; text-decoration: none; padding: 5px;" href="/all">All Products</a> | <a style="color: #ffffff; background: #008000; border-radius: 5px; text-decoration: none; padding: 5px;" href="/cart">Cart</a> </nav>
这包含大量文本。请注意，要找到用于链接名称的实际单词——“Home”、“New Products”、“All Products”、“Cart”——有多么困难。
这使得网页设计的更改变得极其困难且容易出错。一个页面上的单个拼写错误就可能导致该页面与其他所有页面看起来不同，而且你可能几个月都察觉不到。
如果你想将所有链接改为绿色，你需要编辑分布在 1,000 个文件中的约 10,000 个元素。
全站设计一致性
CSS 大大简化了这一过程。使用 CSS，可以为整个网站或所需数量的页面定义样式规则。这不仅使全站更改变得容易，还能保持设计的一致性。
CSS 通过选择器将设计规则应用于 HTML 元素来实现这一点。这些选择器是指向应使用每种样式规则的 HTML 文档部分的某种方式。在上面的示例中，我选择了导航（“nav”元素）内的链接（“a”元素），以组合成一个规则（“nav a”）。通过这样组合选择器，我可以仅设置导航链接的样式，而让其他链接保持不变。
另外请注意，上面的 CSS 示例使用了稍微不同的选择器（“nav a:hover”）来定位相同的导航链接，但仅在鼠标悬停在其上时（“:hover”）生效。
针对特定页面和元素
组合选择器还使 CSS 能够以累加方式工作。这意味着你可以用很少的工作量在现有设计中添加新内容。如果你的商店的 CSS 组织良好并且使用了良好的选择器，你就可以确信新添加的内容只会影响你希望它们影响的页面和区域。
这也适用于逐页操作，例如着陆页或限时促销页面，在这些页面中，整体站点设计的一部分被使用，而其他部分则完全替换。例如，你可能会保留页眉和页脚，但移除侧边导航，并将购物者的注意力集中在大型中心内容上。
使用 CSS，你甚至可以在整个站点临时添加某些内容，然后在以后轻松将其移除。例如，在冬季期间，电子商务网站上经常会出现季节性主题、颜色和 designs。季节过后，可以移除该冬季主题的 CSS，站点恢复为原始设计。
CSS 的挑战
在使用 CSS 时，长期来看可能会出现两个重大问题。这两个问题都是由选择器的组织方式引起的。
第一个问题是，当 CSS 针对过于具体的元素时，许多单个元素和页面最终都会拥有各自自定义的设计。这削弱了 CSS 的优势，即通过一套统一的站点级设计规则来保持整个网站风格的一致性。从长远来看，随着网站的增长以及页面和样式的不断添加，这可能会成为维护上的难题。我曾参与过一些项目，其中按钮的样式竟有五六种不同的实现方式，且彼此之间略有差异。要确定哪一种才是正确的做法，过程十分痛苦。
第二个问题是，CSS 可能变得过于通用。原本只影响特定元素或一组元素的聚焦性更改，其样式规则可能会“泄漏”出去，并无意中影响到其他元素。由于除非你亲自观察到这种意外效果，否则根本无从知晓问题已经发生，因此这一问题会进一步加剧。一旦出现这种情况，每一次设计变更都变得充满风险。为了评估对其他页面的影响，往往需要耗费大量时间进行测试。
这些潜在问题并没有单一的解决方案。CSS 如此有用，以至于我们不应停止使用它。对我而言，行之有效的方法是像对待传统软件开发一样来处理网页设计和 CSS：不要贸然进行快速修改，而是先仔细思考变更内容，实施更改，然后在不同页面上进行测试，最后清理所有发现的缺陷。
简而言之，正确使用 CSS 可以大幅简化设计变更工作。它提供了一种机制，使设计能够随时间逐步演进。无论是微小的调整还是全面的重构，CSS 都是您电子商务商店技术栈中不可或缺的强大组成部分。
请参阅Eric Davis系列文章关于非开发者开发主题的下一期：JavaScript对电子商务商家的意义。