Beautiful HTML is the foundation of a beautiful website. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.

Let’s take a look at some poorly written HTML, discuss its problems, and then whip it into shape! Bear in mind, we are not passing any judgment on the content or design of this page, only the markup that builds it. If you are interested, take a peek at the bad code and the good code before we start so you can see the big picture. Now let’s start right at the top.

1. 严格的DOCTYPE定义

如果要定义的话,就要用准确的定义,我们这里不讨论用HTML 4.01还是XHTML 1.0,这两者都是比较严格的版本

CleanCode-1 in 12 Principles For Keeping Your Code Clean



2. 字符集和& 等特殊字符


CleanCode-2 in 12 Principles For Keeping Your Code Clean



3. 合适的缩进


CleanCode-3 in 12 Principles For Keeping Your Code Clean



4. 使用外部CSS和javascripT


CleanCode-4 in 12 Principles For Keeping Your Code Clean

当然,在需要”quick fix”的时候,上面这种内部CSS样式也是可以理解的,但是最好还是把代码移到外部文件中,JavaScript代码也是一样。

5. 合适嵌套标签

我们网站的标题”My Cat Site”是在<h1>标签中的,又因为标题是链接到主页,因此又用<a>标签包裹在<h1>标签的外面。这是很容易犯得错误,大多数浏览器会正确处理,但是应该避免这种写法。<a>是一个内联元素,<h1>是一个块级元素,块级元素不应该嵌套在内联元素里面。

CleanCode-5 in 12 Principles For Keeping Your Code Clean

6. 去掉不必要的div


CleanCode-6 in 12 Principles For Keeping Your Code Clean

在我们的例子里,topNav div里包含了一个无序的列表(“bigBarNavigation”),div和ul都是块级元素,没有必要把<ul>嵌套在<div>里,能对<div>使用的也同样适用于<ul>


7. 使用更好的命名约定Use better naming conventions


CleanCode-7 in 12 Principles For Keeping Your Code Clean

好的class和id命名比如 “mainNav,” “subNav,” “sidebar,” “footer,” “metaData,”,都描述了包含的内容,不好的class和id命名描述了设计的样式,比如“bigBoldHeader,” “leftSidebar,” 和 “roundedBox.”

8. 把格式在CSS中定义Leave typography to the CSS

菜单中的元素使用大写字母,可以通过直接写成大写实现,但是为了以后的扩展性和灵活性,我们应该把大写留在CSS里实现,{text-transform: uppercase}

CleanCode-8 in 12 Principles For Keeping Your Code Clean

9. 给<body>添加Class/id


By “class the body,” I literally mean apply a class to the body, like <body class=”blogLayout”>. Why? I can see two things going on in this code that lead me to believe that this page has a layout that is different than other pages on the website. One, the main content div is id’d “mainContent-500.” Seems like someone had a “mainContent” div at one point and then needed to alter its size later on and, to do so, created a brand new id. I’m guessing it was to make it larger, because further in the code we see <class=”narrowSidebar”> applied to the sidebar, and we can infer that that was added to slim down the sidebar from its normal size.

This isn’t a very good long-term solution for alternate layouts. Instead, we should apply a class name to the body as suggested above. That will allow us to target both the “mainContent” and “sidebar” divs uniquely without the need for fancy new names or class additions.

CleanCode-9 in 12 Principles For Keeping Your Code Clean

Having unique class and id names for the body is very powerful and has many more uses than just for alternate layouts. Because every bit of page content lies in the “body” tag, you can uniquely target anything on any page with that hook; particularly useful for things like navigation and indicating current navigation, since you’ll know exactly what page you are on with that unique body class.


10. 验证


CleanCode-10 in 12 Principles For Keeping Your Code Clean



11. 逻辑顺序


CleanCode-11 in 12 Principles For Keeping Your Code Clean

12. Just do what you can


That’s OK! The important thing is that you learn how to write good HTML and that you stick with it.

The next time you write HTML, be it a small chunk in a huge website, or the beginning of a fresh new project, just do what you can to make it right.

CleanCode-12 in 12 Principles For Keeping Your Code Clean


原文链接:12 Principles For Keeping Your Code Clean

5 Responses

  1. Arboo说道:

    羡慕英语好的人…. 8)

  2. 扒一扒说道:


  3. justinkine说道: