如何编写HTML，CSS和JavaScript，以使后端开发人员的工作更轻松？

从设计师那里获得设计时，我将其作为PSD（Photoshop）文件获得。我一直期望适当的层和文件夹名称，基本上是干净且托管的PSD。通过这种设计，我开发了HTML，CSS和JavaScript，并将其交付给后端开发人员。为了使他们易于理解，我

• 编写语义代码，
• 将JavaScript和CSS保存在外部文件中，
• 在HTML，CSS和JS文件中添加有用的注释，
• 使用CSS精灵（尽管开发人员不喜欢它），
• 使用HTML5样板，
• 将jQuery用于JavaScript，
• 尽可能尝试使用新的HTML5标签和CSS3，以及
• 发送了一个包含HTML，CSS，JS和图像的Zip文件。

我希望，如果需要对布局进行一些小的更改，则开发人员可以处理。

我想从后端开发人员和其他CSS忍者那里听到，在文件的组织和标记方面，还有更多人可以做些什么，以使与后端系统（例如，后端技术，PHP，.NET）的集成更容易，Ruby等）。不同的客户端使用不同的系统。

其中许多答案将涵盖广泛的想法，但以下是我个人的观点：

• 在表单设计中留出空间来显示错误消息。
• 不要在输入框中输入标签！
• 将CSS和JavaScript放在单独的文件中，除非您知道自己在做什么并且对此感到不愉快。
• 页面之间的设计元素应相同。当设计组件（例如“最近查看”的框）在每个页面上具有不同的标记时，这真令人生气。
• 不要做对您容易的事，做对的事。<button>标签很烂。backround-image对于真正应该是<img>标签烂的东西。
• 确保如果要创建页面组件，它可以缩放。我知道大多数优秀的前端开发人员都可以这样做，但是我有很多实例，在某些情况下有人使用单个图像，这本来应该是上限/下限。程序员不喜欢打开Photoshop。
• 校对您的模板。程序员（优秀的程序员）是敬业，注重细节的人员。如果他们开始发现设计中的问题（页脚导航中可能存在拼写错误或拼写不一致），这将使他们提出问题并减慢工作速度。

最后，也许最重要的是：

• 了解后端正在开发的语言的基本约定。能够查看PHP模板并理解a foreach或if语句后面的基本语法以及如何格式化echo语句或移动<?php ?>标记，将极大地提高您作为前端开发人员的价值-我很喜欢前端开发人员的需求进行简单的更改即可在模板中完成，而无需将所有文件的新zip递给我。
• 作为附录，学习使用版本控制软件。您不需要成为专家，但是如果我可以看一下差异而不是试图找出两个zip文件之间的变化，那么它可使我的工作轻松一百倍。

这些只是少数几个-我敢肯定还有很多，但是如果您完成所有这些工作，那么您一定会赢得将模板转换为网站的人的尊重和赞赏。

我能想到的显而易见的事情是使行为简单，这将使后端家伙的生活更轻松。当设计具有各种行为（滚动，菜单等）的网页元素时，所有这些行为都应该以一种通用的方式进行标准化，这样开发人员就不必不断地恢复某些图表来确定他的功能。需要调用才能使页面正常运行。

网格不应按单元对数据或功能进行操作。页面的块元素应易于定义为公共元素，以便可以在后面的代码中轻松对其进行分段。这将帮助开发人员重用代码和/或促进页面各个方面之间的通信。

页面区域不应跨越特定的设计边界。来自一个元素的项目不应侵入来自另一个元素的项目。

但是有一点是，您根本无法避免让开发人员跳入困境。某些界面元素就其本质而言，将很难构建。

请注意，有时候，您必须在简化后端开发人员的解决方案和优化某些事情之间做出选择。

您引用的CSS精灵就是一个很好的例子。我不明白当可伸缩性和性能至关重要时，有人如何创建网站，并且每个页面都有指向100张图像，5个CSS和15个JavaScript文件的链接。另一方面，CSS Sprite并不易于维护，设计中的细微更改可能需要大量工作。

例如，如果您有三个状态图标，一个在另一个状态下，并且您必须添加第四个状态，那么是否将第四个图标与其他三个状态分别添加到图像的底部？还是将其添加到第三个图标之后，将其他所有内容移到底部以留出一些空白？

合并和最小化CSS和JavaScript文件也是如此。您必须为某个规模的网站进行此操作，但这需要额外的精力。

