北京高端建站：设计实施的九项原则

北京高端建站我们如何评估现有项目？无论我们是在审核代码，审核CSS还是为我们团队中的角色采访候选人，这里都有一些原则可以提供良好的指导。

起初，我很困惑。我花了好几个小时告诉他们“正确行事”所需要的一切。但在思考之后，我意识到问题的根源在于更深层次的需要来指导和评估通常是一组主观选择 - 有时候是选择很多不同的人在不同的时间制作。像一致的命名约定和实时样式指南这样的东西是最终结果，但这些“最佳实践”植根于一组并不总是明确的更深层次的值。例如，如果没有对模块化的更广泛的认识，诸如“ 最小化与另一个类合作的类的数量 ”这样的具体建议就没那么有用。

我意识到，为了真正了解我们的工作是否有益，我们需要更高水平的原则，可以作为实施设计的衡量标准。我们需要从CSS等特定语言中删除的东西或者写作的一种看法。与设计的普遍原则或尼尔森的可用性启发式非常相似，我们需要一些东西来指导我们实现设计的方式，而不会告诉我们如何做到这一点。为弥合这一差距，我编写了九个设计实现原则。

这不是清单。相反，它是一套旨在保持潜在价值的广泛指导方针。它可以作为实施人员的指南，也可以作为评估现有项目的工具。因此，无论您是在审核代码，审核CSS还是为您的团队中的角色面试候选人，这些原则都应该提供超越特定技术的结构，并产生实现设计的通用方法。

1. 结构化文档是在语义上和逻辑上编写的，有或没有样式。

2. 高效使用最少量的标记和资产来实现设计。

3. 公共值的标准化规则被大量存储和使用。

4. 抽象的基本元素与特定的上下文分离，形成核心框架。

5. 模块化公共元素在逻辑上被分解为可重复使用的部分。

6. 可通过可选参数提供对基本元素的可配置自定义。

7. 可扩展代码很容易扩展，并预测未来的增强功能。

8. 记录所有元素都被描述为供其他人使用和扩展。

9. 准确最终输出是预期设计的适当表示。

为了更容易理解并了解每个原则如何应用于项目，我们将使用我的一个项目中的设计模型作为本文的基础。这是一个特殊的目标网页，宣传现有电子商务网站的每日优惠。虽然某些样式将继承自现有网站，但重要的是要注意这些元素中的大多数都是全新的。我们的目标是使用这些静态图像并使用这些原则将其转换为HTML和CSS。

1.结构化

该文档是在语义和逻辑上编写的，有或没有样式。

这里的原则是我们的文档（HTML）的内容即使没有表示风格（CSS）也有意义。当然，这意味着我们正在使用正确排序的标题级别和无序列表 - 但也使用有意义的容器，如<header>和<article>。我们不应该跳过使用诸如ARIA标签，alt属性和我们可能需要的任何其他可访问性的东西。

这看起来似乎不是什么大不了的事，但无论你使用锚标签还是按钮，它都很重要 - 即使它们在视觉上是相同的 - 因为它们会传达不同的含义并提供不同的交互。语义标记将这种意义传达给搜索引擎和辅助技术，甚至可以更容易地将我们的工作重新用于其他设备。它使我们的项目更具有前瞻性。

创建结构良好的文档意味着学习编写语义HTML，熟悉W3C标准，甚至是其他专家的一些最佳实践，并花时间让代码可访问。最简单的测试是在没有样式的浏览器中查看HTML：

• 没有CSS可以使用吗？

• 它是否仍然具有可见的层次结构？

• 原始HTML是否自己传达了意义？

确保结构化文档可以做的最好的事情之一就是从HTML开始。在考虑视觉样式之前，请写出纯HTML，以了解文档的结构以及每个部分的含义。避免使用divs并考虑适当的包装标签是什么。这个基本步骤将大大有助于您创建一个合适的结构。

<section>
  <header> 
    <h2>Daily Deals</h2>
    <strong>Sort</strong> <span class="caret"></span>
    <ul>
      <li><a href="#">by ending time</a></li>
      <li><a href="#">by price</a></li>
      <li><a href="#">by popularity</a></li>
    </ul>
    <hr />
  </header>
  <ul>
    <li aria-labelledby="prod7364536">
      <a href="#">
        <img src="prod7364536.jpg" alt="12 Night Therapy Euro Box Top Spring" />
        <small>Ends in 9:42:57</small>
        <h3 id="prod7364536">12" Night Therapy Euro Box Top Spring</h3>
        <strong>$199.99</strong>
        <small>List $299</small>
        <span class="callout">10 Left</span>
      </a>
    </li>
  </ul></section>

