Web前端有哪些整洁的代码

六、删除不必要的标签

首先我们一起来看一个实例的截图：

上图明显是一个导航菜单的制作，在上图的实例中：有一个“div#topNav”包住了列表“ul#bigBarNavigation”，而“div”和“ul”列表都是块元素，加上“div”此处用来包“ul”根本就没有起到任何作用。虽然“div”的出现给我们制作web页面带来了极大的好处，但我们也没有必要到处这样的乱用，不知道大家平时有没有注意这样的细节呢？我是犯这样的错误，如果你也有过这样的经历，那么从今天开始，从现在开始，我们一起努力来改正这样的错误。

有关于如何正确的使用标签，大家感兴趣的话可以点击：Divitis: what it is, and how to cure it.

七、使用更好的命名

这里所说的命名就是给你的页面中相关元素定义类名或者是ID名，很多同学都有这类的习惯，比如说有一个元素字体是红色的，给他加上“red”，甚至布局都写“left-sidebar”等，但是你有没有想过，如果这个元素定义了“red”后，过几天客户要求使用“蓝色”呢？或者又说，那时的“left-sidebar”边栏此时不想放在左边了，而是想放在右边，那么这样一来我们前面的命名可以说是一点意义都没有了，正如下面的一个图所示：

那么定义一个好的名就很得要了，不但自己能看懂你的代码，而且别人也能轻松读懂你的代码，比如说一个好的类名和ID名“mainNav”、“subNav”、“footer”等，他能描述所包含的事情。不好的呢，比如前面所说的。

如果想了解更多这方面的知识，可以点击：

Standardizing CSS class and id names

CSS Tip #2: Structural Naming Convention in CSS

CSS coding: semantic approach in naming convention

CSS Naming Conventions and Coding Style

八、离开版本的CSS

我们在设计菜单时，有时要求所有菜单选项的文本全部大写，大家平时是不是直接在HTML标签中就将他们设置成大写状态呢？如果是的话，我觉得不好，如果为了将来具有更好的扩展性，我们不应该在HTML就将他们设置为全部大写，更好的解决方法是通过CSS来实现：

九、定义的类名或ID名

大家平时制作web页面时不知道有没有碰到这样的问题，就是整站下来，使用了相同的布局和结构，换句话说，你在页面的布局上使用了相同的结构，相同的类名，但是突然你的上级主管说应客户的需求，有一个页面的布局需要边栏和主内容对换一下。此时你又不想为了改变一下布局而修改整个页面的结构，此时有一个很好的解决办法，就是在你的这个页面中的“”中定义一个特殊的类名或ID名，这样来你就可以轻松的达到你所要的需求。这样的使用，不知道大家使用过没有：

给“”定义独特的类和ID名称是非常强大的，不仅仅是为了像上面一样帮你改变布局，最主要的是有时他能帮你实现页面中的某一部分达到特殊效果，而又不影响其它页面的效果。为什么有这样的功能，不用我说我想大家都是知道的。因为每个页面的内容都是“”的后代元素。

如果想了解更多这方面的知识，可以点击：

ID Your Body For Greater CSS Control and Specificity

Case study: Re-using styles with a body class

十、验证你的代码

人不免会出错，我们编写代码的时候也是一样的，你有时候总会小写或多写，比如说忘了关闭你的元素标签，不记得写上元素必须的属性，虽然有一些错误不会给你带来什么灾难性的后果，但也不免会给你带来你无法意估的错误。所以建议您写完代码的时候去验证你一下你的代码。验证后的代码总是比不验证的代码强：

为一有效的验证你的代码，我们可以使用相关的工具或者浏览器的插件来帮助我们完成。如果你的代码没有任何错误，W3C验证工具会在你们面前呈现绿色的文字，这样让你是无比的激动人心，因为再次证明了你写的代码经得起W3Ｃ的标准。

如果想了解更多这方面的知识，可以点击：

The W3C Markup Validation Service

XHTML-CSS Validator

Free Site Validator (checks entire site, not just one page)

十一、逻辑顺序