对于CDN来说完全一样。您必须将其用于大型网站，但更改起来会更加困难。因为如果你改变了一个CSS文件例如，你必须强制浏览器下载一份新的，通过修改URI到文件里cdn.example.com/g.css?r=2，然后cdn.example.com/g.css?r=3，等。

同样，“更容易”是相对的。例如，请参见编写CSS代码的准则：就个人而言，我更喜欢每行一种样式，且没有空格：

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

虽然大多数人会讨厌这种语法，但更喜欢我讨厌但难以阅读的语法（不，我并不疯狂）：

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

同样，使用jQuery并不意味着您将使后端开发人员更容易修改文件，因为某些开发人员对Prototype或其他框架更有经验。

在所有情况下，如果开发人员想阅读（大多数都不需要），则详细的文档很有用。您还可以通过向特定的开发人员精确地询问特定的开发人员他更喜欢待做的事情，并在开始时并排工作，同时构建一个框架（例如，设计用于最小化的工作流程）来简化开发人员的生活。并合并文件）。

万事俱备的是，设计师没有在墙上扔一个zip文件，而是作为开发人员之一实际在项目中工作。需要一些手把手来进行设置，但是当设计和开发之间没有任何转换并且每个人都可以参与相同的迭代时，这确实很棒。如果您有一个良好的无摩擦敏捷过程，那就很难实现。

在大多数情况下，我都希望设计师以版本控制的方式工作并将其用作分发机制。我真的不想每次都进行小的更改时都处理一个大的zip文件。

您的灵活性通常就是他们的灵活性。您遵循的所有最佳做法都是应用程序的双赢。

但是，编写关键的UI是一个关键且经常被忽略的问题。太多的UI组件过多地固定在一个上下文或一组过于严格的HTML上，并且CSS设置失败。

例如，如果您有下拉菜单，则将绝对定位的下拉组件锚定在相对集（无需坐标）单击的容器内的JS工作要比拉出JQuery锤子并获得将其悬停的坐标要少得多。在元素上方，然后将其粘贴到位。如果页面移动或某些新的浏览器功能放弃了定位信息，则中断的可能性也大大降低。您越依赖HTML / CSS技能避免JS工作，您的UI通常就越健壮。

通常，我会尝试确保UI组件唯一需要的是HTML标记，以使用适当的ID或类来容纳它。您可以在不破坏UI的情况下使用该容器执行更多操作，或者随着容器尺寸的变化而适应容器的实际扩展/缩小，它可以在无需客户端的情况下轻松地在应用程序的任何部分上实现专家。他们要做的就是在上面坚持一堂课。

首选在ui容器上进行事件委派，而不是直接将侦听器分配给按钮之类的端点节点。该UI组件现在可以与静态HTML一起使用，但是您永远不知道何时有人希望能够使用innerHTML或其他东西来翻录和重写HTML。如果容器是完整的，并且所有事件都被委派了（请参见jquery的“ on”方法），则不必担心，它们可能永远也不会学习替换HTML中断监听器的困难方法。

为了使委派成为一种选择，不要在端点节点以外的任何地方使用stopPropagate并将仇恨邮件发送给白痴的框架开发人员，这些开发人员到处都是垃圾邮件。

就布局而言，使HTML保持最少的语义，并避免使用div包装器。HTML越少，布局新手就越容易诊断布局问题。

为实用程序CSS使用不言自明的类名。对于CSS新手来说，“行”类比“ clearfix”类更清晰。

始终提供唯一的部分元素，唯一的ID。它使识别某节特定内容发生的位置变得更加容易，覆盖这些内容也变得更加容易，并且还可以提高易读性和性能。

显然，过度使用类方案是个坏消息，但是后端开发人员只需在事物上添加正确的类就可以设置更多的内容，那么他​​们对现有页面进行更改的过程就越容易。

当然，在项目开始时，至少要让他们就这一点达成共识：后端和前端仅通过HTML和JSON连接。不要让他们使用“为您编写JavaScript”的内容！这是一个流血的混乱和维护的噩梦。

与所有与开发相关的事物一样，更喜欢DRY和极简主义。

它仍然不会让我发表评论（如此愚蠢），但我要提个个人要注意的是，我每天都会与PHP编码器背靠背地工作（以及协助他的工作），而我们发现的最简单的工具是利用Komodo的工具箱并在工具箱x中列出每个视图/控制器/模型的“已传输”变量，以便在任何时候，如果我要围绕发送给该页面的一组数据设计一个页面，可以在工具箱中查看并确切地了解正在发送的数据以及发送的“类型”，反之亦然。