仅从HTML开始并思考每个元素的含义会产生更结构化的文档。在上面，您可以看到我创建了整个标记而不使用单个标记div。

2.高效

使用最少量的标记和资产来实现设计。

我们必须仔细考虑我们的代码，以确保它简洁，不包含不必要的标记或样式。我常常使用特定于框架的类名来查看divs内的divs 代码，div以实现与右边对齐的块级元素。通常，过度使用HTML是不理解CSS或底层框架的结果。

除了标记和CSS，我们可能还需要其他外部资源，例如图标，Web字体和图像。关于实现这些资产的最佳方法有很多很好的方法和意见，从自定义图标字体到base64嵌入到外部SVG。每个项目都是不同的，但是如果按钮上的单个图标有一个500像素的PNG，那么你很可能不会有意识地提高效率。

在评估项目的效率时，有两个重要问题要问：

• 我可以用更少的代码完成同样的事情吗？

• 优化资产以实现最小开销的最佳方法是什么？

实施效率还与标准化和模块化的以下原则重叠，因为一种有效的方法是使用设定标准实施设计并使其可重复使用。为常见的盒子阴影创建mixin是有效的，同时还创建了模块化的标准。

3.标准化

普通值的规则被大量存储和使用。

为网站或应用程序创建标准通常是建立规则来管理每个标题级别的大小，常见的装订线宽度和每种按钮类型的样式。在纯CSS中，您必须在外部样式指南中维护这些规则并记住正确应用它们，但最好使用LESS或Sass等预处理器，以便将它们存储在变量和mixin中。这里的主要内容是重视像素完美设计的标准。

所以，当我得到一个设计模型，其沟槽宽度为22像素，而不是我们在其他地方使用的15个像素时，我将假设这样的精度不值得，而是使用标准的15像素阴沟。更进一步，元素之间的所有间距将以倍数使用此标准。一个超宽的空间$gutter-width * 2（相当于30个像素），而不是硬编码的值。通过这种方式，整个应用程序具有一致，对齐的感觉。

.product-cards {
  li {
    display: inline-block;
    padding: @gutter-width/4;
    color: @text-color;
    text-decoration: none;
    background-color: @color-white;
    .border;
    margin-bottom: @gutter-width/2;
    margin-right: @gutter-width/2;
  }}.product-status {
  font-size: @font-size-small;
  color: @grey-darker;
  font-weight: @font-weight-bold;
  margin-bottom: @gutter-width/4;}

因为我们使用从LESS变量或mixins派生的标准化值，所以我们的CSS没有自己的任何数值。一切都源于集中价值。

要检查标准化，请查看CSS并查找任何硬编码单位：像素，HEX颜色，ems或几乎任何数值。

• 这些单位是否应使用现有的标准值或变量？

• 该单元是否被重用，以便从新变量中受益？也许你已经意识到这是你第二次应用部分不透明的背景，并且两次都需要相同的不透明度。

• 单位是否可以从现有变量的计算中得出？这对于颜色变化很有用 - 例如，使用标准颜色并对其执行计算以获得10％更暗的颜色，而不是对生成的HEX值进行硬编码。

我尽可能经常使用标准值并仅创建新值作为例外。如果您发现自己在这里调整了5个像素和1个像素，那么您的标准可能会受到影响。

根据我的经验，大多数预处理的CSS应该使用集中变量和mixins，你应该在单个组件中看到几乎没有数字，像素或HEX值。偶尔，添加几个像素来调整单个组件的位置可能是合适的 - 但即使这些情况也应该很少，并且会让您仔细检查您的标准。

4.抽象

基本元素与特定上下文分离，形成核心框架。

我最初将这个原则称为“框架化”，因为除了创建您正在进行的一个特定项目之外，您还应该致力于一个可以在原始环境之外使用的设计系统。该原则是关于识别需要在整个项目或未来项目中使用的更大的共同元素。这开始与排版和表单字段输入一样广泛，一直到不同的导航设计。可以这样想：如果您的CSS将作为一个框架开源，如Bootstrap或Foundation，您将如何分离设计元素？你会如何区别他们？即使您已经在使用Bootstrap，很可能您的项目具有Bootstrap未提供的基本元素，并且这些元素也需要在项目的设计系统中可用。

