12个让你代码更简洁的原则

无意间发现这篇文章,看了很有感触,原文是英文,我翻译了一下

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

我们的代码没有用表格来进行布局(很好!),因此没有必要用过渡型的DOCTYPE

Resources:

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

在<head>部分,第一件事情应该是字符集的定义,我们这里使用UTF-8,下图例子则在<title>的下面,我们应该把字符集的定义移到<title>的前面,这样浏览器在读网页内容之前就知道用的哪种字符集

CleanCode-2 in 12 Principles For Keeping Your Code Clean

我们应该保证所有的字符都被正确译码,比如上图中的&符号,为了避免误解,应该把&改成&amp;

Resources:

3. 合适的缩进

代码缩进对网页展示没有影响,但是会对代码的可读性有很大影响。标准的方法是,在一个网页元素的子元素下缩进一个制表符(或者几个空白)

CleanCode-3 in 12 Principles For Keeping Your Code Clean

代码缩进并没有严格的规定,大家可以有自己的风格和方法,但是我建议要保持你的风格,好的代码缩进能使代码美观易读。

Resources:

4. 使用外部CSS和javascripT

下图的代码中<head>部分有CSS代码,这是不好的习惯,因为它不仅使代码混乱,而且CSS只能应该到单独一个HTML页面。当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。

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

把元素嵌套在div里可以方便地在css里控制样式,但有时候过度使用,会产生一些不必要的div嵌套

CleanCode-6 in 12 Principles For Keeping Your Code Clean

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

Resources:

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

就像上面例子里的ul元素id为”bigBarNavigation”,里面的单词”big””Navigation”等都是有意义的。

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

给body添加class,意思是给body应用一个样式,

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.

Resources:

10. 验证

应该使你的代码通过W3C验证,有时候一些小错误对网页显示没有影响,一旦有了影响就后悔莫及咯,因此通过W3C验证很重要。

CleanCode-10 in 12 Principles For Keeping Your Code Clean

就算不是为了其它原因,看见W3C验证器的时候绿色的文字也会让你心情舒畅。

Resources:

11. 逻辑顺序

如果可能的话,让你的网站不同的部分保持一定的逻辑顺序是最好的,下图中,footer部分在sidebar部分的上面。这可能是网站设计需要,不过把footer代码放在最后,并且用一些布局手段把footer显示在需要的地方是最好的。

CleanCode-11 in 12 Principles For Keeping Your Code Clean

12. Just do what you can

这篇文章是写一个简洁的HTML代码的好开端,从头开始写是比较简单的,但是当你修改已有的代码的时候就比较麻烦了。

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说道:

    不错哦!这个文章对于写出规范的html比较有用啊!