12为了使你的代码清洁原则

来源：互联网发布：java byte i=127 编辑：程序博客网时间：2024/04/30 11:23

美丽的HTML是一个美丽的网站的基础。当我教有关CSS的人，我总是首先告诉他们，良好的CSS只存在同样不错的HTML标记。一所房子也只有在强大的基础，对不对？清洁的优势，语义的HTML有很多，但这么多的网站从写得不好的标记受到影响。

让我们来看看一些不好的HTML写的，讨论的问题，然后鞭塑造成！记住的，我们不通过任何的判决内容或设计的这个页面，只有建立它的标记。如果你有兴趣，采取了一个窥视坏代码和良好的代码，然后才开始这样你就可以看到大图片。现在让我们开始在右上角。

方法[到，你知道我们是一个自由电子杂志？立即订阅并获得新的短提示和技巧在您的收件箱！]

1。严格的DOCTYPE

如果我们要做到这一点，就让我们做是正确的。没有关于是否使用HTML或XHTML 1.0 4.01需要讨论：他们都提供了严格的版本，将让我们很好的和诚实的，因为我们写我们的代码。

CleanCode-1 in 12 Principles For Keeping Your Code Clean

我们的代码不使用任何表布局反正（太好了！），因此实在没有必要为一个过渡性的DOCTYPE。

资源：

W3C的：推荐使用的DTD文件在您的网站
修复您的网站在正确的DOCTYPE！
没有更多的过渡文档类型，请

2。字符集和编码字符

在我们的<head>部分，第一件事应该是我们的字符集声明。我们正在使用的UTF - 8这里，这是膨胀，但它在我们的<标题列出。让我们继续和移动，以便在浏览器知道它是什么字符集与它开始之前的所有内容阅读任何处理。

CleanCode-2 in 12 Principles For Keeping Your Code Clean

虽然我们谈论的人物，让我们继续下去，并确保任何奇怪的字符，我们正在使用的编码正确。我们有我们的标题符号。为了避免这种可能的误解，我们将其转换为 ＆ 代替。

资源：

维基百科：使用UTF - 8
关于字符教程代码问题
扩展ASCII表

3。正确的缩进

好吧，我们对三线和我已经由压痕缺乏生气。压痕没有对网页呈现的影响，但它有一个对代码的可读性产生巨大影响。标准程序是缩进一个制表符（或几个空格）当你正在开始一个新的元素，是它上面的标签子元素。然后，再回来时，你是一个标签关闭该元素。

CleanCode-3 in 12 Principles For Keeping Your Code Clean

压痕规则还远远没有一成不变的，随时发明自己的系统。但正符合我建议不管你选择。奈斯利缩进标记去美化你的代码，使之便于阅读和跳跃周围英寸很长的路要走

资源：

干净整洁与您的网页的HTML

4。保持你的CSS和JavaScript外部

我们有一些CSS，这已经成为我们的<head>部分悄悄。这是一个严重犯规，因为它不仅泥泞的标记，但它只能适用于这个单一的HTML页面。保持你的CSS文件分开意味着未来的网页可以链接到它们，并使用相同的代码，因此改变在多个页面设计变得容易。

CleanCode-4 in 12 Principles For Keeping Your Code Clean

这可能发生的是一个“快速修复”在某种程度上，这是可以理解和发生在我们所有，但让我们感动在一个外部文件到一个更合适的地方。有没有在我们的头节的JavaScript，但也是一样的。

5。你的标签正确巢

我们的网站的标题，“我的猫网站，”是正确<h1>标记内，这使得完美的意义。并按照规范，标题是对的主页链接。然而，锚链接，请<a>，包装了头标记。容易犯的错误。大多数浏览器会处理的很好，但在技术上这是一个禁忌。锚链接是一个“内联”元素，和头标签是“块”元素。块不应该进去内联元素。这就像在魔鬼克星越过溪流。这只是不是一个好主意。

CleanCode-5 in 12 Principles For Keeping Your Code Clean

6。消除不必要的div的

我不知道是谁第一个创造了，但我喜欢这个词“divitis”，这指的是在HTML标记div的过度使用。有时候在网络设计的学习阶段，人们学会了如何包装在一个div元素，使他们能够针对他们使用CSS样式和应用。这导致了DIV元素的扩散，并在其被用于不必要的地方过于宽松。

CleanCode-6 in 12 Principles For Keeping Your Code Clean

在我们的例子，我们有一个分区（“topNav”）表示，包装一个无序列表（“bigBarNavigation”）。这两个div的和无序列表是块级元素。真的是完全没有必要为<ul>被包裹在一个div，任何你可以做你能做的分区与<ul>。

资源：

Divitis：它是什么，以及如何治疗它。

7。使用更好的命名惯例

这是一个好时机提出命名约定，因为我们只是随着一种“bigBarNavigation编号无序列表进行了座谈。”“导航”部分是有道理的，因为它描述的内容列表中包含，但“大”与“酒吧”描述的设计不是内容。它可能使现在的感觉，因为菜单是一个很大的酒吧，但是如果你改变网站的设计（和，说，更改网站导航垂直式），该ID名称将是混乱和不相关的。

CleanCode-7 in 12 Principles For Keeping Your Code Clean

好类和id名称，如“mainNav”，“subNav”，“侧栏”，“页脚”，“元数据”，描述事物所包含的内容的东西。坏类和id名称是描述的事情，如“bigBoldHeader”，“leftSidebar”和“roundedBox的设计。”

8。给字体的CSS

我们的菜单设计要求全部大写文本。我们只是挖看起来如何，以及更多的权力给我们。我们已经实现了将在全部大写，这当然作品，但更好，未来可扩展性，我们应该像这样抽象的CSS排版一个选择的文本。我们可以很容易瞄准这一文本，把它转化为全部大写与（文本转换：大写）。这意味着，在路上，如果全部大写看起来失去了它的魅力，我们可以作出一个变化不大的CSS改变它经常小写文本。

CleanCode-8 in 12 Principles For Keeping Your Code Clean

9。班/身份证的<body>

所谓“阶级的身体，”我从字面上的意思申请一类的机构，如<body class="blogLayout">。为什么？我可以看到两件事情会在这个代码，使我相信，此网页的布局，比网站上的其他网页上的不同。一，主要内容是id'd分区“mainContent - 500。”喜欢一个人似乎已经在一个点一个“mainContent”分区，然后需要改变其大小和稍后，这样做，创造了一个全新的ID。我猜这是使它更大，因为在代码中我们进一步看到<class="narrowSidebar">应用到侧边栏，我们可以推断，这是添加到瘦身从其正常大小的侧栏。

这不是一个很好的长期替代布局的解决方案。相反，我们应适用于一类的名称作为上述建议的机构。这将使我们的目标都“mainContent”和“文”div的而不喜欢新名称或类唯一需要补充。

CleanCode-9 in 12 Principles For Keeping Your Code Clean

拥有独特的气质和身体的身份证名字是非常强大，并有许多备用布局不仅仅是更多的用途。因为每个内容页正文是位在“”的标签，你能唯一目标挂钩的任何网页上的任何处理;特别有用的东西如用于导航和显示 当前导航，因为你会知道你到底是哪一页，以同独特的机构类。

资源：

编号为大的CSS控制和特异性你的身体
案例分析：重新使用类样式的机构

10。验证

一种不用说，但你应该贯穿于醇'你的代码验证机拿起小错误。有时，错误将不会对网页的渲染，但肯定会影响一些错误。验证码肯定会活得比未经验证的代码。

CleanCode-10 in 12 Principles For Keeping Your Code Clean

如果没有其他原因，就看到了W3C验证工具绿色文本只是让你感觉良好的内部。

资源：

在W3C标记验证服务
XHTML的CSS验证器
免费网站验证器（检查整个网站，而不只是一个页）

11。逻辑顺序

如果有可能，维持一个网站的逻辑顺序是最好的部分。请注意上面的页脚节在我们的代码侧边栏所在。这可能是因为它为网站的设计最好保持刚刚结束的主要内容和侧边栏的这些信息。可以理解，但如果有任何方法可以说是页脚标记到页面上的最后一件事情，然后使用某种类型的布局或定位技术，把它视你需要它，这是更好的。

CleanCode-11 in 12 Principles For Keeping Your Code Clean

12。只要你可以做什么

我们已经介绍了很多在这里，这是一个很好的开始写作清洁网页，但有这么多。当从头开始的，这一切似乎更加容易。当试图修复现有的代码，它感到有很多困难。你可以在一个陷入不育系下来就是对你不好迫使标记。或者，也可能只是这么多的网站网页上的，它很难想像的，即使开始。 没关系！ 最重要的是你学习如何编写好的HTML和你 坚持使用它。

下一次你写的网页，无论是新的项目在一小块巨大的网站，新鲜或开始发生了， 只是做你可以 使它的权利。

CleanCode-12 in 12 Principles For Keeping Your Code Clean

（阿盟）

12为了使你的代码清洁原则

1。 严格的DOCTYPE

2。 字符集和编码字符

3。 正确的缩进

4。 保持你的CSS和JavaScript外部

5。 你的标签正确巢

6。 消除不必要的div的

7。 使用更好的命名惯例

8。 给字体的CSS

9。 班/身份证的<body>

10。 验证

11。 逻辑顺序

12。 只要你可以做什么

1。严格的DOCTYPE

2。字符集和编码字符

3。正确的缩进

4。保持你的CSS和JavaScript外部

5。你的标签正确巢

6。消除不必要的div的

7。使用更好的命名惯例

8。给字体的CSS

9。班/身份证的<body>

10。验证

11。逻辑顺序

12。只要你可以做什么