这里的关键是用更通用的术语来思考每个元素，而不是在项目的特定上下文中。当您查看特定元素时，将其分解为多个部分，并为每个部分提供该元素所具有的整体样式，而不管您现在使用的具体实现。最常见的元素是排版（标题样式，行高，大小和字体），表单元素和按钮。但是其他元素也应该“框架化”，例如标注标签或可能为我们的每日特价设计的任何特殊价格格式，但在其他地方也会有用。

在检查项目的抽象时，请询问：

• 如果我知道它将在另一个有不同需求的环境中重用，我将如何构建这个元素？

• 如何将其分解为整个应用程序中有价值的部分？

通过对每个元素的更一般实现进行思考是关键。这些部分应该存储为完全独立和独立的类，或者更好的是，作为单独的LESS或Sass文件存储，可以使用最终的CSS进行编译。

在Web组件或模块应用程序体系结构中，此原则更容易，因为小部件可能已经以这种方式分离。但它对我们的思考影响与其他任何东西一样多。我们应该始终从我们的工作环境中抽象出我们的工作，以确保我们创造灵活的东西。

5.模块化

常见元素在逻辑上被分解为可重用的部分。

使用“抽象”原则重叠，使我们的设计模块化是建立易于使用和维护的具体设计系统的重要部分。两者之间有一条细线，但差异在原则上很重要。细微差别在于，虽然全局基本元素需要从其上下文中抽象出来，但上下文中的各个项目也需要可重用并保持独立的样式。模块可能是我们的应用程序所独有的，而不是整个框架中我们需要的东西 - 但它们仍然需要可重用，这样我们就不会在每次使用该模块时都复制代码。

例如，如果您正在实施每日交易登陆页面的上一个示例中的产品卡列表，而不是使用类别名称daily-deal-product来制作特定于每日交易的HTML和CSS ，而是创建一个更通用的product-cards类，其中包含所有抽象类还可以在Daily Deals页面之外重用。这可能会导致组件获取其样式的三个单独位置：

• 基础CSS。这是底层框架，包括排版，装订线，颜色等的默认值。

• CSS组件。这些是设计的抽象部分，构成整体设计的构建块，但可以在任何环境中使用。

• 父组件。这些是daily-deal包含特定于Daily Deals的样式或自定义的组件（以及任何子项）。对于许多人来说，这将是一个实际的JavaScript Web组件，但它可能只是一个包含呈现整个设计所需的HTML的父模板。

当然，你可以把这个放得太远，所以你必须做出判断。但是在大多数情况下，您创建的所有内容都应尽可能可重用，而不会使长期维护过于复杂。

6.可配置

可通过可选参数提供对基本元素的自定义。

构建设计系统的一部分是思考项目现在或将来可能需要的选项。仅按规定实施设计是不够的。我们还必须考虑哪些部分可选，通过不同的配置打开或关闭。

例如，我们设计中的标注标记仅显示三种颜色变化，均指向左侧。我们将创建一个默认类并添加其他类名作为可选参数，而不是创建三个单独的类。除此之外，我认为有人可能会出现并希望将旗帜指向不同的背景。实际上，使用这些标注的默认品牌颜色也很有用，即使设计没有特别要求它。我们专门编写CSS来解释这一点，包括左右两个选项。

在考虑特定的设计元素时，请考虑可能有价值的选项。理解这一点的一个重要部分是批判性地思考可以重用该元素的其他上下文。

• 哪些部分可以配置，可选或通过外部变量启用？

• 元素的颜色或位置能够改变是否有价值？

• 提供小型，中型和大型尺寸会有所帮助吗？

使用BEM，OOCSS或SMACSS等方法来组织CSS并建立命名约定可以帮助您做出这些决策。完成这些用例是构建可配置设计系统的重要部分。

7.可扩展

代码很容易扩展，并预测未来的增强功能。

本着与“可配置”原则相同的精神，我们的实施也必须预期未来的变化。虽然构建可选参数很有用，但我们无法预测项目所需的一切。因此，重要的是还要考虑我们编写的代码将如何影响未来的更改并有意组织它以便它易于增强。

构建可扩展的CSS通常需要我使用LESS和Sass的更高级功能来编写mixins和函数。因为除了颜色之外我们所有的调出标志都是相同的，所以我们可以创建一个LESS mixin，它将为每次调出生成CSS，而不需要为每个变体重复代码。该代码旨在扩展，并且易于在一个地方进行更新。

@angle: 170;.callout {
  &.qty-left {
    .callout-generator(@color-deals, @color-white, @angle);
  }
  &.qty-sold {
    .callout-generator(@color-white, @color-deals, @angle, 2px solid @color-deals);
  }
  &.qty-out {
    .callout-generator(@color-grey, darken(@color-grey, 10%), @angle);
  }}

为了使标注可扩展，我们将创建一个名为LESS mixin .callout-generator，用于接受背景颜色，文本颜色，点和边界角度等值。

.review-flag {
    .callout-generator(@color-brand, @color-white, 75);}

将来，当新要求需要类似的设计模式时，生成新样式将很容易。

要创建可伸缩的设计系统，请学会预测项目中常见的更改，并应用这种理解以确保您编写的代码已准备好进行这些更改。常见的解决方案包括使用变量和mixins，以及将值存储在数组中并循环遍历它们。问你自己：

• 这些元素的哪些部分可能会改变？

• 如何编写代码以便将来轻松进行更改？

8.记录在案

描述所有元素以供其他人使用和扩展。

文档设计被低估，通常是项目中要削减的第一个角落。但是，创建一份工作记录不仅仅是帮助下一个人弄清楚你的意图 - 这实际上是让所有利益相关者加入整个设计系统的好方法，这样你就不会每次都重新发明轮子。您的文档应该是团队中每个人的参考，从开发人员到管理人员。

记录您工作的最佳方式是创建实时样式指南，该指南直接从代码中的注释生成。我们使用一种称为风格指导驱动的开发方法，以及DocumentCSS，它可以为红利付出代价。但即使您的项目没有实时样式指南，也可以用HTML手动创建一个甚至是打印格式的PDF。要记住的原则是我们所做的每件事都必须记录在案。

要记录您的设计系统，请编写说明以帮助其他人了解设计的实现方式以及他们自己重新创建设计所需的操作。此信息可能包括元素背后的特定设计思想，代码示例或实际元素的演示。

• 我如何告诉别人如何使用我的代码？

• 如果我正在招募新的团队成员，我会解释什么以确保他们知道如何使用它？

• 我可以展示每个小部件的哪些变体来演示它可以使用的所有方式？

9.准确

最终输出是预期设计的适当表示。

最后，我们不能忘记，我们创造的东西必须与它想要反映的原始设计概念一样伟大。如果不符合他们对视觉吸引力的期望，没有人会欣赏设计系统。重要的是要强调结果只能是设计的合适表示，并且不会像素完美。我并不喜欢“像素完美”这个短语，因为我认为实现必须与模型完全相同，像素为像素，是忘记任何约束并使标准化贬值（更别提了每个浏览器都会使CSS略微渲染）不同）。使响应性应用的静态设计很少考虑到每种可能的设备尺寸，这使得准确性变得复杂。关键是需要一定程度的灵活性。

您必须确定项目需要多少适当的表示，但要确保它符合您正在使用的人的期望。在我们的项目中，我将审查与客户端的像素完美度的主要偏差，以确保我们在同一页面上。“这些设计展示了带边框的默认蓝色按钮样式，但我们的标准按钮颜色略有不同，没有边框，所以我们选择了相应的。”设定期望是这里最重要的一步。

思维系统

这九个原则的目标是提供在HTML和CSS中实现设计的指南。它不是一套规则或说明性建议，而是一种思考您的工作的方式，以便您可以优化以获得优秀设计和优秀代码之间的最佳平衡。在应用这些原则时给自己一定的灵活性非常重要。每次都无法达到完美。他们是理想。总有其他的干扰，原则和优先事项阻碍我们做最好的工作。尽管如此，这些原则应该是一直要努力的，不断地检查自己，并积极地追求，因为你将设计从绘图板带到了将要经历的最终媒介。

北京高端建站我很想听听您在实施设计方面的经验。发表评论并分享您在自己的工作中可能使用的任何建议或其他原则。